Member Avatar for solvesak

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

  • 3 Contributors
  • 2 Replies
  • 136 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by divyakrishnan
Member Avatar for divyakrishnan

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.