<HTML>
<HEAD>
        <TITLE>Dynamic HTML WebTechniques</TITLE>
        <STYLE TYPE="text/css">
<!--
#grid {position: absolute;
top: 0px;
left: 0px;
z-index: 1}
#form {position: absolute;
top 20px;
left: 20px}
#blueBox { position: absolute;
top: 1in;
left: 2in;
visibility: visible}
#redBox { position: absolute;
top: 1in;
left: 2in;
visibility: hidden;}
-->
</STYLE>
<SCRIPT = "JavaScript1.2">
function showRedBox() {
        document.layers["redBox"].visibility = "visible";
                document.layers ["blueBox"].visibility = "hidden";
        }
                function showBlueBox() {
        document.layers["blueBox"].visibility = "visible";
                document.layers["redBox"].visibility = "hidden";
        }

</SCRIPT>       
</HEAD>
<BODY>
<P>Click on the appropriate button to make a box appear.</P>

<DIV ID="blueBox">
<IMG SRC="Images/Blue100x100.gif" WIDTH=100 HEIGHT=100 
BORDER=0>
</DIV>
<DIV ID="redBox">
<IMG SRC="Images/Red100x100.gif" WIDTH=100 HEIGHT=100 
BORDER=0>  
</DIV><SPAN ID=form>
<FORM NAME="boxForm">
   <INPUT TYPE="button" VALUE="Show The Red Box" 
onClick='showRedBox("redBox")'>
 <INPUT TYPE="button" VALUE="Show The Blue Box" 
onClick='showBlueBox("blueBox")'>
</FORM></SPAN>
</BODY>
</HTML>