Event Handlers

I am working with DIV layers (shudder)

I have 4 images that you can click on...

Each one opens up a new layer just fine. And by clicking on the image again it will close the layer just fine.

The problem I have is that when you do open the layer, then open another layer without closing the first one... one of the layers will over ride the other one.

(OK, this is hard to explain so bear with me)

I click on the image to open layer 1.
I close layer 1.
I then click on the image to open layer 2.
I click on the layer 1 image again, and can see nothing since I haven't closed layer 2 and layer 1 is under layer 2.


Is there a way to reorder the layers so that which ever layer I choose is always on top?

I'm not sure what I can do to fix this situation... but any ideas would be appreciated.

Sure, you just shuffle the z-index.

With DHTML layers, if the z-index is null, or they all have the same value, then the order of precedence is that each layer descending through the code of a document is higher than the one before it.

All you have to do is set the current layer's z-index to 1, while setting the others at 0, and the current layer(last clicked) will be on top.

document.all.layerid.zindex = 1; //Internet Explorer 4+

document.layerid.zIndex = 1; //Netscape 4+