JavaScript DHTML/HTML/Layer

Материал из Web эксперт
Перейти к: навигация, поиск

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>



Adjusting Layer clip Properties (W3C)

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>Layer Clip</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var origLayerWidth = 0
var origLayerHeight = 0
var currTop, currRight, currBottom, currLeft
function init() {
    origLayerWidth = parseInt(document.getElementById("display").style.width)
    origLayerHeight = parseInt(document.getElementById("display").style.height)
    currTop = 0
    currRight = origLayerWidth
    currBottom = origLayerHeight
    currLeft = 0
    showValues()
}
function setClip(field) {
    var val = parseInt(field.value)
    switch (field.name) {
        case "top" :
            currTop = val
break
        case "right" :
            currRight = val
            break
        case "bottom" :
            currBottom = val
            break
        case "left" :
            currLeft = val
            break
        case "width" :
            currRight = currLeft + val
            break
        case "height" :
            currBottom = currTop + val
            break
    }
    adjustClip()
    showValues()
}
function adjustClip() {
    document.getElementById("display").style.clip = "rect(" + currTop + "px " +
    currRight + "px " + currBottom + "px " + currLeft + "px)"
}
function showValues() {
    var form = document.forms[0]
    form.top.value = currTop
    form.right.value = currRight
    form.bottom.value = currBottom
    form.left.value = currLeft
    form.width.value = currRight - currLeft
    form.height.value = currBottom - currTop
}
var intervalID
function revealClip() {
    var midWidth = Math.round(origLayerWidth /2)
    var midHeight = Math.round(origLayerHeight /2)
    currTop = midHeight
    currBottom = midHeight
    currRight = midWidth
    currLeft = midWidth
    intervalID = setInterval("stepClip()",1)
}
function stepClip() {
    var widthDone = false
    var heightDone = false
    if (currLeft > 0) {
        currLeft += -2
        currRight += 2
    } else {
        widthDone = true
    }
    if (currTop > 0) {
        currTop += -1
        currBottom += 1
    } else {
        heightDone = true
    }
    adjustClip()
    showValues()
    if (widthDone && heightDone) {
        clearInterval(intervalID)
    }
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Layer Clipping Properties (W3C)</H1>
<HR>
Enter new clipping values to adjust the visible area of the layer.<P>
<DIV STYLE="position:absolute; top:130">
<FORM>
<TABLE>
<TR>
    <TD ALIGN="right">layer.style.clip (left):</TD>
    <TD><INPUT TYPE="text" NAME="left" SIZE=3 onChange="setClip(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right">layer.style.clip (top):</TD>
    <TD><INPUT TYPE="text" NAME="top" SIZE=3 onChange="setClip(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right">layer.style.clip (right):</TD>
    <TD><INPUT TYPE="text" NAME="right" SIZE=3 onChange="setClip(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right">layer.style.clip (bottom):</TD>
    <TD><INPUT TYPE="text" NAME="bottom" SIZE=3 onChange="setClip(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right">layer.style.clip (width):</TD>
    <TD><INPUT TYPE="text" NAME="width" SIZE=3 onChange="setClip(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right">layer.style.clip (height):</TD>
    <TD><INPUT TYPE="text" NAME="height" SIZE=3 onChange="setClip(this)"></TD>
</TR>
</TABLE>
<INPUT TYPE="button" VALUE="Reveal Original Layer" onClick="revealClip()">
</FORM>
</DIV>
<DIV ID="display" STYLE="position:absolute; top:130; left:220; width:360;
 height:180; clip:rect(0px 360px 180px 0px); background-color:coral">
<H2>ARTICLE I</H2>
<P>
Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or
 abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the
 government for a redress of grievances.
</P>
</DIV>
</BODY>
</HTML>



Comparison of Layer and Clip Location Properties (W3C)

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>Layer vs. Clip</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var currClipTop = 0
var currClipLeft = 0
var currClipRight = 360
var currClipBottom = 180
function setClip(field) {
    var val = parseInt(field.value)
    switch (field.name) {
        case "clipBottom" :
            currClipBottom = val
            break
        case "clipRight" :
            currClipRight = val
            break
    }
    adjustClip()
    showValues()
}
function adjustClip() {
    document.getElementById("display").style.clip = "rect(" + currClipTop + 
    "px " + currClipRight + "px " + currClipBottom + "px " + currClipLeft + 
    "px)"
}
function setLayer(field) {
    var val = parseInt(field.value)
    switch (field.name) {
        case "width" :
            document.getElementById("display").style.width = val + "px"
            break
        case "height" :
            document.getElementById("display").style.height = val + "px"
            break
    }
    showValues()
}
function showValues() {
    var form = document.forms[0]
    var elem = document.getElementById("display")
    var clipRect = getClipRect(elem)
    form.width.value = parseInt(elem.style.width)
    form.height.value = parseInt(elem.style.height)
    form.clipRight.value = clipRect.right
    form.clipBottom.value = clipRect.bottom
}
// convert clip property string to an object
function getClipRect(elem) {
    var clipString = elem.style.clip
    // assumes "rect(npx, npx, npx, npx)" form
    // get rid of "rect("
    clipString = clipString.replace(/rect\(/,"")
    // get rid of "px)"
    clipString = clipString.replace(/px\)/,"")
    // get rid of remaining "px" strings
    clipString = clipString.replace(/px/g,",")
    // turn remaining string into an array
    clipArray = clipString.split(",")
    // make object out of array values
var clipRect = {top:parseInt(clipArray[0]), right:parseInt(clipArray[1]), 
    bottom:parseInt(clipArray[2]), left:parseInt(clipArray[3])}
    return clipRect
}
</SCRIPT>
</HEAD>
<BODY onLoad="showValues()">
<H1>Layer vs. Clip Dimension Properties (W3C)</H1>
<HR>
Enter new layer and clipping values to adjust the layer.<P>
<DIV STYLE="position:absolute; top:130">
<FORM>
<TABLE>
<TR>
    <TD ALIGN="right">layer.style.width:</TD>
    <TD><INPUT TYPE="text" NAME="width" SIZE=3 onChange="setLayer(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right">layer.style.height:</TD>
    <TD><INPUT TYPE="text" NAME="height" SIZE=3 onChange="setLayer(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right">layer.style.clip (right):</TD>
    <TD><INPUT TYPE="text" NAME="clipRight" SIZE=3 onChange="setClip(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right">layer.style.clip (bottom):</TD>
    <TD><INPUT TYPE="text" NAME="clipBottom" SIZE=3 onChange="setClip(this)"></TD>
</TR>
</TABLE>
</FORM>
</DIV>
<DIV ID="display" STYLE="position:absolute; top:130; left:250; width:360; 
height:180; clip:rect(0px, 360px, 180px, 0px); background-color:coral">
<H2>ARTICLE I</H2>
<P>
Congress shall make no law respecting an establishment of religion, or 
prohibiting the free exercise thereof; or abridging the freedom of speech, or of 
the press; or the right of the people peaceably to assemble, and to petition the 
government for a redress of grievances.
</P>
</DIV>
</BODY>
</HTML>



Detecting Navigator and Internet Explorer

/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke 
ISBN: 067231763X
Publisher Sams CopyRight 2000
*/
<html>
<body>
   
<script language="JavaScript">
<!--
   
//Create a layer tag if netscape
if(navigator.appName.indexOf("Netscape") != -1)
  document.write("<layer id="redBox" ");
   
//Create a div tag if Microsoft
if(navigator.appName.indexOf("Microsoft") != -1)
  document.write("<div id="redBox" ");
   
//Set the style used for the red box
document.write("style="position:absolute; ");
document.write("left:150px; ");
document.write("top:150px; ");
document.write("background-color:red;">");
   
//-->
</script>
   
   
This is a block of moving buttons
<form>
<input type="button"
       value="UP"
       onClick="moveUp()">
<input type="button"
       value="DOWN"
       onCLick="moveDown()">
<input type="button"
       value="LEFT"
       onClick="moveLeft()">
<input type="button"
       value="RIGHT"
       onClick="moveRight()"><BR>
<input type="button"
       value="SHOW/HIDE Text Box"
       onClick="showHide()">
</form>
   
<script language="JavaScript">
<!--
//If Netscape close the layer tag
if(navigator.appName.indexOf("Netscape") != -1)
  document.write("</layer>");
   
//If Microsoft close div tag
if(navigator.appName.indexOf("Microsoft") != -1)
  document.write("</div>");
//-->
</script>
   
<script language="JavaScript">
<!--
//If Netscape create a text layer using layer tag
if(navigator.appName.indexOf("Netscape") != -1)
{
  document.write("<layer id="textBox" >");
  document.write("Here is some text defined as a block");
  document.write("</layer>");
}
   
//If Microsoft create a text block using div tag
if(navigator.appName.indexOf("Microsoft") != -1)
{
  document.write("</div>");
  document.write("<div id="textBox">");
  document.write("Here is some text defined as a block");
  document.write("</div>");
}
//-->
</script>
   
   
<script language="JavaScript">
<!--
   
var isNetscape = 0;
var isMicrosoft = 0;
   
//Determine if this is a Netscape or Microsoft browser
if(navigator.appName.indexOf("Netscape") != -1)
  isNetscape = 1;
if(navigator.appName.indexOf("Microsoft") != -1)
  isMicrosoft = 1;
   
//Move the red box up 20 pixels
function moveUp()
{
  if(isNetscape)
    document.layers.redBox.pageY+=(-20);
  if(isMicrosoft)
    document.all.redBox.style.pixelTop+=(-20);
}
   
//Move the red box down 20 pixels
function moveDown()
{
  if(isNetscape)
    document.layers.redBox.pageY+=20;
  if(isMicrosoft)
    document.all.redBox.style.pixelTop+=20;
}
   
//Move the red box to the left 20 pixels
function moveLeft()
{
  if(isNetscape)
    document.layers.redBox.pageX+=(-20);
  if(isMicrosoft)
    document.all.redBox.style.pixelLeft+=(-20);
}
   
//Move the red box to the right 20 pixels.
function moveRight()
{
  if(isNetscape)
    document.layers.redBox.pageX+=20;
  if(isMicrosoft)
    document.all.redBox.style.pixelLeft+=20;
}
   
//Hide or show the text box
function showHide()
{
  if(isNetscape)
  {
    //If text box is currently hidden then make it visible
    if(document.layers.textBox.visibility == "hide")
      document.layers.textBox.visibility="inherit";
    else
      document.layers.textBox.visibility="hide";
  }
  if(isMicrosoft)
  {
    //If text box is currently hidden then make it visible
    if(document.all.textBox.style.visibility == "hidden")
      document.all.textBox.style.visibility="visible";
    else
      document.all.textBox.style.visibility="hidden";
  }
}
   
//-->
</script>
   
</body>
</html>



Dragging a Layer (W3C)

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>Layer Dragging</TITLE>
<STYLE TYPE="text/css">
.draggable {cursor:hand}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var engaged = false
var offsetX = 0
var offsetY = 0
function dragIt(evt) {
    evt = (evt) ? evt : (window.event) ? window.event : ""
    var targElem = (evt.target) ? evt.target : evt.srcElement
    if (engaged) {
        if (targElem.className == "draggable") {
            while (targElem.id != "myLayer" && targElem.parentNode) {
                targElem = targElem.parentNode
            }
            if (evt.pageX) {
                targElem.style.left = evt.pageX - offsetX + "px"
                targElem.style.top = evt.pageY - offsetY + "px"
            } else {
                targElem.style.left = evt.clientX - offsetX + "px"
                targElem.style.top = evt.clientY - offsetY + "px"
            }
return false
        }
    }
}
function engage(evt) {
    evt = (evt) ? evt : (window.event) ? window.event : ""
    var targElem = (evt.target) ? evt.target : evt.srcElement
    if (targElem.className == "draggable") {
        while (targElem.id != "myLayer" && targElem.parentNode) {
            targElem = targElem.parentNode
        }
        if (targElem.id == "myLayer") {
            engaged = true
            if (evt.pageX) {
                offsetX = evt.pageX - targElem.offsetLeft
                offsetY = evt.pageY - targElem.offsetTop        
            } else {
                offsetX = evt.offsetX - document.body.scrollLeft
                offsetY = evt.offsetY - document.body.scrollTop
                if (navigator.userAgent.indexOf("Win") == -1) {
                    offsetX += document.body.scrollLeft
                    offsetY += document.body.scrollTop
                   }
    
            }
            return false
        }
    }
}
function release(evt) {
    evt = (evt) ? evt : (window.event) ? window.event : ""
    var targElem = (evt.target) ? evt.target : evt.srcElement
    if (targElem.className == "draggable") {
        while (targElem.id != "myLayer" && targElem.parentNode) {
            targElem = targElem.parentNode
        }
        if (engaged && targElem.id == "myLayer") {
            engaged = false
        }
    }
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Dragging a Layer</H1>
<HR>
<DIV ID="myLayer" CLASS="draggable" STYLE="position:absolute; top:90; left:100;
 width:300; height:190; background-color:lightgreen">
    <SPAN CLASS="draggable"><B>Drag me around the window.</B></SPAN>
</LAYER>
<SCRIPT LANGUAGE="JavaScript">
document.onmousedown = engage
document.onmouseup = release
document.onmousemove = dragIt
document.onmouseout = release
</SCRIPT>
</BODY>
</HTML>



Hide and show layer

 
/*
JavaScript Application Cookbook
By Jerry Bradenbaugh
Publisher: O"Reilly 
Series: Cookbooks
ISBN: 1-56592-577-7
*/ 
<HTML>
<HEAD>
<TITLE>dhtml.js example</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
// dhtml.js
// Set browser-determined global variables
var NN      = (document.layers ? true : false);
var hideName = (NN ? "hide" : "hidden");
var showName = (NN ? "show" : "visible");
var zIdx    = -1;
function genLayer(sName, sLeft, sTop, sWdh, sHgt, sVis, copy) {
  if (NN) {
    document.writeln("<LAYER NAME="" + sName + "" LEFT=" + sLeft + " TOP=" + sTop + 
    " WIDTH=" + sWdh + " HEIGHT=" + sHgt + " VISIBILITY="" + sVis + """ + 
    " z-Index=" + zIdx + ">" + copy + "</LAYER>");
    }
  else {
    document.writeln("<DIV ID="" + sName + "" STYLE="position:absolute; overflow:none; left:" + 
      sLeft + "px; top:" + sTop + "px; width:" + sWdh + "px; height:" + sHgt + "px;" + 
      " visibility:" + sVis + "; z-Index=" + (++zIdx) + "">" + 
      copy + "</DIV>"
      );
    }
  }
// Define a function to hide layers
function hideSlide(name) {
  refSlide(name).visibility = hideName;
  }
// Define a function to reveal layers
function showSlide(name) {
  refSlide(name).visibility = showName;
  }
// Define a central function to reference layers
function refSlide(name) {
  if (NN) { return document.layers[name]; }
  else { return eval("document.all." + name + ".style"); }
  }

</SCRIPT>
</HEAD>
<BODY>
[<A HREF="javascript: hideSlide("myLayer");">Hide</A>] 
[<A HREF="javascript: showSlide("myLayer");">Show</A>] 
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
genLayer("myLayer", 10, 75, 300, 300, showName, "<BODY BGCOLOR=RED><BR><BR><CENTER><H3>This is a stylesheet. Ain\"t it grand?!</H3></BODY>");
//-->
</SCRIPT>
</BODY>
</HTML>



"layer" and "ilayer" Tag Properties

Property           Description
above             A Layer object higher in z-order of all layers in the document (null if the layer is topmost).
background        The URL of an image to use as the background for the layer.
below             A Layer object lower in z-order of all layers in the document (null if the layer is lowest).
bgcolor           The background color for the layer.
clip              Defines the clipping rectangle. Anything outside of this rectangle is clipped from view.
height            The height in pixels of the layer.
left              The x-axis position in pixels of the layer, relative to the origin of its parent layer.
name              The name of the layer.
src               The URL for the layer"s content source.
top               The y-axis position in pixels of the layer, relative to the origin of its parent layer.
visibility        Defines the layer"s visibility attributes. 
width             The width in pixels of the layer.
z-index           The relative z-order of the layer, relative to its siblings and parent.



Layer Background Colors (W3C)

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function setColor(evt) {
    evt = (evt) ? evt : (window.event) ? window.event : ""
    if (evt) {
        var elem = (evt.target) ? evt.target : evt.srcElement
        if (elem.className == "palette") {
            document.getElementById("display").style.backgroundColor = elem.style.backgroundColor
        }
    }
}
document.onmouseover = setColor
</SCRIPT>
</HEAD>
<BODY>
<H1>Layer Background Colors (W3C)</H1>
<HR>
<SCRIPT LANGUAGE="JavaScript">
var oneLayer
var colorTop = 100
var colorLeft = 20
var colorWidth = 40
var colorHeight = 40
var colorPalette = new Array("aquamarine","coral","forestgreen",
                   "goldenrod","red","magenta","navy","teal")
for (var i = 0; i < colorPalette.length; i++) {
    oneLayer = "<DIV ID="swatch" + i + "" CLASS="palette""
    oneLayer += "STYLE="position:absolute; top:" + colorTop + ";"
    oneLayer += "left:" + ((colorWidth * i) + colorLeft) + ";"
    oneLayer += "width:" + colorWidth + "; height:" + colorHeight + ";"
    oneLayer += "background-color:" + colorPalette[i] + ""></DIV>\n"
    document.write(oneLayer)
}
</SCRIPT>
<DIV ID="display" STYLE="position:absolute; top:150; left:80; width:200; height:200; background-color:gray">
<SPAN STYLE="font-weight:bold; color:white; text-align:center">
Some reversed text to test against background colors.</SPAN>
</DIV>
</BODY>
</HTML>



Layer seek

 
// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
    var theObj;
    for (var i = 0; i < doc.layers.length; i++) {
        if (doc.layers[i].name == name) {
            theObj = doc.layers[i];
            break;
        }
        // dive into nested layers if necessary
        if (doc.layers[i].document.layers.length > 0) {
            theObj = seekLayer(document.layers[i].document, name);
        }
    }
    return theObj;
}
// Convert object name string or object reference
// into a valid element object reference
function getRawObject(obj) {
    var theObj;
    if (typeof obj == "string") {
        if (isW3C) {
            theObj = document.getElementById(obj);
        } else if (isIE4) {
            theObj = document.all(obj);
        } else if (isNN4) {
            theObj = seekLayer(document, obj);
        }
    } else {
        // pass through object reference
        theObj = obj;
    }
    return theObj;
}



Layer "srcFilter" Example

    
<html>
<head>
<script language="JavaScript">
function function1() {
myLayer.filters[0].Apply();
    if (myLayer.style.visibility == "visible") {
        myLayer.style.visibility = "hidden";
        myLayer.filters.revealTrans.transition = 2;
    } else {
        myLayer.style.visibility = "visible";
        myLayer.filters[0].revealTrans.transition = 3;
    }
    myLayer.filters[0].Play();
    var m = window.event.srcFilter;
    alert(m); 
}
</script>
</head>
<body bottommargin="150">
<div id="myLayer" style="position:absolute; visibility:visible; 
     Filter:revealTrans(duration=2, transition=3); left:92px; top:257px; width:100px; background-color:#FFFF99;"> 
    <img src="http://www.wbex.ru/style/logo.png" width="99" height="75">
</div>
<input type="button" id="myButton" onClick="function1();" value="Play Transition"> 
</body>
</html>



Methods and Properties of the Layer Object

/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke 
ISBN: 067231763X
Publisher Sams CopyRight 2000

+---------+----------------+-------------------------------------------------+
  Type       Item             Description
+---------+----------------+-------------------------------------------------+
  Method
+---------+----------------+-------------------------------------------------+
           captureEvents()   Specifies the event types to capture.
+---------+----------------+-------------------------------------------------+
           handleEvent()     Invokes handler for specified event.
+---------+----------------+-------------------------------------------------+
           load()            Loads a new URL.
+---------+----------------+-------------------------------------------------+
           moveAbove()       Moves the layer above another layer.
+---------+----------------+-------------------------------------------------+
           moveBelow()       Moves the layer below another layer.
+---------+----------------+-------------------------------------------------+
           moveBy()          Moves the layer to a specified position.
+---------+----------------+-------------------------------------------------+
           moveTo()          Moves the top-left corner of the window to the 
                             specified screen coordinates.
+---------+----------------+-------------------------------------------------+
          moveToAbsolute()   Changes the layer position to the specified pixel 
                             coordinates within the page.
+---------+----------------+-------------------------------------------------+
           releaseEvents()   Sets the layer to release captured events of the 
                             specified type.
+---------+----------------+-------------------------------------------------+
           resizeBy()        Resizes the layer by the specified height and 
                             width values.
+---------+----------------+-------------------------------------------------+
           resizeTo()        Resizes the layer to have the specified height and 
                             width values.
+---------+----------------+-------------------------------------------------+
           routeEvent()      Passes a captured event along the normal event hierarchy.
+---------+----------------+-------------------------------------------------+
 Property
+---------+----------------+-------------------------------------------------+
           above             Specifies the layer above.
+---------+----------------+-------------------------------------------------+
           background        Refers to the background image of the layer.
+---------+----------------+-------------------------------------------------+
           below             Specifies the layer below.
+---------+----------------+-------------------------------------------------+
           bgColor           Refers to the background color of the layer.
+---------+----------------+-------------------------------------------------+
           clip.bottom       Refers to the bottom of the layer"s clipping area.
+---------+----------------+-------------------------------------------------+
           clip.height       Refers to the height of the layer"s clipping area.
+---------+----------------+-------------------------------------------------+
           clip.left         Refers to the left of the layer"s clipping area.
+---------+----------------+-------------------------------------------------+
           clip.right        Refers to the right of the layer"s clipping area.
+---------+----------------+-------------------------------------------------+
           clip.top          Refers to the top of the layer"s clipping area.
+---------+----------------+-------------------------------------------------+
           clip.width        Refers to the width of the layer"s clipping area.
+---------+----------------+-------------------------------------------------+
           document          Refers to the Document object that contains the layer.
+---------+----------------+-------------------------------------------------+
           left              Refers to the x-coordinate of the layer.
+---------+----------------+-------------------------------------------------+
           name              Refers to the name of the layer.
+---------+----------------+-------------------------------------------------+
           pageX             Refers to the x-coordinate relative to the document.
+---------+----------------+-------------------------------------------------+
           pageY             Refers to the y-coordinate relative to the document.
+---------+----------------+-------------------------------------------------+
           parentLayer       Refers to the containing layer.
+---------+----------------+-------------------------------------------------+
           siblingAbove      Refers to the layer above in the zIndex.
+---------+----------------+-------------------------------------------------+
           siblingBelow      Refers to the layer below in the zIndex.
+---------+----------------+-------------------------------------------------+
           src               Refers to the source URL for the layer.
+---------+----------------+-------------------------------------------------+
           top               Refers to the y-coordinate of the layer.
+---------+----------------+-------------------------------------------------+
           visibility        Refers to the visibility state of the layer.
+---------+----------------+-------------------------------------------------+
           window            Refers to the Window or Frame object that contains 
                             the layer.
+---------+----------------+-------------------------------------------------+
           x                 Refers to the x-coordinate of the layer.
+---------+----------------+-------------------------------------------------+
           y                 Refers to the y-coordinate of the layer.
+---------+----------------+-------------------------------------------------+
           z                 Refers to the relative z-order of this layer with 
                             respect to its siblings.
+---------+----------------+-------------------------------------------------+
*/



Monitors divisions (or layers) on dynamic Web pages (DHTML)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>JsLib 1.3 - Exemple - dyna.js</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <META NAME="Author" CONTENT="Etienne CHEVILLARD">
    <!-- dyna.js -->
    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
/* dyna.js
 * Role : controle les divisions des pages Web dynamiques
 * Projet : JsLib
 * Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
 * Version : 1.3
 * Creation : 07/07/2001
 * Mise a jour : 23/02/2005
 * Bogues connues : - Opera 5/6 ne gere pas la couleur de fond "transparent"
 *                  - Opera 5/6 ne gere pas la modification du contenu des divisions
 */
// --- Variables globales ---
// choix du DOM (Document Object Model)
var dyna_w3=0;  // DOM-1 du W3C : Mozilla, Netscape 6/7, IE 5/6, Opera 7, Safari
var dyna_ie=0;  // IE 4
var dyna_nn=0;  // Netscape Navigator 4
var dyna_op=0;  // Opera 4/5/6
// determine le DOM utilise par le navigateur
if (document.getElementById && document.getElementsByTagName)
  dyna_w3=1;
else if (document.all && navigator.userAgent.toLowerCase().indexOf("opera")!=-1)
  dyna_op=1;
else if (document.all)
  dyna_ie=1;
else if (document.layers)
  dyna_nn=1;
// recharge la page si redimensionnement de la fenetre sous Netscape 4 (bogue)
window.onresize=function () {
  if (dyna_nn) { history.go(0); }
}
// --- Fonctions ---
// parcoure les divisions du DOM Netscape 4 pour trouver celle souhaitee
function dyna_obtenirDivNN4(objet, nom) {
  var divs=objet.layers;
  var divTrouvee;
  for (var i=0; i<divs.length; i++) {
    if (divs[i].id==nom)
       divTrouvee=divs[i];
    else if (divs[i].layers.length > 0)
      var tmp=dyna_obtenirDivNN4(divs[i], nom);
    if (tmp)
      divTrouvee=tmp;
  }
  return divTrouvee;
} // fin dyna_obtenirDivNN4(objet, nom)
// indique si le navigateur accepte le DHTML
function accepteDHTML() {
  return (dyna_w3 || dyna_ie || dyna_nn || dyna_op);
} // fin accepteDHTML()
// rend invisible la division specifiee
function cacherDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (dyna_w3 || dyna_ie || dyna_op)
    ldiv.style.visibility="hidden";
  else if (dyna_nn)
    ldiv.visibility="hide";
  return true;
} // fin cacherDivision(id)
// cree une nouvelle division et l"ajoute au DOM
// -- merci a Victor Lopes (victor3.lopes@voila.fr)
function creerDivision(id, x, y, largeur, hauteur) {
  if ((!id) || (id=="") || (obtenirDivision(id)))
    return false;
  if (isNaN(x))
    x=0;
  if (isNaN(y))
    y=0;
  if (isNaN(largeur) || (largeur<0))
    largeur=0;
  if (isNaN(hauteur) || (hauteur<0))
    hauteur=0;
  if (dyna_w3 && document.createElement) {
    var ndiv=document.createElement("DIV");
    ndiv.id=id;
    ndiv.style.position="absolute";
    ndiv.style.visibility="hidden";
    ndiv.style.left=x;
    ndiv.style.top=y;
    ndiv.style.width=largeur;
    ndiv.style.height=hauteur;
    ndiv.style.zIndex=0;
    document.body.appendChild(ndiv);
  } else if (dyna_ie || dyna_op) {
    var html="<DIV ID=""+id;
    html+="" STYLE="position:absolute;visibility:hidden;left:"+x+"px;top:"+y;
    html+="px;width:"+largeur+"px;height:"+hauteur+"px;z-index:0;"><\/DIV>";
    document.body.insertAdjacentHTML("beforeEnd", html);
  } else if (dyna_nn){
    document.layers[id]=new Layer(largeur);
    var ndiv=document.layers[id];
    ndiv.visibility="hide";
    ndiv.left=x;
    ndiv.top=y;
    ndiv.document.width=largeur;
    ndiv.document.height=hauteur;
    ndiv.clip.left=0;
    ndiv.clip.right=largeur;
    ndiv.clip.top=0;
    ndiv.clip.bottom=hauteur;
    ndiv.zIndex=0;
  }
  return true;
} // fin creerDivision(id, x, y, largeur, hauteur)
// deplace la division specifiee du nombre de pixels specifie
function deplacerDivisionDe(id, px, py) {
  return (modifierPosGaucheDivision(id, parseInt(obtenirPosGaucheDivision(id)) + px)
    && modifierPosHautDivision(id, parseInt(obtenirPosHautDivision(id)) + py));
} // fin deplacerDivisionDe(id, px, py)
// deplace la division specifiee vers les coordonnees specifiees
function deplacerDivisionVers(id, x, y) {
  return (modifierPosGaucheDivision(id, x)
    && modifierPosHautDivision(id, y));
} // fin deplacerDivisionVers(id, x, y)
// modifie le code HTML contenu dans la division specifiee
function modifierCodeDivision(id, code) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (!code)
    code="";
  if (navigator.userAgent.toLowerCase().indexOf("mac")!=-1)
    code+="\n";
  if (dyna_w3) {
    ldiv.innerHTML="";
    ldiv.innerHTML=code;
  } else if (dyna_ie || dyna_op) {
    ldiv.innerHTML=code;
  } else if (dyna_nn) {
    ldiv.document.open();
    ldiv.document.write(code);
    ldiv.document.close();
  }
  return true;
} // fin modifierCodeDivision(id, code)
// modifie la couleur de fond de la division specifiee
function modifierCouleurFondDivision(id, couleur) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if ((!couleur) || (couleur==""))
    couleur="transparent";
  if (dyna_op)
    ldiv.style.background=couleur;
  else if (dyna_w3 || dyna_ie)
    ldiv.style.backgroundColor=couleur;
  else if (dyna_nn) {
    if (couleur.toLowerCase()=="transparent")
      ldiv.bgColor=null;
    else
      ldiv.bgColor=couleur;
  }
  return true;
} // fin modifierCouleurFondDivision(id, couleur)
// modifie les dimensions de la division specifiee
function modifierDimensionsDivision(id, largeur, hauteur) {
  return (modifierLargeurDivision(id, largeur)
    && modifierHauteurDivision(id, hauteur));
} // fin modifierDimensionsDivision(id, largeur, hauteur)
// modifie la hauteur de la division specifiee
function modifierHauteurDivision(id, hauteur) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (isNaN(hauteur) || (hauteur<0))
    hauteur=0;
  if (dyna_w3)
    ldiv.style.height=hauteur;
  else if (dyna_ie || dyna_op)
    ldiv.style.pixelHeight=hauteur;
  else if (dyna_nn) {
    ldiv.document.height=hauteur;
    ldiv.clip.top=0;
    ldiv.clip.bottom=hauteur;
  }
  return true;
} // fin modifierHauteurDivision(id, hauteur)
// modifie l"image de fond de la division specifiee
function modifierImageFondDivision(id, image) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (dyna_w3 || dyna_ie || dyna_op) {
    if ((!image) || (image==""))
      ldiv.style.backgroundImage="url(null)";
    else
      ldiv.style.backgroundImage="url("+image+")";
  } else if (dyna_nn) {
    ldiv.background.src=image;
  }
  return true;
} // fin modifierImageFondDivision(id, image)
// modifie la largeur de la division specifiee
function modifierLargeurDivision(id, largeur) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (isNaN(largeur) || (largeur<0))
    largeur=0;
  if (dyna_w3)
    ldiv.style.width=largeur;
  else if (dyna_ie || dyna_op)
    ldiv.style.pixelWidth=largeur;
  else if (dyna_nn) {
    ldiv.document.width=largeur;
    ldiv.clip.left=0;
    ldiv.clip.right=largeur;
  }
  return true;
} // fin modifierLargeurDivision(id, largeur)
// modifie la position horizontale de la division specifiee
function modifierPosGaucheDivision(id, x) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (isNaN(x))
    x=0;
  if (dyna_w3)
    ldiv.style.left=x;
  else if (dyna_ie || dyna_op)
    ldiv.style.pixelLeft=x;
  else if (dyna_nn)
    ldiv.left=x;
  return true;
} // fin modifierPosGaucheDivision(id, x)
// modifie la position verticale de la division specifiee
function modifierPosHautDivision(id, y) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (isNaN(y))
    y=0;
  if (dyna_w3)
    ldiv.style.top=y;
  else if (dyna_ie || dyna_op)
    ldiv.style.pixelTop=y;
  else if (dyna_nn)
    ldiv.top=y;
  return true;
} // fin modifierPosHautDivision(id, y)
// modifie l"index de superposition de la division specifiee
function modifierZIndexDivision(id, z) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if ((isNaN(z)) || (parseInt(z)<0))
    z=0;
  if (dyna_w3 || dyna_ie || dyna_op)
    ldiv.style.zIndex=z;
  else if (dyna_nn)
    ldiv.zIndex=z;
  return true;
} // fin modifierZIndexDivision(id, z)
// rend visible la division specifiee
function montrerDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (dyna_w3 || dyna_ie || dyna_op)
    ldiv.style.visibility="visible";
  else if (dyna_nn)
    ldiv.visibility="show";
  return true;
} // fin montrerDivision(id)
// retourne la couleur de fond de la division specifiee
function obtenirCouleurFondDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return "";
  if (dyna_op)
    return ldiv.style.background;
  else if (dyna_w3 || dyna_ie)
    return ldiv.style.backgroundColor;
  else if (dyna_nn)
    return ldiv.bgColor;
} // fin obtenirCouleurFondDivision(id)
// retourne une reference sur la division d"identifiant specifie
function obtenirDivision(id) {
  if (dyna_w3)
    return document.getElementById(id);
  else if (dyna_ie || dyna_op)
    return document.all[id];
  else if (dyna_nn)
    return dyna_obtenirDivNN4(document, id);
  return "";
} // fin obtenirDivision(id)
// retourne la hauteur de la division specifiee
// -- merci a Victor Lopes (victor3.lopes@voila.fr)
function obtenirHauteurDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return 0;
  if (dyna_w3) {
    var re = /\D/g;
    return parseInt((ldiv.style.height).replace(re, ""));
  } else if (dyna_ie || dyna_op)
    return parseInt(ldiv.style.pixelHeight);
  else if (dyna_nn)
    return parseInt(ldiv.clip.bottom);
} // fin obtenirHauteurDivision(id)
// retourne la hauteur de la zone de navigation
function obtenirHauteurZone() {
  if (self.innerHeight)
    return parseInt(self.innerHeight);
  else if (document.documentElement && document.documentElement.clientHeight)
    return parseInt(document.documentElement.clientHeight);
  else if (document.body)
    return parseInt(document.body.clientHeight);
  return 0;
} // fin obtenirHauteurZone()
// retourne l"URL de l"image de fond de la division specifiee
function obtenirImageFondDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return "";
  var img="";
  if (dyna_w3 || dyna_ie || dyna_op)
    img=ldiv.style.backgroundImage;
  else if (dyna_nn)
    img=ldiv.background.src;
  if (img.substring(0, 4)=="url(")
    img=img.substring(4, img.length-1);
  return img;
} // fin obtenirImageFondDivision(id)
// retourne la largeur de la division specifiee
// -- merci a Victor Lopes (victor3.lopes@voila.fr)
function obtenirLargeurDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return 0;
  if (dyna_w3) {
    var re = /\D/g;
    return parseInt((ldiv.style.width).replace(re, ""));
  } else if (dyna_ie || dyna_op)
    return parseInt(ldiv.style.pixelWidth);
  else if (dyna_nn)
    return parseInt(ldiv.clip.right);
} // fin obtenirLargeurDivision(id)
// retourne la largeur de la zone de navigation
function obtenirLargeurZone() {
  if (self.innerWidth)
    return parseInt(self.innerWidth);
  else if (document.documentElement && document.documentElement.clientWidth)
    return parseInt(document.documentElement.clientWidth);
  else if (document.body)
    return parseInt(document.body.clientWidth);
  return 0;
} // fin obtenirLargeurZone()
// retourne la position horizontale de la division specifiee
function obtenirPosGaucheDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return 0;
  if (dyna_w3) {
    var re = /\D/g;
    return parseInt((ldiv.style.left).replace(re, ""));
  } else if (dyna_ie || dyna_op)
    return parseInt(ldiv.style.pixelLeft);
  else if (dyna_nn)
    return parseInt(ldiv.left);
  return 0;
} // fin obtenirPosGaucheDivision(id)
// retourne la position verticale de la division specifiee
function obtenirPosHautDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return 0;
  if (dyna_w3) {
    var re = /\D/g;
    return parseInt((ldiv.style.top).replace(re, ""));
  } else if (dyna_ie || dyna_op)
    return parseInt(ldiv.style.pixelTop);
  else if (dyna_nn)
    return parseInt(ldiv.top);
} // fin obtenirPosHautDivision(id)
// retourne l"index de superposition de la division specifiee
function obtenirZIndexDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return 0;
  if (dyna_w3 || dyna_ie || dyna_op)
    return parseInt(ldiv.style.zIndex);
  else if (dyna_nn)
    return parseInt(ldiv.zIndex);
} // fin obtenirZIndexDivision(id)
    </SCRIPT>
  </HEAD>
  <BODY onLoad="majFormulaire()">
    <H1>JsLib 1.3</H1>
    <HR>
    <H2>Exemple - dyna.js</H2>
    <NOSCRIPT>
      <P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configur&eacute; pour ne
      pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
      configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>
      <HR>
    </NOSCRIPT>
    <P>Est-ce que votre navigateur prend en charge le DHTML ?
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
        if (accepteDHTML()) document.write("oui");
        else document.write("non");
      </SCRIPT>
    <P>Largeur de la zone de navigation (en pixels) :
    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">document.write(obtenirLargeurZone());</SCRIPT>
    <BR>Hauteur de la zone de navigation (en pixels) :
    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">document.write(obtenirHauteurZone());</SCRIPT>
    <P>Divisions :
    <DIV ID="d1" STYLE="position:absolute;left:200px;top:240px;width:80px;height:60px;background:url("./extra/fond.gif");z-index:1;visibility:visible;">
      Division 1
    </DIV>
    <DIV ID="d2" STYLE="position:absolute;left:300px;top:240px;width:180px;height:80px;background-color:cyan;z-index:2;visibility:visible;">
      Division 2
      <DIV ID="d3" STYLE="position:absolute;left:20px;top:20px;width:140px;height:40px;background-color:violet;z-index:3;visibility:visible;">
        Division 3 imbriqu&eacute;e dans division 2
      </DIV>
    </DIV>
    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
      var chx;
      function majFormulaire() {
        chx=document.f1.l1.options[document.f1.l1.selectedIndex].value;
        document.f1.t1.value = obtenirZIndexDivision(chx);
        document.f1.t2.value = obtenirPosGaucheDivision(chx);
        document.f1.t3.value = obtenirPosHautDivision(chx);
        document.f1.t4.value = obtenirLargeurDivision(chx);
        document.f1.t5.value = obtenirHauteurDivision(chx);
        document.f1.t6.value = obtenirCouleurFondDivision(chx);
         document.f1.t7.value = obtenirImageFondDivision(chx);
        return true;
      }
    </SCRIPT>
    
    <FORM ACTION="GET" NAME="f1">
    
      <INPUT NAME="b1" TYPE="button" VALUE="Creer Division 4"
        onClick="creerDivision("d4","500","240","150","150");
        modifierCodeDivision("d4","Division 4");
        document.f1.l1.selectedIndex=3;
        majFormulaire();
        document.f1.b1.disabled=true;">
      <P>&nbsp;    
      <P>&nbsp;
    
      <P><B>Op&eacute;rations sur la division
        <SELECT NAME="l1" SIZE="1" onChange="return majFormulaire()">
          <OPTION VALUE="d1" SELECTED>1</OPTION>
          <OPTION VALUE="d2">2</OPTION>
          <OPTION VALUE="d3">3</OPTION>
          <OPTION VALUE="d4">4</OPTION>
        </SELECT>
      :</B>
      
      <P>Visibilit&eacute; :&nbsp;
      <INPUT TYPE="button" VALUE="Montrer" onClick="montrerDivision(chx)">
      <INPUT TYPE="button" VALUE="Cacher" onClick="cacherDivision(chx)">
      <P>Index de superposition (Z-index) :&nbsp;
      <INPUT TYPE="text" NAME="t1" SIZE=5>
      <INPUT TYPE="button" VALUE="Modifier" onClick="modifierZIndexDivision(chx, parseInt(document.f1.t1.value))">
      <TABLE SUMMARY="table1" BORDER=0 CELLSPACING=0 CELLPADDING=0><TR><TD>
        <P>Position horizontale (en pixels) :&nbsp;
        X = <INPUT TYPE="text" NAME="t2" SIZE=5>
        <INPUT TYPE="button" VALUE="D&eacute;placer" onClick="modifierPosGaucheDivision(chx, parseInt(document.f1.t2.value))">
         <P>Position verticale (en pixels) :&nbsp;
        Y = <INPUT TYPE="text" NAME="t3" SIZE=5>
        <INPUT TYPE="button" VALUE="D&eacute;placer" onClick="modifierPosHautDivision(chx, parseInt(document.f1.t3.value))">
      </TD><TD>
        <TABLE SUMMARY="table" BORDER=0 CELLSPACING=0 CELLPADDING=5><TR><TD>
        &nbsp;&nbsp;&nbsp;Position (incr&eacute;ment de 10 pixels) :&nbsp;
        </TD><TD ALIGN=CENTER>
          &nbsp;&nbsp;&nbsp;<INPUT TYPE="button" VALUE="Haut" onClick="deplacerDivisionDe(chx, 0, -10); majFormulaire()"><BR>
          <INPUT TYPE="button" VALUE="Gauche" onClick="deplacerDivisionDe(chx, -10, 0); majFormulaire()">
          <INPUT TYPE="button" VALUE="Bas" onClick="deplacerDivisionDe(chx, 0, 10); majFormulaire()">
          <INPUT TYPE="button" VALUE="Droite" onClick="deplacerDivisionDe(chx, 10, 0); majFormulaire()">
        </TD></TR></TABLE>
      </TD></TR></TABLE>
        
      <P>Largeur (en pixels) :&nbsp;
      Largeur = <INPUT TYPE="text" NAME="t4" SIZE=10>
      <INPUT TYPE="button" VALUE="Redimensionner" onClick="modifierLargeurDivision(chx, parseInt(document.f1.t4.value))">
      <P>Hauteur (en pixels) :&nbsp;
      Hauteur = <INPUT TYPE="text" NAME="t5" SIZE=10>
      <INPUT TYPE="button" VALUE="Redimensionner" onClick="modifierHauteurDivision(chx, parseInt(document.f1.t5.value))">
      <P>Couleur de fond (code RGB ou nom HTML) :&nbsp;
      <INPUT TYPE="text" NAME="t6" SIZE=10>
      <INPUT TYPE="button" VALUE="Changer la couleur" onClick="modifierCouleurFondDivision(chx, document.f1.t6.value)">
      <INPUT TYPE="button" VALUE="Transparent" onClick="modifierCouleurFondDivision(chx, "transparent"); majFormulaire()">
      <P>Image de fond (URL) :&nbsp;
      <INPUT TYPE="text" NAME="t7" SIZE=40>
      <INPUT TYPE="button" VALUE="Changer l"image" onClick="modifierImageFondDivision(chx, document.f1.t7.value)">
      <INPUT TYPE="button" VALUE="Aucune image" onClick="modifierImageFondDivision(chx, null); majFormulaire()">
      <P>Contenu (code HTML) :<BR>
      <TEXTAREA NAME="ta1" ROWS=4 COLS=50>&lt;B&gt;Texte en gras&lt;/B&gt;</TEXTAREA>
      <INPUT TYPE="button" VALUE="Modifier le contenu" onClick="modifierCodeDivision(chx, document.f1.ta1.value)">
      
    </FORM>
  </BODY>
