JavaScript DHTML/Page Components/Image Zoom — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 13:00, 26 мая 2010
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_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">
<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.
|
<a href="mailto:premshree@hotmail.ru" class="link">© 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">
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.
|
<a href="mailto:premshree@hotmail.ru" class="link">© 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_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>