Accessing Layers with JavaScript

Accessing Layers with JavaScript : Layer : HTML JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » HTML » Layer »

Accessing Layers with JavaScript




/*
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: green;
    height: 100;
    left: 10;
    position: absolute;
    top: 50;
    width: 100;
    }
  -->
  </style>
  <script type="text/javascript" language="JavaScript1.2">
  <!--
    // Create global variables for browser type
    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){
        layer = ".all";
        style = ".style";
      }else if(navigator.userAgent.indexOf("Nav") != -1){
        layer = ".layers";
        style = "";
      }
    }
   
    // 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">
    DIV 1
  </div>
  <form name="form1">
    <input type="button" value="Hide"Image from book 
           onclick="changeState('layer1','hidden')">
    <input type="button" value="Show"Image from book 
           onclick="changeState('layer1','visible')">
  <form>
</body>
</html>