Hi I have been trying to implement the zooming of images on mouse over but could not do it because:
1) I am not doing the 'list' kind of display of images.
2) I dont want other images at several positions to be distorted while one image zooms.
3) I need something by which i need not modify the large chunk of code which i used for displaying a collage of images.
Suggest something...
Hi..
This is a simple script I have used.Hop this will be help full for u.
<html>
<head>
<script type="text/javascript">
function image_zoom_in(id)
{
document.getElementById(id).height="150";
document.getElementById(id).width="200";
}
function image_zoom_out(id)
{
document.getElementById(id).height="150";
document.getElementById(id).width="30";
}
</script>
</head>
<body bgcolor="skyblue">
<div align="center"> <table><tr><td><font color=maroon size="18"><b>PhotoGallery</b></font></td></tr></table>
<br>
<br>
<br>
<table border=5 bordercolor=maroon>
<tr>
<td>
<a href="#" onMouseOver="image_zoom_in('a1')" onMouseOut="image_zoom_out('a1')">
<img id="a1" src="p1.jpg" width="30" height="150" />
</a>
</td>
<td>
<a href="#" onMouseOver="image_zoom_in('a2')" onMouseOut="image_zoom_out('a2')">
<img id="a2" src="p2.jpg" width="30" height="150" />
</a>
</td>
<td>
<a href="#" onMouseOver="image_zoom_in('a3')" onMouseOut="image_zoom_out('a3')">
<img id="a3" src="p3.jpg" width="30" height="150" />
</a>
</td>
<td>
<a href="#" onMouseOver="image_zoom_in('a5')" onMouseOut="image_zoom_out('a5')">
<img id="a5" src="p7.jpg" width="30" height="150" />
</a>
</td>
<td>
<a href="#" onMouseOver="image_zoom_in('a4')" onMouseOut="image_zoom_out('a4')">
<img id="a4" src="p4.jpg" width="30" height="150" />
</a>
</td>
<td>
<a href="#" onMouseOver="image_zoom_in('a6')" onMouseOut="image_zoom_out('a6')">
<img id="a6" src="p8.jpg" width="30" height="150" />
</a>
</td>
</tr>
</table>
</div>
</body>
</html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.