Mega Code Archive

 
Categories / JavaScript DHTML / Page Components
 

Image zoom out

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Image Zoom Out</title> <style type="text/css"> .link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal} .link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal} .header{font-family:arial,verdana,helvetica; font-size:20pt; color:#DD0000; font-weight:bold} </style> </head> <body bgcolor="#FFFFFF"> <center><span class="header">Image Zoom Out</span></center> <br> <table width="400" align="center" cellspacing="0" cellpadding="0"><tr><td> <font face="verdana,arial,helvetica" size="-1' color="#000000> In this Script when you move you click on the following image, the image size will decrease gradually (i.e the image will zoom out) and will finally disappear. <br><br>The script is very easy to customise. Here the event that calls the function is <font face="courier">onclick</font>. You can change it to <font face="courier">onmouseover</font>, <font face="courier">onmouseout</font> or <font face="courier">onmousedown</font>. <br><br>To see the script in action again, refresh this page. </font><br><br> </td></tr></table> <table width="400" align="center" cellspacing="0" cellpadding="0"><tr><td> <hr style="width:100%; height:1; color:#3366CC"> <a href="mailto:premshree@hotmail.com" class="link">&#169 2002 Premshree Pillai. All rights reserved.</a> </td></tr></table> <script language="javascript"> // (c) 2002 Premshree Pillai // http://www.qiksearch.com // premshree@hotmail.com // Loaction of this script : // http://www.qiksearch.com/javascripts/image_zoom_out.htm // Visit http://www.qiksearch.com/javascripts.htm for more FREE scripts document.write('<div id="izo_div" style="position:absolute; top:130; left:190"><img src="http://www.rntsoft.com/style/logo.png" border="3" bordercolor="#000000" name="izo" alt="Image Zoom Out" onclick="javascript:setTimeout(&quot;zoom_out()&quot;,1000);" style="cursor:hand"></div>'); img_act_width = izo.width; img_act_height = izo.height; i=1; function zoom_out() {  if(izo.width==0)   {    izo.border=0;   }  if(izo.width!=0)   {    izo.width-=i;    izo.height=Math.round(izo.width*((img_act_height)/(img_act_width)));    setTimeout("zoom_out()",1);    i+=1;   }   }  </script> </body> </html>