링크버튼에 마우스오버시 이미지 확대/축소 기능 > script

출처 :  http://blueb.co.kr/bbs.php?table=JS_01&where=ALL&keyword=zoom&search_step=1&search_sql=BB_NAME%20LIKE%20'%zoom%'%20OR%20BB_SUBJECT%20LIKE%20'%zoom%'%20OR%20BB_CONTENT%20LIKE%20'%zoom%'&search_sql=BB_NAME%20LIKE%20'%zoom%'%20OR%20BB_SUBJECT%20LIKE%20'%zoom%'%20OR%20BB_CONTENT%20LIKE%20'%zoom%'&query=view&uid=35&p=1

| <a href="#" onmouseover="zoom(400,267,'myimage','in')" onmouseout="clearzoom()">Zoom In</a>
| <a href="#" onmouseover="zoom(400,267,'myimage','restore')">Normal</a>
| <a href="#" onmouseover="zoom(400,267,'myimage','out')" onmouseout="clearzoom()">Zoom Out</a>

위 노란색 부분은 이미지의 실제 가로,세로 크기를 정확하게 넣어주셔야만 그 이미지 비율대로 확대 축소가 가능합니다.

<script language="JavaScript1.2">
var zoomfactor=0.05

function zoomhelper(){
    if (parseInt(whatcache.style.width)>10&&parseInt(whatcache.style.height)>10){
        whatcache.style.width=parseInt(whatcache.style.width)+parseInt(whatcache.style.width)*zoomfactor*prefix
        whatcache.style.height=parseInt(whatcache.style.height)+parseInt(whatcache.style.height)*zoomfactor*prefix
    }
}

function zoom(originalW, originalH, what, state){
    if (!document.all&&!document.getElementById)
        return
        whatcache=eval("document.images."+what)
        prefix=(state=="in")? 1 : -1
    if (whatcache.style.width==""||state=="restore"){
        whatcache.style.width=originalW
        whatcache.style.height=originalH
    if (state=="restore")
        return
        }
    else {
    zoomhelper()
    }
    beginzoom=setInterval("zoomhelper()",100)
}

function clearzoom(){
    if (window.beginzoom)
    clearInterval(beginzoom)
}
</script>

| <a href="#" onmouseover="zoom(400,267,'myimage','in')" onmouseout="clearzoom()">Zoom In</a>
| <a href="#" onmouseover="zoom(400,267,'myimage','restore')">Normal</a>
| <a href="#" onmouseover="zoom(400,267,'myimage','out')" onmouseout="clearzoom()">Zoom Out</a>
<br>

<div style="position:relative;width:400;height:267">
<div><img name="myimage" src="http://www.blueb.co.kr/SRC/javascript/image/IMG_1041.gif" ></div>
</div>