Overlapping Layers Of A Document

Javascript Tricks

Overlapping layers of a document:

Overlapping layers of a document, only one is displayed at a time.

 
 <script>
 
 // showlayer functions done with brute force
 // (could use an array of these things to simplify 
 // the code).
 
 function showlayer1() {
   document.getElementById("layer1").style.display="block";
   document.getElementById("layer2").style.display="none";
   document.getElementById("layer3").style.display="none";
 }
 
 function showlayer2() {
   document.getElementById("layer1").style.display="none";
   document.getElementById("layer2").style.display="block";
   document.getElementById("layer3").style.display="none";
 }
 
 
 function showlayer3() {
   document.getElementById("layer1").style.display="none";
   document.getElementById("layer2").style.display="none";
   document.getElementById("layer3").style.display="block";
 }
 </script>
 
 <div id="layer1" style="color:green; display:none; position:absolute;top:1in;">
 
   <p style="text-align:center; font-size:20pt">Layer 1 is the best layer<br/>
   </p>
 
   <p style="margin-left:.5in; margin-right:1.0in">
     It is possible to overlap layers of a document, where only one is dispalyed at a time. Right now you are looking at Layer 1 content.
   </p>
 </div>
 
 <div id="layer2" style="display:none; color:blue; position:absolute; top:1in; font-family:fixed;">
 
   <p style="text-align:center; font-size:20pt"> Layer 2 is lame!<br />
   </p>
 
   <p style="margin-left:.5in; margin-right:1.0in">
     It is possible to overlap layers of a document, where only one is dispalyed at a time. Right now you are looking at Layer 2 content.
    </p> 
 </div>
 
 <div id="layer3" style="display:none; color:black; position:absolute; top:1in; font-family:TimesRoman;">
 
   <p style="text-align:center; font-size:20pt">Layer 3: The King of layers <br />
   </p>
 
   <p style="margin-left:.5in; margin-right:1.0in">
     It is possible to overlap layers of a document, where only one is dispalyed at a time. Right now you are looking at Layer 3 content.
    </p>
 </div>
 
 <!-- the next few lines just leave blank space in the document that will
 get filled when a layer/div is turned on -->
 
 <p style="height:4in"> </p>
 
 <div style="text-align: center">
 <form name="frm">
 <input type="button" name="l1" value="layer1" onclick="showlayer1()" />
 <input type="button" name="l2" value="layer2" onclick="showlayer2()" />
 <input type="button" name="l3" value="layer3" onclick="showlayer3()" />
 </form>
 <hr/>
 <p>press a button to see that layer</p>
 </div>