jQuery

jQuery 워터마크 삽입 소스코드

bang2001 2014. 7. 17. 17:21

특정 이미지 위에 워터마크 이미지를 삽입하는 jQuery 기반의 자바스크립트 소스입니다. 범용으로 사용하기에는 수정이 필요한 소스코드입니다.


function setWaterMark()

{

var image_box = $(".image_box");

var water_mark = $(".water_mark");

var box_width = 0;

var box_height = 0;

var water_mark_width = 0;

var water_mark_height = 0;

var left_position = 0;

var top_position = 0;

for(var i=0 ; image_box && image_box.length > i ; i++)

{

box_width = image_box.eq(i).innerWidth();

box_height = image_box.eq(i).innerHeight();

water_mark_width = water_mark.eq(i).outerWidth();

water_mark_height = water_mark.eq(i).outerHeight();

left_position = (box_width - water_mark_width) / 2;

var top_position = (box_height - water_mark_height) / 2;


if(left_position <= 0) return;

if(top_position <= 0) return;

water_mark.eq(i).css("left", left_position+"px");

water_mark.eq(i).css("top", top_position+"px");

}

}


※ 참고 : 워터마크로 사용되는 이미지의 position은 absolute로 설정되어있습니다.