</HTML>



Nested Layer Visibility Relationships (W3C)

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>layer.style.visibility (W3C)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function setOuterVis(type) {
    document.getElementById("outerDisplay").style.visibility = type
}
function setInnerVis(type) {
    document.getElementById("innerDisplay").style.visibility = type
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Setting the <TT>layer.style.visibility</TT> Property of Nested Layers (W3C)</H1>
<HR>
Click the buttons to see what happens when you change the visibility of the
 <FONT COLOR="coral">outer layer</FONT> and <FONT COLOR="aquamarine">inner layer</FONT> objects.<P>
<DIV STYLE="position:absolute; top:150; width:180; background-color:coral">
<FORM>
Control outer layer property:<BR>
<INPUT TYPE="button" VALUE="Hide Outer Layer" onClick="setOuterVis("hidden")"><BR>
<INPUT TYPE="button" VALUE="Show Outer Layer" onClick="setOuterVis("visible")"><BR>
</FORM>
</DIV>
<DIV STYLE="position:absolute; top:270; width:180; background-color:aquamarine">
<FORM>
Control inner layer property:<BR>
<INPUT TYPE="button" VALUE="Hide Inner Layer" onClick="setInnerVis("hidden")"><BR>
<INPUT TYPE="button" VALUE="Show Inner Layer" onClick="setInnerVis("visible")"><BR>
<INPUT TYPE="button" VALUE="Inherit Outer Layer" onClick="setInnerVis("inherit")"><BR>
</FORM>
</DIV>
<DIV ID="outerDisplay" STYLE="position:absolute; top:150; left:200; width:370;
 height:190; background-color:coral">
    <DIV ID="innerDisplay" STYLE="position:absolute; top:5; left:5; width:360;
 height:180; background-color:aquamarine">
    <P><B>Placeholder text for raw inner layer.</B></P>
    </DIV>
</DIV>
</BODY>
</HTML>



Relationships Among zIndex Values (W3C)

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>layer.style.zIndex</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function setZ(field) {
    switch (field.name) {
        case "top" :
            document.getElementById("topLayer").style.zIndex = parseInt(field.value)
            break
        case "mid" :
            document.getElementById("middleLayer").style.zIndex = parseInt(field.value)
            break
        case "bot" :
            document.getElementById("bottomLayer").style.zIndex = parseInt(field.value)
    }
    showValues()
}
function showValues() {
    var botLayer = document.getElementById("bottomLayer")
    var midLayer = document.getElementById("middleLayer")
    var topLayer = document.getElementById("topLayer")
    
    document.forms[0].bot.value = botLayer.style.zIndex
    document.forms[1].mid.value = midLayer.style.zIndex
    document.forms[2].top.value = topLayer.style.zIndex
}
</SCRIPT>
</HEAD>
<BODY onLoad="showValues()">
<H1><TT>layer.style.zIndex</TT> Property of Sibling Layers</H1>
<HR>
Enter new zIndex values to see the effect on three layers.<P>
<DIV STYLE="position:absolute; top:140; width:240; background-color:coral">
<FORM>
Control Original Bottom Layer:<BR>
<TABLE>
<TR><TD ALIGN="right">Layer zIndex:</TD><TD><INPUT TYPE="text" NAME="bot" SIZE=3
 onChange="setZ(this)"></TD></TR>
</TABLE>
</FORM>
</DIV>
<DIV STYLE="position:absolute; top:220; width:240; background-color:aquamarine">
<FORM>
Control Original Middle Layer:<BR>
<TABLE>
<TR><TD ALIGN="right">Layer zIndex:</TD><TD><INPUT TYPE="text" NAME="mid" SIZE=3
 onChange="setZ(this)"></TD></TR>
</TABLE></FORM>
</DIV>
<DIV STYLE="position:absolute; top:300; width:240; background-color:yellow">
<FORM>
Control Original Top Layer:<BR>
<TABLE>
<TR><TD ALIGN="right">Layer zIndex:</TD><TD><INPUT TYPE="text" NAME="top" SIZE=3
 onChange="setZ(this)"></TD></TR>
</TABLE>
</FORM>
</DIV>
<DIV ID="bottomLayer" STYLE="position:absolute; top:140; left:260; width:300;
 height:190; z-Index:0; background-color:coral">
    <SPAN><B>Original Bottom Layer</B></SPAN>
</DIV>
<DIV ID="middleLayer" STYLE="position:absolute; top:160; left:280; width:300;
 height:190; z-Index:0; background-color:aquamarine">
    <SPAN><B>Original Middle DIV</B></SPAN>
</DIV>
<DIV ID="topLayer" STYLE="position:absolute; top:180; left:300; width:300;
 height:190; z-Index:0; background-color:yellow">
    <SPAN><B>Original Top Layer</B></SPAN>
</DIV>
</BODY>
</HTML>



Resizing a Layer (W3C)

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Layer Resizing</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var engaged = false
var offsetX = 0
var offsetY = 0
function resizeIt(evt) {
    evt = (evt) ? evt : (window.event) ? window.event : ""
    var targElem = (evt.target) ? evt.target : evt.srcElement
    if (targElem.className == "draggable") {
        if (engaged) {
            if (evt.pageX) {
                targElem.style.width = (evt.pageX - targElem.offsetLeft - offsetX) + "px"
                targElem.style.height = (evt.pageY - targElem.offsetTop - offsetY) + "px"
} else {
                var elemWidth = evt.clientX - targElem.offsetLeft - offsetX - 
                    (parseInt(targElem.style.left) - parseInt(targElem.offsetLeft))
                var elemHeight = evt.clientY - targElem.offsetTop - offsetY - 
                    (parseInt(targElem.style.top) - parseInt(targElem.offsetTop))
                targElem.style.width = elemWidth + "px"
                targElem.style.height = elemHeight + "px"
            }
        }
    }
}
function engage(evt) {
    evt = (evt) ? evt : (window.event) ? window.event : ""
    var targElem = (evt.target) ? evt.target : evt.srcElement
    if (targElem.className == "draggable") {
       while (targElem.id != "myLayer" && targElem.parentNode) {
           targElem = targElem.parentNode
        }
        if (targElem.id == "myLayer") {
            if (evt.pageX && (evt.pageX > ((parseInt(targElem.style.width) - 20) + 
            targElem.offsetLeft)) && (evt.pageY > 
            ((parseInt(targElem.style.height) - 20) + targElem.offsetTop))) {
                offsetX = evt.pageX - parseInt(targElem.style.width) - targElem.offsetLeft
                offsetY = evt.pageY - parseInt(targElem.style.height) - targElem.offsetTop
                engaged = true
            } else if ((evt.offsetX > parseInt(targElem.style.width) - 20) && (evt.offsetY > 
                parseInt(targElem.style.height) - 20)) {
                offsetX = evt.offsetX - parseInt(targElem.style.width) - document.body.scrollLeft
                offsetY = evt.offsetY - parseInt(targElem.style.height) - document.body.scrollTop
                engaged = true
                if (navigator.userAgent.indexOf("Win") == -1) {
                    offsetX += document.body.scrollLeft
                    offsetY += document.body.scrollTop
                   }
            }
            return false
        }
    }
}
function release(evt) {
    evt = (evt) ? evt : (window.event) ? window.event : ""
    var targElem = (evt.target) ? evt.target : evt.srcElement
    if (targElem.className == "draggable") {
        while (targElem.id != "myLayer" && targElem.parentNode) {
            targElem = targElem.parentNode
        }
        if (engaged && targElem.id == "myLayer") {
            engaged = false
        }
    }
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Resizing a Layer (W3C)</H1>
<HR>
<DIV ID="myLayer" CLASS="draggable" STYLE="position:absolute; top:170; left:100;
 width:300; height:190; background-color:lightblue">
<SPAN>Here is some content inside the layer. See what happens to it as you
 resize the layer via the bottom-right 20-pixel handle.</SPAN>
</DIV>
<SCRIPT LANGUAGE="JavaScript">
document.onmousedown = engage
document.onmouseup = release
document.onmousemove = resizeIt
document.onmouseout = release
</SCRIPT>
</BODY>
</HTML>



Setting Layer Backgrounds (W3C)

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function setBg(URL) {
    document.getElementById("bgExpo").style.backgroundImage = "url(" + URL + ")"
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Layer Backgrounds (W3C)</H1>
<HR>
<DIV ID="buttons" STYLE="position:absolute; top:100">
<FORM>
<INPUT TYPE="button" VALUE="The Usual" onClick="setBg("http://www.wbex.ru/style/logo.png")"><BR>
<INPUT TYPE="button" VALUE="A Big One" onClick="setBg("http://www.wbex.ru/style/logoRed.png")"><BR>
<INPUT TYPE="button" VALUE="Not So Usual" onClick="setBg("wh86.gif")"><BR>
<INPUT TYPE="button" VALUE="Decidedly Unusual" onClick="setBg("sb23.gif")"><BR>
<INPUT TYPE="button" VALUE="Quick as..." onClick="setBg("lightnin.gif")"><P>
<INPUT TYPE="button" VALUE="Remove Image" onClick="setBg(null)"><BR>
</FORM>
</DIV>
<DIV ID="bgExpo" STYLE="position:absolute; top:100; left:250; width:300; height:260; background-color:gray" >
<SPAN STYLE="font-weight:bold; color:white">Some text, which may or may not read
 well with the various backgrounds.</SPAN>
</DIV>
</BODY>
</HTML>



Testing Nested Layer Coordinate Systems (W3C)

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Nested Layer Coordinates (W3C)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// offsets within page
function getGrossOffsetLeft(elem) {
    var offset = 0
    while (elem.offsetParent) {
        // correct for IE/Mac discrepancy between offset and style coordinates,
        // but not if the parent is HTML element (NN6)
        offset += (elem.offsetParent.tagName != "HTML") ? 
            parseInt(elem.style.left) - parseInt(elem.offsetLeft) : 0
        elem = elem.offsetParent
        offset += elem.offsetLeft
    }
    return offset
}
function getGrossOffsetTop(elem) {
    var offset = 0
    while (elem.offsetParent) {
        // correct for IE/Mac discrepancy between offset and style coordinates,
        // but not if the parent is HTML element (NN6)
        offset += (elem.offsetParent.tagName != "HTML") ? 
            parseInt(elem.style.top) - parseInt(elem.offsetTop) : 0
        elem = elem.offsetParent
        offset += elem.offsetTop
    }
    return offset
}
// offsets within element"s positioning context
function getNetOffsetLeft(offset, elem) {
    while (elem = getParentLayer(elem)) {
        // correct for IE/Mac discrepancy between offset and style coordinates,
        // but not if the parent is HTML element (NN6)
        offset -= (elem.offsetParent.tagName != "HTML") ? 
            parseInt(elem.style.left) - parseInt(elem.offsetLeft) : 0
        offset -= elem.offsetLeft
    }
    return offset
}
function getNetOffsetTop(offset, elem) {
    while (elem = getParentLayer(elem)) {
        // correct for IE/Mac discrepancy between offset and style coordinates,
        // but not if the parent is HTML element (NN6)
        offset -= (elem.offsetParent.tagName != "HTML") ? 
            parseInt(elem.style.top) - parseInt(elem.offsetTop) : 0
        offset -= elem.offsetTop
    }
    return offset
}
// find positioning context parent element
function getParentLayer(elem) {
    if (elem.parentNode) {
        while (elem.parentNode != document.body) {
            elem = elem.parentNode
            while (elem.nodeType != 1) {
                elem = elem.parentNode
            }
            if (elem.style.position == "absolute" || elem.style.position == "relative") {
                return elem
            }
elem = elem.parentNode
        }
        return null
    } else if (elem.offsetParent && elem.offsetParent.tagName != "HTML") {
        return elem.offsetParent
    } else {
        return null
    }
}
// functions that respond to changes in text boxes
function setOuterPage(field) {
    var val = parseInt(field.value)
    var elem = document.getElementById("outerDisplay")
    switch (field.name) {
        case "pageX" :
            elem.style.left = ((elem.offsetParent) ? getNetOffsetLeft(val, elem) : val) + "px"
            break
        case "pageY" :
            elem.style.top = ((elem.offsetParent) ? getNetOffsetTop(val, elem) : val) + "px"
            break
    }
    showValues()
}
function setOuterLayer(field) {
    var val = parseInt(field.value)
    switch (field.name) {
        case "left" :
            document.getElementById("outerDisplay").style.left = val + "px"
            break
        case "top" :
            document.getElementById("outerDisplay").style.top = val + "px"
            break
    }
    showValues()
}
function setInnerPage(field) {
    var val = parseInt(field.value)
    var elem = document.getElementById("innerDisplay")
    switch (field.name) {
        case "pageX" :
            elem.style.left = ((elem.offsetParent) ? getNetOffsetLeft(val, elem) : val) + "px"
            break
        case "pageY" :
            elem.style.top = ((elem.offsetParent) ? getNetOffsetTop(val, elem) : val) + "px"
            break
    }
    showValues()
}
function setInnerLayer(field) {
    var val = parseInt(field.value)
    switch (field.name) {
        case "left" :
            document.getElementById("innerDisplay").style.left = val + "px"
            break
        case "top" :
            document.getElementById("innerDisplay").style.top = val + "px"
            break
    }
    showValues()
}
function showValues() {
    var form = document.forms[0]
    var outer = document.getElementById("outerDisplay")
    var inner = document.getElementById("innerDisplay")
    form.elements[0].value = outer.offsetLeft + 
    ((outer.offsetParent) ? getGrossOffsetLeft(outer) : 0)
    form.elements[1].value = outer.offsetTop + 
    ((outer.offsetParent) ? getGrossOffsetTop(outer) : 0)
    form.elements[2].value = parseInt(outer.style.left)
    form.elements[3].value = parseInt(outer.style.top)
    form.elements[4].value = inner.offsetLeft + 
    ((inner.offsetParent) ? getGrossOffsetLeft(inner) : 0)
    form.elements[5].value = inner.offsetTop + 
    ((inner.offsetParent) ? getGrossOffsetTop(inner) : 0)
    form.elements[6].value = parseInt(inner.style.left)
    form.elements[7].value = parseInt(inner.style.top)
}
</SCRIPT>
</HEAD>
<BODY onLoad="showValues()">
<H1>Nested Layer Coordinates (W3C)</H1>
<HR>
Enter new page and layer coordinates for the <FONT COLOR="coral">outer
 layer</FONT> and <FONT COLOR="aquamarine">inner layer</FONT> objects.<P>
<DIV STYLE="position:absolute; top:130">
<FORM>
<TABLE>
<TR>
    <TD ALIGN="right" BGCOLOR="coral">Page X:</TD>
    <TD BGCOLOR="coral"><INPUT TYPE="text" NAME="pageX" SIZE=3 
        onChange="setOuterPage(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right" BGCOLOR="coral">Page Y:</TD>
    <TD BGCOLOR="coral"><INPUT TYPE="text" NAME="pageY" SIZE=3 
        onChange="setOuterPage(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right" BGCOLOR="coral">Container X:</TD>
    <TD BGCOLOR="coral"><INPUT TYPE="text" NAME="left" SIZE=3 
        onChange="setOuterLayer(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right" BGCOLOR="coral">Container Y:</TD>
    <TD BGCOLOR="coral"><INPUT TYPE="text" NAME="top" SIZE=3 
        onChange="setOuterLayer(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right" BGCOLOR="aquamarine">Page X:</TD>
    <TD BGCOLOR="aquamarine"><INPUT TYPE="text" NAME="pageX" SIZE=3 
        onChange="setInnerPage(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right" BGCOLOR="aquamarine">Page Y:</TD>
    <TD BGCOLOR="aquamarine"><INPUT TYPE="text" NAME="pageY" SIZE=3 
        onChange="setInnerPage(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right" BGCOLOR="aquamarine">Container X:</TD>
    <TD BGCOLOR="aquamarine"><INPUT TYPE="text" NAME="left" SIZE=3 
        onChange="setInnerLayer(this)"></TD>
</TR>
<TR>
    <TD ALIGN="right" BGCOLOR="aquamarine">Container Y:</TD>
    <TD BGCOLOR="aquamarine"><INPUT TYPE="text" NAME="top" SIZE=3 
        onChange="setInnerLayer(this)"></TD>
</TR>
</TABLE>
</FORM>
</DIV>
<DIV ID="outerDisplay" STYLE="position:absolute; top:130; left:200; width:370;
 height:190; background-color:coral">
<DIV ID="innerDisplay" STYLE="position:absolute; top:5; left:5; width:360;
 height:180; background-color:aquamarine" >
<H2>ARTICLE I</H2>
<P>
Congress shall make no law respecting an establishment of religion, or prohibiting 
the free exercise thereof; or abridging the freedom of speech, or of the press; or 
the right of the people peaceably to assemble, and to petition the government for 
a redress of grievances.
</P>
</DIV>
</DIV>
</BODY>
</HTML>



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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Layer&oldid=2601»