The layer while rolling over the link.

The layer while rolling over the link. : Layer : HTML JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » HTML » Layer »

The layer while rolling over the link.




/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke 

ISBN: 067231763X
Publisher Sams CopyRight 2000

*/
<html>
<head>
  <title>JavaScript Unleashed</title>
  <style type="text/css">
  <!--
    #layer1{
      background-color: red;
      height: 100;
      left: 10;
      position: absolute;
      top: 50;
      width: 100;
      visibility: hidden;
    }
  -->

  </style>
  <script type="text/javascript" language="JavaScript1.2">
  <!--
    // Create global variables for browser type
    var isIE = new Boolean(false);
    var isNav = new Boolean(false);
    var unSupported = new Boolean(false);
    var layer = new String();
    var style = new String();
   
    // Determine if the browser is Internet Explorer, Navigator,
    // or other. Also, set the layer variable depending on the
    // type of access it needs.
    function checkBrowser(){
      if(navigator.userAgent.indexOf("MSIE") != -1){
        isIE = true;
        layer = ".all";
        style = ".style";
      }else if(navigator.userAgent.indexOf("Nav") != -1){
        isNav = true;
        layer = ".layers";
        style = "";
      }else{
        unSupported = true;
      }
    }
   
    // Take the state passed in, and change it.
    function changeState(layerRef, state){
      eval("document" + layer + "['" + layerRef + "']"  + style + ".visibility = '" + state + "'");
    }
  //-->
  </script>
</head>
<body onload="checkBrowser()">
  <div name="layer1" id="layer1">
    Hello World!
  </div>
  <a href="javascript:void(0)"
     onmouseout="changeState('layer1','hidden')"
     onmouseover="changeState('layer1','visible')">

    Rollover to show and hide the layer.
  </a>
</body>
</html>