JavaScript DHTML/Page Components/Image Zoom

Материал из Web эксперт
Перейти к: навигация, поиск

Image zoom in and out

   <source lang="html4strict">

<!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.ru // premshree@hotmail.ru // Loaction of this script : // http://www.qiksearch.ru/javascripts/zooom10.htm // Visit http://www.qiksearch.ru/javascripts.htm for more FREE scripts

// Configure zoOom //----------------------------------------------------------------- var img_path="http://www.wbex.ru/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("
<img src="" + img_path + "" border="3" bordercolor="#000000" name="z" alt="zoOom">
");

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">

zoOom 1.0


<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">zoOom in +</a> <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> <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">ZOoOM out -</a>

Using zoOom, you can zoom in and zoom out any image that is specified in the code.

zoOom is very easy to customise.
You can change the image, it"s position. You can also set the maximum and minimum allowable widths. You can change the zoom speed.
For customising, make changes in the "configure" section of the script.


<a href="mailto:premshree@hotmail.ru" class="link">&#169 2002 Premshree Pillai. All rights reserved.</a>

</body> </html>

      </source>
   
  


Image zoom out

   <source lang="html4strict">
<!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">

Image Zoom Out


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.

The script is very easy to customise. Here the event that calls the function is onclick. You can change it to onmouseover, onmouseout or onmousedown.

To see the script in action again, refresh this page.



<a href="mailto:premshree@hotmail.ru" class="link">&#169 2002 Premshree Pillai. All rights reserved.</a>

<script language="javascript"> // (c) 2002 Premshree Pillai // http://www.qiksearch.ru // premshree@hotmail.ru // Loaction of this script : // http://www.qiksearch.ru/javascripts/image_zoom_out.htm // Visit http://www.qiksearch.ru/javascripts.htm for more FREE scripts

document.write("
<img src="http://www.wbex.ru/style/logo.png" border="3" bordercolor="#000000" name="izo" alt="Image Zoom Out" onclick="javascript:setTimeout("zoom_out()",1000);" style="cursor:hand">
");

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>

      </source>