Layers

First Netscape implemented the layers command. Microsoft implemented the same functionality with the div command. The Netscape example I found documented in a book. The Micorsoft code was taken from code I found and guesses I made.

Netscape Only

<layer name="layerName" left=xPos top=yPos Z-Index=layer width=width clip="x1offset, y1offset, x2offset, y2offset" above="layerName" below="layerName" visibility=show | hide | inherit bgcolor="#rrggbb" background="imageURL"> Stuff in layer </layer>

Example:

<script language="JavaScript">
<!--
//Purpose: Move bird1 in Netscape
//Global: bird1x
var bird2x = -150;

function Move() {
if (bird1x > document.width) bird1x = -150;
document.bird1.left = bird1x++;
//document.bird1.top = yPos;
timerID = setTimeout("Move()", 25);
}
//-->
</script>

<body onload=Move()>

<layer name="bird1" left=-150 top=300>
<img src=../img/bird.gif height=67 width=149>
</layer>

The parameters left, top, width and clip are in units of pixels.

When multiple layers are define, the last layer defined is on top. This can be over ridden with the above, below and Z-Index parameters.

The JavaScript properties for the layers object are: name (r), width (r), height (r), left (r/w), top (r/w), zIndex (r/w), visibility (r/w), clip.top (r/w), clip.left (r/w), clip.bottom (r/w), clip.right (r/w), clip.width (r/w),clip.height (r/w), background (r/w), bgcolor (r/w), siblingAbove (r), siblingBelow (r), above (r), below (r), parentLayer (r), layers (r) and src (r).

The JavaScript methods for the layers object are: offset(x,y), moveTo(x,y), resize(width,height), moveAbove(layer) and moveBelow(layer).

Return to HTML index

Internet Explorer Only

Example:

<script language="JavaScript">
<!--
//Purpose: Move bird2 in Internet Explorer
//Global: bird2x
var bird2x = -150;

function Move() {
if (bird2x > document.width) bird2x = -150;
document.all.bird2.left = bird2x++;
//document.bird2.top = yPos;
timerID = setTimeout("Move()", 25);
}
//-->
</script>

<body onload=Move()>

<div id="bird2" style="position:absolute;left:-150;top:300;">
<img src=../img/bird.gif>
</div>

Last Updated: $Date: 2002/02/18 02:26:14 $ GMT ($Revision: 1.9 $)