Image zoom out : Image Zoom « Page Components « JavaScript DHTML

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.java2s.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>
Related examples in the same category

Image zoom in and out