Image Zoom Function

[Truffle]

Little function i wrote to make a thumbnail change to the larger picture when you put your mouse over it and return back to the thumbnail when your mouse lleaves.

It works okay, one small annoyance when the mouse is positioned in just the right spot. But someone please make it better :)


function toggleZoom(id,oW,oH,zW,zH,oImage,zImage,layer){
//id, original width, original height, zoom width, zoom height, original image (thumb), zoomed image, layer
w = document.getElementById(id).width;
h = document.getElementById(id).height;
if((w == oW) || (h == oH)){ //if current width of image is equal to it's orignal width then it's zoomed out so we must now zoom in
//Zoom in
document.getElementById(id).src = zImage;
document.getElementById(id).width = zW;
document.getElementById(id).height = zH;
document.getElementById(id).style.position = "absolute";
document.getElementById(id).style.zIndex = document.getElementById(id).style.zIndex + layer;
}
else{ //Zoom Out
document.getElementById(id).src = oImage;
document.getElementById(id).width = oW;
document.getElementById(id).height = oH;
document.getElementById(id).style.position = "relative";
}
}

<table><tr><td>
<img id="truck" src="images/chev_thum.jpg" width="121" height="77" onMouseOver = "toggleZoom('truck','121','77','350','223','images/chev_thum.jpg','images/chevrolet.jpg','1');" onMouseOut = "toggleZoom('truck','121','77','350','223','images/chev_thum.jpg','images/chevrolet.jpg','1');">
</td><td>
<img id="car" src="images/saturn_thum.jpg" width="121" height="77" onMouseOver = "toggleZoom('car','121','77','350','223','images/saturn_thum.jpg','images/saturn.jpg','0');" onMouseOut = "toggleZoom('car','121','77','350','223','images/saturn_th.jpg','images/saturn.jpg','0');">
</td></tr>
</table>

[Mr J]

Here's one I did many moons ago

www.huntingground.freeserve.co.uk/scripts/img_thumbs.htm

[vwphillips]

also
http://www.vicsjavascripts.org.uk/ImageZoom/ImageZoom.htm