특정 이미지 위에 워터마크 이미지를 삽입하는 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로 설정되어있습니다.
'jQuery' 카테고리의 다른 글
(작성중) 마우스 영역 (0) | 2014.08.20 |
---|---|
(퍼옴) jQuery input text 커서 이동 (0) | 2014.07.23 |
jQuery 이미지 사이즈 자동 조절(제한) (0) | 2014.01.28 |
jQuery 마우스 포인터 위치 구하기 (0) | 2013.09.30 |
jQuery를 통한 웹브라우저 식별하기 (0) | 2013.08.29 |