onmouseover zoom images

[chechu]

Hey all, I found this great script at browsershots, where an image zooms up onmouseover.
This is the js:

function setZoom(img, dir, width, height, margin, zIndex, delay) {
setTimeout(function() {
if (img.dir==dir) {
img.style.width=width;
img.style.height=height;
img.style.margin=margin;
img.style.zIndex=zIndex;
img.parentNode.parentNode.style.zIndex=zIndex;
}
}, delay);
}

function larger(img, width, height) {
img.dir='rtl';
now=parseInt(img.style.zIndex);
for (i=now+1; i<=10; i++) {
w=(width*(10+i))/20+'px';
h=(height*(10+i))/20+'px';
m=(-i)+'px 0 0 '+(-width*i/40)+'px';
setZoom(img, 'rtl', w, h, m, i, 20*(i-now));
}
}

function smaller(img, width, height) {
img.dir='ltr';
now=parseInt(img.style.zIndex);
for (i=now-1; i>=0; i--) {
w=(width*(10+i))/20+'px';
h=(height*(10+i))/20+'px';
m=(-i)+'px 0 0 '+(-width*i/40)+'px';
setZoom(img, 'ltr', w, h, m, i, 20*(now-i));
}
}


and this is to add where you wish the image to appear:

<div class="preview" style="width:80px;height:80px;float:left; padding-left:20px;">
<a href=""><img class="preview" style="width:80px;height:60px;border:1px solid #000000;z-index:0" src="images/portfolio2.gif" alt="" onmouseover="larger(this,160,120)" onmouseout="smaller(this,160,120)" /></a>
</div>

You will see in this example (http://www.cecicasariego.com/zoomtest.php) that the image zooms, but they come up behind the others.

How can the images zoom up in front of the other images ?

[magicyte]

In the function when the mouse goes over the image, change the z-index of your image to 100. Then when the mouse goes out of the image change the z-index to 0, or whatever your default z-index of the images are. This way the image will be above all other images when your mouse is over the image and below the other images when your mouse is out of the image.

-magicyte

[chechu]

I only see one z function in the code above ?

[Medyman]

Try adding the following to your CSS and see if it makes a difference. I'm just shooting in the dark here, but it might work.


a:hover img.preview {
z-index:10;
}

Also, remove the z-index from the inline styles.

[chechu]

Thanks for trying, Medyman, but still the same result.