Question : Multiple onMouseOut events for different z-index values

Hello,
been working on a site for a while and have got it so close (thanks largely to experts on here).

I have a set staggered images, the stagger creating a slice of the imgages beneath at the side as tabs. When these tabs are hovered over, they change the image (black to a light version) to get a roll over effect. When clicked that tab image comes to the front with z index, and pushes the others behind. What I want is for the onMouseOut to apply to more than one z index so that event would apply to z index 1 and 2 only. The reason being that currently the top image still has the roll over so when a user hovers and then moves off, the top in focus image goes tot eh dark version. This should only happen when the image is below (z index 1 and 2).

This is the code for the div and Mouse events:

<div id="cons3"
onMouseOver="if (this.style.zIndex!=3) this.style.background='url(final-shots/Image_0078.jpg)';"
onMouseOut="if (this.style.zIndex!=3) this.style.background='url(final-shots/Image_0078_Black.jpg)';"

onClick="change3over()">
</div>


I tried separating with a semicolon as I had found on searches but doesn't work:

onMouseOut="if (this.style.zIndex!=3) this.style.background='url(final-shots/Image_0078.jpg)';if (this.style.zIndex!=2) this.style.background='url(final-shots/Image_0078_Black.jpg)';if (this.style.zIndex!=1) this.style.background='url(final-shots/Image_0078_Black.jpg)';"


so i want somethig like above that works if anyone knows how to do it? In effect, if z index is 3 then display the full colour image (without 'black' in the file name), then if z index is 1 or 2 then display the black.

Hope that makes sense?

here is a link the web page if you need it too:

http://www.rickschofield.com/dev/indexFINAL.html

if you roll over the top images and then off you will see the effect i want to remove, that effect should only be on the image below.

hopefully one of you exerts can help out on this...

cheers!

Answer : Multiple onMouseOut events for different z-index values

It seems that the z-index declared in the css file does not hold, for some reason I can't explain. Therefore it is necessary to declare the z-index for the top image in-line with the html, like this

<div class="cons" id="cons1" style="z-index:3"
onmouseover="if(this.style.zIndex!=3)this.style.background='url(final-shots/cons2.jpg)';"
onmouseout="if(this.style.zIndex!=3)this.style.background='url(final-shots/cons2_Black.jpg)';"
onclick="promote('cons',1);">
</div>

I've tested and put up my results here (I'll take it down immediately you confirm that you're done with it):

http://www.csc.liv.ac.uk/~anthony/temp/indexFINAL.html

Code attached.