Swapping Layers

Two methods of swapping layers.

Swapping 1

This example shows how to simply swap one layer for another using the css display property, as one layer is shown the previous layer is hidden.
The id of the layer to be displayed is passed to the function and the previous layer is atomatically hidden.

Layer 1 Layer 2 Layer 3 Layer 4

This first layer is transparent with no background colour or border.

<script type="text/javascript">

var lastID="yourID_One"

function swapLayer(id){

if(id!=lastID){
document.getElementById(id).style.display="block"

if(lastID!=""){
document.getElementById(lastID).style.display="none"
}

}

lastID=id
}

</script>

<DIV style="position:absolute; left:270; top:115; width:350px; height:260px">

<div id="yourID_One" style="display:block">Layer 1 Contents</div>
<div id="yourID_Two" style="display:none">Layer 2 Contents</div>
<div id="yourID_Three" style="display:none">Layer 3 Contents</div>
<div id="yourID_Four" style="display:none">Layer 4 Contents</div>

</DIV>

<a href="#null" onclick="swapLayer('yourID_One')">Layer 1</a>
<a href="#null" onclick="swapLayer('yourID_Two')">Layer 2</a>
<a href="#null" onclick="swapLayer('yourID_Three')">Layer 3</a>
<a href="#null" onclick="swapLayer('yourID_Four')">Layer 4</a>

Swapping 2

Similar to the above example except this one uses the while statement to iterate through the appropriate layers hiding all but the selected layer.
All the layers are given the same id plus an ordinal number starting from zero. Only the ordinal number needs to be passed to the function to display the chosen layer

Show Green Show Yellow Show Red Show Blue

<script type="text/javascript">

function swapLyr(num) {
idCount=0

while(document.getElementById("mydiv"+idCount)){
el=document.getElementById("mydiv"+idCount)

if(idCount != num){
el.style.display="none"
}
else{
el.style.display="block"
}

idCount++

}

}

</script>

<a href="#null" onclick="swapLyr(0)">Show Green</a> <a href="#null" onclick="swapLyr(1)">Show Yellow</a> 
<a href="#null" onclick="swapLyr(2)">Show Red</a> <a href="#null" onclick="swapLyr(3)">Show Blue</a>

<div id="mydiv0" style="display:none;background-color:#00AA00;width:350px; height:260px">Green</div>
<div id="mydiv1" style="display:none;background-color:#AAAA00;width:350px; height:260px">Yellow</div>
<div id="mydiv2" style="display:none;background-color:#AA0000;width:350px; height:260px">Red</div>
<div id="mydiv3" style="display:none;background-color:#0000AA;width:350px; height:260px">Blue</div>