HTML and CSS Reference
In-Depth Information
EXAMPLE
14.31
<html>
<head><title>layers</title>
<script type="text/javascript">
1
function moveUp(id)
{
2
var box= document.getElementById(id);
3
if(box.style.zIndex == 100){
//
Can't stack higher than 100
4
box.style.zIndex=2;
}
5
else if(box.style.zIndex != 3){
box.style.zIndex=100;
}
else{
6
box.style.zIndex=0;
}
}
</script>
</head>
<body bgcolor=lightgreen>
7
<span id="red" style="position: absolute;z-index:0;
background-color:red; width:200; height:250;
top:50px; left:160px;"
8
onClick="moveUp(id);"
></span>
9
<span id="yellow" style="position: absolute;z-index:1;
background-color:yellow; width:90; height:300;
top:20px; left:210px;"
onClick="moveUp(id);
"></span>
10
<span id="blue" style="position: absolute;z-index:2;
background-color:blue; width:250; height:100;
top:125px; left:134px;"
onClick="moveUp(id);
"></span>
11
<span id="white" style="position: absolute;z-index:3;
background-color:white; width:50; height:50;
top:140px; left:230px;"
onClick="moveUp(id);
"></span>
</body>
</html>
EXPLANATION
1
The JavaScript user-defined function called
moveUp()
is defined. It has one pa-
rameter, the
id
of the tag from where it was called.
2
The
getElementById()
method returns a reference to the object that called this
function and assigns it to the variable called
box
.
Continues
