 |
 |
||
|
||
|
Sponsored by:
| Dynamic Layering Techniques
Source Code for Dynamic Layering DemosDemo #1: Dynamic Layering using the <DIV> tag<HTML>
<HEAD>
<STYLE TYPE="text/css">
.layer1 { z-index: 1;
font-size: 12px; }
.layer2 { z-index: 2;
font-size: 16px;
color:red; }
.layer3 { z-index: 3;
font-size: 20px;
color:brown;}
.layer4 { z-index: 4;
font-size: 24px;
color:green; }
.layer5 { z-index: 5;
font-size: 28px;
color:blue; }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
browser = navigator.appName;
version = navigator.appVersion;
var ie4 = (browser.indexOf("Explorer") >= 0) && (version.indexOf('4.0') >=0 );
function loadup(){
if (ie4 == true){
ielayer = document.all.tags("DIV");
lay = new Array()
lay[0] = ielayer[0].style;
lay[1] = ielayer[1].style;
lay[2] = ielayer[2].style;
lay[3] = ielayer[3].style;
lay[4] = ielayer[4].style;
for (i=0; i< lay.length; i++) {
lay[i].display="none";
}
setTimeout("dolayers()", 2000);
}
}
function dolayers() {
for (i=0; i< lay.length; i++) {
lay[i].display="block"
if (i==4){
alert("That's all Folks!")
}
else
alert("show next layer")
}
}
</SCRIPT>
</HEAD>
<BODY onload="loadup()">
<DIV ID=div1 CLASS="layer1">I'm a layer!</DIV>
<DIV ID=div2 CLASS="layer2">I'm a layer</DIV>
<DIV ID=div3 CLASS="layer3">I'm a layer</DIV>
<DIV ID=div4 CLASS="layer4">I'm a layer</DIV>
<DIV ID=div5 CLASS="layer5">I'm a layer</DIV>
</BODY>
</HTML>
Demo #2: Dynamic Layering using the <LAYER> Tag<HTML>
<HEAD>
<STYLE TYPE="text/css">
.layer1 { z-index: 5;
font-size: 12px;
position:absolute;
top:10;
left:70; }
.layer2 { z-index: 4;
font-size: 16px;
color:red;
position:absolute;
top:20;
left:60; }
.layer3 { z-index: 3;
font-size: 20px;
color:brown;
position:absolute;
top:30;
left:40; }
.layer4 { z-index: 2;
font-size: 24px;
color:green;
position:absolute;
top:40;
left:20; }
.layer5 { z-index: 1;
font-size: 28px;
color:blue;
position:absolute;
top:50;
left:10; }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function loadup(){
lay = document.layers;
for (i=0; i< lay.length; i++) {
lay[i].visibility="show"
lay[i].moveTo(200, 110)
if (i==4){
alert("That's all Folks!")
}
else
alert("show next layer")
}
}
</SCRIPT>
</HEAD>
<BODY onload="loadup()">
<LAYER CLASS="layer1" visibility="hide">I'm a layer!</LAYER>
<LAYER CLASS="layer2" visibility="hide">I'm a layer</LAYER>
<LAYER CLASS="layer3" visibility="hide">I'm a layer</LAYER>
<LAYER CLASS="layer4" visibility="hide">I'm a layer</LAYER>
<LAYER CLASS="layer5" visibility="hide">I'm a layer</LAYER>
</BODY>
</HTML>
Source Code for Dynamic Layering Demos
|
|
|
|