JavaScript DHTML/Page Components/Image Zoom

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

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.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("<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.ru" class="link">&#169 2002 Premshree Pillai. All rights reserved.</a>
</td></tr></table>
</body>
</html>



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.ru" class="link">&#169 2002 Premshree Pillai. All rights reserved.</a>
</td></tr></table>
<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("<div id="izo_div" style="position:absolute; top:130; left:190"><img src="http://www.wbex.ru/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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Page_Components/Image_Zoom&oldid=3553»