Mega Code Archive

 
Categories / JavaScript DHTML / Page Components
 

Image zoom in and out

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>zoOom 1.0</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> <script language="javascript"> // zoOom 1.0 // (c) 2002 Premshree Pillai // http://www.qiksearch.com // premshree@hotmail.com // Loaction of this script : // http://www.qiksearch.com/javascripts/zooom10.htm // Visit http://www.qiksearch.com/javascripts.htm for more FREE scripts // Configure zoOom //----------------------------------------------------------------- var img_path="http://www.rntsoft.com/style/logo.png"; // The Image Path                     | var top_pos=130;          // Image position from top              | var left_pos=162;         // Image position from left             | var max_width=900;        // Max allowable width                  | var min_width=10;         // Min allowable width                  | var time_length=1;        // Zoom delay in milliseconds           | var step=2;               // Pixels by which image should zoomm   | //----------------------------------------------------------------- document.write('<div id="q_div" style="position:absolute; top:' + top_pos + '; left:' + left_pos + '"><img src="' + img_path + '" border="3" bordercolor="#000000" name="z" alt="zoOom"></div>'); img_act_width=z.width; img_act_height=z.height; var original_time=time_length; function zoom_out() {  if(z.width==0)   {    z.border=0;   }  if(z.width!=0)   {    if(z.width>min_width)    {     z.width-=step;     z.height=Math.round(z.width*((img_act_height)/(img_act_width)));     setTimeout("zoom_out()",time_length);    }    else    {     window.alert('Width less than Minimum Width\nCopyRight Qiksearch zoOom.');    }   }   }  function zoom_in() {  if(z.width==0)   {    z.border=0;   }  if(z.width!=0)   {    if(z.width<max_width)    {     z.width+=step;     z.height=Math.round(z.width*((img_act_height)/(img_act_width)));     setTimeout("zoom_in()",time_length);    }    else    {     window.alert('Maximum Width exceeded\nCopyRight Qiksearch zoOom.');    }   }   }  function resume_zoom() {  time_length=original_time; } function pause_zoom() {  time_length=10000000000; } function set_original() {  z.width=img_act_width;  z.height=img_act_height; } </script> </head> <body bgcolor="#FFFFFF"> <center><span class="header">zoOom 1.0</span></center> <br> <!--BEGIN ZOOM LINKS--> <table cellspacing="10" cellpadding="10" align="center"><tr> <td style="border:3 solid #000000" align="middle"><a href="#" onmouseover="javascript:resume_zoom();zoom_in();" onmouseout="javascript:pause_zoom();" style="font-family:verdana,arial,helvetica; font-weight:bold; font-size:15pt; color:#003399; text-decoration:none"><font color="#808080">zoOom in</font> +</a></td> <td style="border:3 solid #000000" align="middle"><a href="#" onmouseover="javascript:resume_zoom();set_original();" style="font-family:verdana,arial,helvetica; font-weight:bold; font-size:15pt; color:#000000; text-decoration:none">original</a></td> <td style="border:3 solid #000000" align="middle"><a href="#" onmouseover="javascript:resume_zoom();zoom_out();" onmouseout="javascript:pause_zoom();" style="font-family:verdana,arial,helvetica; font-weight:bold; font-size:15pt; color:#003399; text-decoration:none"><font color="#808080">ZOoOM out</font> -</a></td> </tr></table> <!--END ZOOM LINKS--> <table width="400" align="center" cellspacing="0" cellpadding="0"><tr><td> <font face="verdana,arial,helvetica" size="-1' color="#000000"> Using zoOom, you can zoom in and zoom out any image that is specified in the code. <br><br>zoOom is very easy to customise. <br>You can change the image, it's position. You can also set the maximum and minimum allowable widths. You can change the zoom speed. <br>For customising, make changes in the 'configure' section of the script. <br><br> </font> </td></tr></table> <table width="400" align="center" cellspacing="0" cellpadding="0"><tr><td> <hr style="width:100%; height:1; color:#DD0000"> <a href="mailto:premshree@hotmail.com" class="link">&#169 2002 Premshree Pillai. All rights reserved.</a> </td></tr></table> </body> </html>