JavaScript Image ZoomIn On Mouse Hover
 |
| zoom image on mouseover using javascript |
Today We will Learn How To Create Hover ZoomIn JavaScript Menu.
Current Hover Menu Will Be Show as Big Icon.
Crate 2 files and 4 image named are Given Below:
1.index.html
2.script.js
***images
3.image1.png
4.image2.png
5.image3.png
6.image4.png
 |
| zoom image on mouseover using javascript |
Now Copy the Below Codes for Certain Files
<html> <head> <title>Image Zoom In Zoom Out on Mouse Hover JavaScript</title> <script src="script.js" type="text/javascript"></script> </head> <body> <h2 align="center">Image Zoom In Zoom Out on Mouse Hover JavaScript</h2> <table align="center" cellspacing="2" cellpadding="2" height="30%" width="30%"><tr> <td align="center" width="120" height="125" style="cursor:pointer;"> <img id="myPicture1" src="image1.png" width="40" height="48" onMouseover="zoom_out(65,75,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="image2.png" width="40" height="48" onMouseover="zoom_out(65,75,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="image3.png" width="40" height="48" onMouseover="zoom_out(65,75,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="image4.png" width="40" height="48" onMouseover="zoom_out(65,75,this)" onMouseout="zoom_in(40,48,this)"></td> </tr> <tr><td colspan="7"> <script language="javascript">document.onload = ctck();</script> </td></tr> </table> </body> </html>
//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;
}
Now You have Successfully Created JavaScript Image ZoomIn and Zoom Out on Mouse Hover.
Run the index.html file to get Result.
Thank you Visit.
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.