Image zoom

This script will allow you to zoom in or out on an image.

View Demo

Here is the code

<html>
<head>
<title>Image Zoom</title>
<script language="JavaScript1.2">
var zoomfactor=0.05 //Enter factor (0.05=5%)

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>
</head>
<body>
<!-- CHANGE first 43 to your image width, second 43 to image height, and "logo" to your image's name-->
<a href="#" onmouseover="zoom(43,43,'logo','in')" onmouseout="clearzoom()">Zoom In</a> | <a href="#" onmouseover="zoom(43,43,'logo','restore')">Normal</a> | <a href="#" onmouseover="zoom(43,43,'logo','out')" onmouseout="clearzoom()">Zoom Out</a><br><br><br>
<div style="position:relative;width:43;height:43" align="center"><div style="position:absolute">
<img name="logo" src="http://images.bravenet.com/common/images/resources/scripts/bnetlogo.gif">
</div></div>
</body>
</html>

More scripts

Search Resources

Resources Menu

Sponsor

Image zoom