English
Sign in / Sign up

Image Zoom In and Out Script

This script allows you to zoom in/zoom out an image easily. While zooming an image in/out it does not move the contents around the image. It is similar to that of thumbnail picture script.

Features

  • This script allows you to zoom in/out an image conveniently .
  • Customizable, change the size, position, colors to suit your website.
  • Easy to add it to your website in minutes.
  • Just copy the code and use it into your page where you want these thumbnail pictures to appear.

Preview


Downloads

  Javascript Code
<!-- Script by hscripts.com -->
<!-- More scripts @www.hscripts.com -->
<script type="text/javascript">
//set the time delay,imgsize,arrsize.
var delay=20;
var imgsize=5;
var arrsize=4;
var timeon;
var whoc = new Array(arrsize);
var wid;
var hei;
var i=0;
function zoom_out(p,q,which)
{
if(which.width <= p)
which.width += imgsize;
if(which.height <= q)
which.height += imgsize;
if(which.width <= p)
{
var tmp=which.id;
timeon=eval("setTimeout('zoom_out("+p+","+q+","+tmp+")', delay)");
}
if(which.width > p)
{
zoom_check(which.id);
clearTimeout(timeon);
}
}
function zoom_check(xx)
{
for(var x=0; x<(whoc.length);x++)
{
if(whoc[x] != null && whoc[x] != xx)
{
var ff = document.getElementById(whoc[x]);
ff.width=wid;
ff.height=hei;
}
}
}
function zoom_in(r,s,asd)
{
if(i<(whoc.length-1))i++;
elsei=0;
whoc[i] = asd.id;
if(asd.width >= r)
asd.width -= imgsize;
if(asd.height >= s)
asd.height -= imgsize;
asd.width=r;
asd.height=s;
wid=asd.width;
hei=asd.height;
}
function ctck()
{
var sds = document.getElementById("dum");
if(sds == null){alert("You are using a free package.\n You are not allowed to remove the tag.\n");}
var sdss = document.getElementById("dumdiv");
if(sdss == null){alert("You are using a free package.\n You are not allowed to remove the tag.\n");}
}
</script>
<!-- Script by hscripts.com-->

  HTML Code

<!-- Script by hscripts.com -->
<table align=center cellspacing=2 cellpadding=2 height=100% width=100%><tr>
<td align=center width=120 height=125 style='cursor:pointer;'>
<img id="myPicture1" src="hzoom-images/book.gif" width="40" height="48" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(40,48,this)"></td>
<td width=10></td>
<td align=center width=120 height=125 style='cursor:pointer;'>
<img id="myPicture2" src="hzoom-images/globe.gif" width="40" height="48" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(40,48,this)"></td>
<td width=10></td>
<td align=center width=120 height=125 style='cursor:pointer;'>
<img id="myPicture3" src="hzoom-images/email.gif" width="40" height="48" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(40,48,this)"></td>
<td width=10></td>
<td align=center width=120 height=125 style='cursor:pointer;'>
<img id="myPicture4" src="hzoom-images/clock.gif" width="40" height="48" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(40,48,this)"></td>
</tr>
<tr><td colspan=7>
<div align=center style="font-size: 10px;color: #dadada;" id="dumdiv">
<a href="https://www.hscripts.com" id="dum" style="text-decoration:none;color: #dadada;">© hscripts.com</a>
</div>
<script language="javascript">document.onload = ctck();</script>
</td></tr>
</table>
<!-- Script by hscripts.com -->
  • Release Date - 27-08-2008
  • Downloads : Version 1.0- zooming-images.zip
  • Get free version without ©copyright link for just $10/-
  • For customization of this script or any script development, mail to support@hscripts.com

Usage

  • This script is useful for zoom in/out of an thumbnail image.
  • Unzip the zooming-images.zip, where you can get the html file to execute.
  • Set the time delay as ur wish. i.e,var delay=10;
  • Set the imgsize as your wish. i.e, var imgsize=5;
  • Right click and save the images.
  • You can add any number of images and set the array size.
  • For Example, If you add 4 images means set the array size as 4.
  • Set the unique id for each image and change the height and width of an image in the zoom_out() and zoom_in() function.
    •  Example, <img src="images/child.gif" width="48" height="48" id="myPicture1" onmouseover="zoom_out(55,65,this)" onmouseout="zoom_in(40,48,this)">

License

Related Scripts

Free Javascript Scripts


Ask Questions

Ask Question