<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/>
     <a href="http://www.slashdot.org"><img src="slashdot.gif" border="0" /></a>
  </p>

  <p style="margin-left:.5in; margin-right:1.0in">
     layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1
     layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1
     layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1
     layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1 layer 1
  </p>
</div>

<div id="layer2" style="display:none; color:red; position:absolute; top:1in; font-family:fixed;">

  <p style="text-align:center; font-size:20pt"> Layer 2 rules!<br />
  <a href="http://www.plastic.com"><img src="plastic.gif" border="0"/></a>
  </p>

  <p style="margin-left:.5in; margin-right:1.0in">
     layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2
     layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2
     layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2
     layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2 layer 2
   </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 />
   <a href="http://www.onion.com"><img src="onion.gif" border="0" /></a>
  </p>

  <p style="margin-left:.5in; margin-right:1.0in">
     layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3
     layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3
     layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3
     layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3 layer 3
   </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>