Recently, I came across this tutorial on creating a zoom in effect for images when hovering over them with the mouse. The tutorial doesn't use tables to display the images, so I was wondering if I could achieve the same effect by placing the images inside a table and adjusting their positions relative to each other.
For example:
<table border='2'>
<tr>
<td>
<img id="a1" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50" width="50">
</td>
<td>
<img id="a2" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50" width="50">
</td>
</tr>
</table>
However, when I tried putting the images inside a table, the effect changed and the size of the table increased. I want the size of the table to remain the same.
I have included the code I am using for zoom in and zoom out effects on images. It works perfectly on Mozilla Firefox but not on Google Chrome. In Chrome, the table column size extends and the z-index property doesn't work as expected. The image 'img1' is within a table tag.
function zoomIn(indexNo){
var zoomin = $('#img1').attr("zoomin");
if(zoomin == "false")
{
$('#img1').css("z-index", 1);
$('#img1').css("position", "absolute");
$('#img1').animate({
height : l_imgHeightZoomIn,
width : l_imgWidthZoomIn,
left : l_imgLeftZoomIn,
top : l_imgTopZoomIn
}, "slow");
$('#img1').attr("zoomin", "true");
}
}
--------------------------------------------------------------
function zoomOut(indexNo){
var zoomin = $('#img1').attr("zoomin");
if(zoomin == "true")
{
$('#img1').css("z-index", 0);
$('#img1').css("position", "static");
$('#img1').animate({
height : l_imgHeight,
width : l_imgWidth,
left : l_imgLeftZoomOut,
top : l_imgTopZoomOut
}, 0);
$('#img11').attr("zoomin", "false");
}
}