Zoom Images

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...

solvesak

Newbie Poster

8 posts since Jun 2011

Reputation Points: 10

Solved Threads: 0

11 Months Ago

Take your pick...

http://www.tripwiremagazine.com/2010/02/15-jquery-plugins-to-create-stunning-image-zoom-effects.html

nonshatter

Posting Whiz

377 posts since Nov 2009

Reputation Points: 39

Solved Threads: 63

11 Months Ago

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> 




<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>

divyakrishnan

Posting Whiz in Training

201 posts since May 2010

Reputation Points: 30

Solved Threads: 24

This article has been dead for over three months

You