확대 이미지 레이어형식(DIV)으로 보여주기

사용 용도와 각자 취향에 맞게 수정하여 사용하면 됩니다.

<script language="javascript">
//이미지 보기
function fnViewFilterImg(imgnm, ix, iy, imgview)
{
var objimg = new Image();
var user_width = 500; // 유저가 강제 지정한 이미지 가로크기
var user_height = 500; // 유저가 강제 지정한 이미지 세로크기
// var iW=window.document.body.scrollWidth;
// var iH=window.document.body.scrollHeight;
var ixx=window.document.body.clientWidth;
var iyy=window.document.body.clientHeight;

document.all.spa_vimg.innerHTML = '<img name="objVimg" border="0" omclick="javascript:fnLayerClose('div_viewImg');" align="absmiddle" style="cursor:hand;">';
objimg.src = imgnm;
document.all.objVimg.src = objimg.src;

for (var i=0; i<=1000; i++)
{
objimg.src = imgnm;

if (objimg.width > 0) {
i=1000;
}
}

if (imgview == "Original")
{
var ix = ixx/2 - objimg.width/2;
// var iy = iyy/2 - objimg.height/2;

if (ix < 0) {
ix = 0;
}
if (iy < 0) {
iy = 0;
}
}
else
{
if (objimg.width >= user_width) {
if (objimg.height >= user_height) {
document.all.objVimg.height = user_height;
} else {
document.all.objVimg.width = user_width;
}
} else {
if (objimg.height >= user_height) {
document.all.objVimg.height=user_height;
}
}
}

document.all.div_viewImg.style.width=document.all.objVimg.width;
document.all.div_viewImg.style.height=document.all.objVimg.height;
document.all.div_viewImg.style.pixelLeft = ix;
document.all.div_viewImg.style.pixelTop = iy;
document.all.div_viewImg.style.display='';
}

function fnLayerClose(oLayer) {
eval(oLayer + ".style.display = 'none'");
}

//페이지상의 실제 객체의 위치를 구하기
function getRealOffsetTop(o)
{
return o ? o.offsetTop + getRealOffsetTop(o.offsetParent) : 0;
}

function getRealOffsetLeft(o)
{
return o ? o.offsetLeft + getRealOffsetLeft(o.offsetParent) : 0;
}
//-->
</script>

<div id="div_viewImg" style="position:absolute; left:0px; top:0px; z-index:40; display:none;" >
<span id="spa_vimg"></span>
</div>

<img src="작은이미지URL" width="200" height="200" border="0" omclick="javascript:fnViewFilterImg('확대이미지URL',getRealOffsetLeft(this), getRealOffsetTop(this), 'Original');" style="cursor:hand;">