마우스를 오버해서 이미지를 확대해서 보기

마우스 오버시 이미지를 보여주는 것은 Layer를 이용한다면 쉽게 구현할 수 있습니다.
하지만 마우스가 조금이라도 흔들리면 OnMouseOver이벤트가 다시 발생하게 되어 깜밖이게 되는데.... 본 소스는 이런것을 없앴으며 브라우져 크기에 따른 자동 위치 선정들의 기능이 구현되어 있습니다. 본 소스는 www.creon.co.kr 에서 발췌했습니다.


샘플화면보기
<script language="javascript">
var divw=0;
var divh=0;
if (document.getElementById || document.all)
document.write('<div id="imgtrailer" style="position:absolute;visibility:hidden;z-index:100;"></div>')
function gettrailobject()
{
if (document.getElementById)
return document.getElementById("imgtrailer")
else if (document.all)
return document.all.trailimagid
}
function gettrailobj()
{
if (document.getElementById)
return document.getElementById("imgtrailer").style
else if (document.all)
return document.all.trailimagid.style
}
function truebody()
{
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function hidetrail()
{
document.onmousemove='';
gettrailobj().visibility="hidden";
}

function showImage(imagename, caption)
{
var img = new Image
img.src=imagename;
thw=img.width;
thh=img.height;
if (thw=="" || thw==0)
{
thw=500;
}
if (thh=="" || thh==0)
{
thh=500;
}
newHTML = '<table cellpadding=5 style="background-color: #FFFFFF; border: 1px solid #888;">';
newHTML = newHTML + '<tr><td align="center" style="padding: 8px 2px 2px 2px;"><img name='target_resize_image[]' onclick='image_window(this)' style='cursor:pointer;' src="' + imagename + '" border="0" ></td></tr>';
if (caption !="")
{
newHTML = newHTML + '<tr><td> &nbsp; &nbsp;' + unescape(caption) + '</td></tr>';
}
newHTML = newHTML + '</table>';
gettrailobj().left="-500px";
divthw = parseInt(thw) + 2;
gettrailobject().innerHTML = newHTML
gettrailobj().visibility="visible";
// 다음의 divw와 divh값을 변경하여 초기 위치를 변경할 수 있습니다.
divw = parseInt(thw)+25;
divh = parseInt(thh)+85;
document.onmousemove=followmouse;
}
function followmouse(e)
{
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, indow.innerHeight)
if(typeof e != "undefined")
{
if(docwidth < 15+e.pageX+divw)
xcoord = e.pageX-divw-5;
else
xcoord = 15+e.pageX;
if(docheight < 15+e.pageY+divh)
ycoord = 15+e.pageY-Math.max(0,(divh + e.pageY - docheight - truebody().scrollTop - 30));
else
ycoord = 15+e.pageY;
}
else if (typeof window.event != "undefined")
{
if(docwidth < 15+truebody().scrollLeft+event.clientX+divw)
xcoord = truebody().scrollLeft-5+event.clientX-divw;
else
xcoord = truebody().scrollLeft+15+event.clientX;
if(docheight < 15+truebody().scrollTop+event.clientY+divh)
ycoord = 15+truebody().scrollTop+event.clientY-Math.max(0,(divh + event.clientY - docheight - 30));
else
ycoord = truebody().scrollTop+15+event.clientY;
}
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}
< /script>

<br><br><br><br><br>
< div style="width:150px; height: 230px; float: left; margin: 0 0 15 10; padding: 0;">
<img name='target_resize_image[]' onclick='image_window(this)' style='cursor:pointer;' src="/data/file/bbs_lecture/987831222_c634c3a1_pooh.jpg" border="0" width="100" height="100" >
<img name='target_resize_image[]' onclick='image_window(this)' style='cursor:pointer;' src="http://www.creon.co.kr/img/icon_zoom.gif" border="0"
onmouseover="showImage('/data/file/bbs_lecture/987831222_c634c3a1_pooh.jpg', '첫번째 푸우');"
onmouseout="hidetrail();" style="cursor:pointer" >
</div>