zoom image on mouseover using javascript - Web Development and Web Design Codes

Latest

Wednesday, May 31, 2017

zoom image on mouseover using javascript

JavaScript Image ZoomIn On Mouse Hover

zoom image on mouseover using javascript
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.
Files and Directory Structure:
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
zoom image on mouseover using javascript

Now Copy the Below Codes for Certain Files
index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>

script.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//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.
Read more

Subscribe via email

Ads Here
BANNER 728X90
Newer Article javascript random quote generator Older Article javascript image change on hover
By v�o l�c
Labels:

No comments:

Post a Comment

Thank You for Your Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)