How to change z-index with event handler?

kippie · May 17, 2003

In the HTML below there are 4 layers with each a z-index. I'm looking for a way to change these indexes so that I can choose with an event handler which layer is on top. But I have no clue how to do this. Can anyone help?

This is the HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css">
</style>
</head>
<body>
<div id="layer">
This is layer 1<img height="74" width="83" src="

http://www.festifood.nl/aardbei.jpg"></div>

<div id="layer2">
This is layer 2<img height="140" width="100" src="

http://www.festifood.nl/pepperkleinopt.jpg"></div>

<div id="layer3">
This is layer 3<img height="102" width="90" src="

http://www.festifood.nl/appel.jpg"></div>

<div id="layer4">
This is layer 4<img height="87" width="112" src="

http://www.festifood.nl/citroen.jpg"></div>

</body>
</html>

Kippie

jemminger · May 17, 2003

i'm guessing you want to click the layers to bring them to the front:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css">
</style>

<script type="text/javascript">
function onTop(id) {
if (window.prevLayer) {
window.prevLayer.style.zIndex = 999;
}
var thisLayer = document.getElementById(id);
thisLayer.style.zIndex = 1000;
window.prevLayer = thisLayer;
}

</script>

</head>
<body>
<div id="layer" onclick="onTop(this.id);">
This is layer 1<img height="74" width="83" src="

http://www.festifood.nl/aardbei.jpg"></div>

<div id="layer2" onclick="onTop(this.id);">
This is layer 2<img height="140" width="100" src="

http://www.festifood.nl/pepperkleinopt.jpg"></div>

<div id="layer3" onclick="onTop(this.id);">
This is layer 3<img height="102" width="90" src="

http://www.festifood.nl/appel.jpg"></div>

<div id="layer4" onclick="onTop(this.id);">
This is layer 4<img height="87" width="112" src="

http://www.festifood.nl/citroen.jpg"></div>

</body>
</html>

=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff

http://www.jeffemminger.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to change z-index with event handler?

kippie

Technical User

jemminger

Programmer

Similar threads

Part and Inventory Search

Sponsor