PDA

View Full Version : How to change z-index with event handler?

kippie
05-17-2003, 09:37 AM
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"><!--
#layer { position: absolute; top: 31px; left: 168px; width: 100px; height: 100px; z-index: 1; visibility: visible }
#layer2 { position: absolute; top: 90px; left: 234px; width: 100px; height: 165px; z-index: 2; visibility: visible }
#layer3 { position: absolute; top: 74px; left: 159px; width: 100px; height: 153px; z-index: 3; visibility: visible }
#layer4 { position: absolute; top: 45px; left: 215px; width: 112px; height: 106px; z-index: 4; visibility: visible }-->
</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
Mr J
05-17-2003, 10:08 AM
Please try the following:


<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css"><!--
#layer { position: absolute; top: 31px; left: 168px; width: 100px; height: 100px; z-index: 1; visibility: visible }
#layer2 { position: absolute; top: 90px; left: 234px; width: 100px; height: 165px; z-index: 2; visibility: visible }
#layer3 { position: absolute; top: 74px; left: 159px; width: 100px; height: 153px; z-index: 3; visibility: visible }
#layer4 { position: absolute; top: 45px; left: 215px; width: 112px; height: 106px; z-index: 4; visibility: visible }-->
</style>

<script language="Javascript">
<!--
last_z=""
function which_z(n){
document.getElementById(n).style.zIndex=6
if(last_z==""){
last_z=n
}
else{
document.getElementById(last_z).style.zIndex=""
}
last_z=n
}
// -->
</script>
</head>
<body>
<div id="layer" onclick="which_z(this.id)">This is layer 1
<img height="74" width="83" src="http://www.festifood.nl/aardbei.jpg"></div>
<div id="layer2" onclick="which_z(this.id)">
This is layer 2<img height="140" width="100" src="http://www.festifood.nl/pepperkleinopt.jpg"></div>
<div id="layer3" onclick="which_z(this.id)">
This is layer 3<img height="102" width="90" src="http://www.festifood.nl/appel.jpg"></div>
<div id="layer4" onclick="which_z(this.id)">
This is layer 4<img height="87" width="112" src="http://www.festifood.nl/citroen.jpg"></div>



</body>
</html>
kippie
05-17-2003, 11:25 AM
Great!!!

Thanks Mr. J

kippie