<html>
<head>
<script>
function zoomToggle(iNewW,iNewH,Image,mouse)
{
if(mouse==1)
	{
		Image.style.width=iNewW;Image.style.height=iNewH;
	
	}
else
	{
		Image.style.width=iNewW;Image.style.height=iNewH;
	}
}
</script>

</head>
<body>
<table width="100%", height="100%" >
<tr align ="center">
<td>
<img src="pics/Penguins.jpg" width="50" height="50" 
onmouseover="zoomToggle('500px','500px',this,1);"
onmouseout="zoomToggle('50px','50px',this,2);">


<img src="pics/Jellyfish.jpg" width="50" height="50" 
onmouseover="zoomToggle('500px','500px',this,1);"
onmouseout="zoomToggle('50px','50px',this,2);">

</td>
</tr>
</table>
</body>
</html>

here's my problem, after zooming in the image is too large and I want it to have scrollbars with size of 300 x 300 so the other images can still be seen .

Member Avatar for stbuchok

Put the image inside a div that has a max size and allows scrolling (css overflow).

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.