<script language="JavaScript1.2"> //Image zoom in/out script- by javascriptkit.com //Visit JavaScript Kit (http://www.javascriptkit.com) for script //Credit must stay intact for use 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+"px" whatcache.style.height=originalH+"px" if (state=="restore") return } else{ zoomhelper() } beginzoom=setInterval("zoomhelper()",100) } function clearzoom(){ if (window.beginzoom) clearInterval(beginzoom) } </script>

Step 2: Add the below HTML block to display the images you wish to have the zoom functionality. You can insert multiple blocks (as shown below) to display multiple images:

<!-- CHANGE 99 to your image width, 100 to image height, and "myimage" to your image's name--> <a href="#" onmouseover="zoom(99,100,'myimage','in')" onmouseout="clearzoom()">Zoom In</a> | <a href="#" onmouseover="zoom(99,100,'myimage','restore')">Normal</a> | <a href="#" onmouseover="zoom(120,60,'myimage','out')" onmouseout="clearzoom()">Zoom Out</a> <div style="position:relative;width:99;height:100"><div style="position:absolute"> <img name="myimage" src="me.gif"> </div></div> <!-- BEGIN SECOND BLOCK--> <a href="#" onmouseover="zoom(120,60,'myimage2','in')" onmouseout="clearzoom()">Zoom In</a> | <a href="#" onmouseover="zoom(120,60,'myimage2','restore')">Normal</a> | <a href="#" onmouseover="zoom(120,60,'myimage2','out')" onmouseout="clearzoom()">Zoom Out</a> <div style="position:relative;width:120;height:60"><div style="position:absolute"> <img name="myimage2" src="you.gif"> </div></div> <p align="center">This free script provided by<br /> <a href="http://www.javascriptkit.com">JavaScript Kit</a></p>