Displaying code from Chapter Seven, page 205

============= The Source Code Follows =============

<html>
   <head>
      <style>
        .SWITCH {
        font-family: verdana, helvetica, sans-serif;
        color: navy;
        background-color: yellow;
        font-size: 36pt;
        }

        .OVER {
        font-family: verdana, helvetica, sans-serif;
        color: yellow;
        background-color: navy;
        font-size: 40pt;
        }
      </style>
      <script language="javascript">
        function Highlight(id) {
             document.getElementById("menua").style.visibility = "hidden";
           document.getElementById("menu" + id + "b").style.visibility = "visible";
        }

        function UnHighlight(id) {
           document.getElementById("menu" + id + "b").style.visibility = "hidden";
           document.getElementById("menua").style.visibility = "visible";         
        }

      </script>
   </head>
   <body>
      <div id="menua" style="top: 5; left: 5; 
      visibility: visible; position: absolute; z-index: 5;">

      <p class="SWITCH">
         <a href="#" 
            onMouseOver="Highlight(0)"
            onMouseOut="UnHighlight(0)">One</a> 
         <a href="#"
            onMouseOver="Highlight(1)"
            onMouseOut="UnHighlight(1)">Two</a> 
         <a href="#"
            onMouseOver="Highlight(2)"
            onMouseOut="UnHighlight(2)">Three</a> 
      </div>

      <div id="menu0b" style="top: 5; left: 5; 
      visibility: hidden; position: absolute; z-index: 5;">

      <p class="SWITCH">
         <a href="#"><span class="OVER">One</span></a>
         <a href="#">Two</a> 
         <a href="#">Three</a>  
      </div>

      <div id="menu1b" style="top: 5; left: 5; 
      visibility: hidden; position: absolute; z-index: 5;">

      <p class="SWITCH">
         <a href="#">One</a> 
         <a href="#"><span class="OVER">Two</span></a> 
         <a href="#">Three</a> 
      </div>

      <div id="menu2b" style="top: 5; left: 5; 
      visibility: hidden; position: absolute; z-index: 5">

      <p class="SWITCH">
         <a href="#">One</a> 
         <a href="#">Two</a>
         <a href="#"><span class="OVER">Three</span></a>
      </div>

   </body>
</html>

============= © Chris Bates === Created on Monday, 22nd March, at 21:23 =============