The LAYER Element

The <LAYER> Element

Netscape Navigator 4.0 introduced the <LAYER> element, which enables you to create positionable layers of content in a web page. Today that role has largely been taken over by style sheets and elements such as <DIV> , but layers were quite popular for a while. (They're no longer supported in Netscape Navigator 6.) Layers are often used to position and move elements in a page, so I'll take a look at them here in our dynamic pages chapter. You can see an overview of the properties, methods , and events of the <LAYER> element in Table 16.1, its properties in depth in Table 16.2, its methods in Table 16.3, and its events in Table 16.4.

Table 16.1. Overview of the Properties, Methods, and Events of the <LAYER> Element

Properties	Methods	Events
above	captureEvents	onblur
background	handleEvent	onfocus
below	load	onload
bgcolor	moveAbove	onmouseout
clip	moveBelow	onmouseover
document	moveBy
left	moveTo
name	moveToAbsolute
pageX	releaseEvents
pageY	resizeBy
parentLayer	resizeTo
siblingAbove	routeEvent
siblingBelow
src
top
visibility
zIndex

Table 16.2. The Properties of the <LAYER> Element

Property	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
above			x
	Read-only
	Holds the layer above this one.
background			x
	Read/write
	Holds a background image. Set to an Image object (see "Precaching Images and the Image Object" in Chapter 15).
below			x
	Read-only
	Holds the layer below this one.
bgcolor			x
	Read/write
	Holds the background color of the layer, set to a predefined browser color (such as "coral" ) or a color triplet (such as "ffffff" ). See "Layers and the Mouse" in this chapter for an example.
clip			x
	Read/write
	Enables you to specify rectangular areas in a layer. The clip object supports these pixel measurement properties: clip.bottom , clip.left , clip.right , and clip.top .
document			x
	Read-only
	Each layer has its own document object, and this property holds the document object for the layer.
left			x
	Read/write
	Corresponds to the LEFT attribute of the <LAYER> element relative to its parent, giving the X coordinate of the layer's upper-point. Set to a pixel measurement. See "Moving Layers On-the-Fly" in this chapter for an example.
name			x
	Read/write
	Holds the name of the layer, used in code. Set to a name string.
pageX			x
	Read-only
	Corresponds to the X coordinate of the layer's upper-left point relative to the document's upper-left point. Set to a pixel measurement.
pageY			x
	Read-only
	Corresponds to the Y coordinate of the layer's upper-left point relative to the document's upper-left point. Set to a pixel measurement.
parentLayer			x
	Read-only
	The layer that contains the current one, if there is one. Set to a <LAYER> object.
siblingAbove			x
	Read-only
	Holds the sibling layer (in the same parent layer container) above this one.
siblingBelow			x
	Read-only
	Holds the sibling layer (in the same parent layer container) below this one.
src			x
	Read/write
	Document to be displayed in the current layer. Set to a URL.
top			x
	Read/write
	Corresponds to the TOP attribute of the <LAYER> element relative to its parent, giving the Y coordinate of the layer's upper-left point. Set to a pixel measurement.
visibility			x
	Read/write
	Sets the layer's visibilitycan hold "show" , "hide" , or " inherit" (which means inherit this setting from the parent layer).
zIndex			x
	Read/write
	Sets the stacking level with regard to other layers. (That is, specifies which layers this layer is on top of or under.) Set to a positive integer.

Table 16.3. The Methods of the <LAYER> Element

Method	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
captureEvents			x
	Returns: Nothing
	Lets the window object capture events in Netscape Navigator 4.0.
	Syntax: captureEvents( eventTypeList ) . Here, eventTypeList holds a list of events to capture, OR'ed together like this: Event.CLICK Event.MOUSEUP .
handleEvent			x
	Returns: Nothing
	This Netscape Navigator 4.0 method handles events captured with setCapture .
	Syntax: handleEvent( event ) , where event is an event type such as Event.CLICK .
load			x
	Returns: Nothing
	Loads a new document into the layer.
	Syntax: load( URL , width ) , where URL is the URL of the new document and width is the width in pixels of the new layer.
moveAbove			x
	Returns: Nothing
	Moves the current layer above another.
	Syntax: moveAbove( layer ) , where layer is the layer to move the current layer above.
moveBelow			x
	Returns: Nothing
	Moves the current layer below another.
	Syntax: moveBelow( layer ) , where layer is the layer to move the current layer below.
moveBy			x
	Returns: Nothing
	Moves a layer by a specified amount.
	Syntax: moveBy( changeInX , changeInY ) , where changeInX is the change in the X coordinate and changeInY is the change in the Y coordinate.
moveTo			x
	Returns: Nothing
	Moves a layer to a specified location relative to its container's coordinate system.
	Syntax: moveBy( X , Y ) , where X is the new X coordinate and Y is the new Y coordinate.
moveToAbsolute			x
	Returns: Nothing
	Moves a layer to a specified location relative to the page coordinate system.
	Syntax: moveToAbsolute( X , Y ) , where X is the new X coordinate and Y is the new Y coordinate.
releaseEvents			x
	Returns: Nothing
	This Netscape Navigator method releases event capture.
	Syntax: releaseEvents( eventTypeList ) . Here, eventTypeList holds a list of events to release, OR'ed together like this: Event.CLICK Event.MOUSEUP .
resizeBy			x
	Returns: Nothing
	Resizes a layer by a specified amount.
	Syntax: resizeBy( changeInX , changeInY ) , where changeInX is the change in the width and changeInY is the change in height.
resizeTo			x
	Returns: Nothing
	Resizes a layer.
	Syntax: resizeBy( X , Y ) , where X is the new width and Y is the new height.
routeEvent			x
	Returns: Nothing
	If you've turned on event capture in Netscape Navigator 4.0, this method enables you to route an event after you've worked on the event and want to pass it along to the next event handler.
	Syntax: routeEvent( event ) .

Table 16.4. The Events of the <LAYER> Element

Event	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
onblur			x
	Occurs when the layer loses the focus.
onfocus			x
	Occurs when the layer gets the focus.
onload			x
	Occurs when the layers and its contents are fully loaded.
onmouseout			x
	Occurs when the mouse leaves a layer.
onmouseover			x
	Occurs when the mouse moves over a layer.

Layers and the Mouse

A popular use for layers is to create mouseover effects. Here's an example that changes the background behind some text pink when the mouse moves over that text (Netscape Navigator 4.0 only, in order to use layers):

(Listing 16-08.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Using layers and the mouse          </TITLE>      </HEAD>      <BODY>  <LAYER BGCOLOR="white" TOP="40" LEFT="40"   ONMOUSEOVER="this.bgColor='pink'" ONMOUSEOUT="this.bgColor='white'" >  <H1>                  Using layers and the mouse              </H1>          </LAYER>      </BODY>  </HTML> 

You can see the results in Figure 16.6 in Netscape Navigator 4.0.

Figure 16.6. Using layers in Netscape Navigator 4.0.

Moving Layers On-the-Fly

Besides optical effects, you also can use layers to move specific elements in real time. Here's an example for Netscape Navigator 4.0 that steadily increments the left property of a layer, moving it to the right, when the user clicks a button:

(Listing 16-09.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Moving layers          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function moveLayer()   {   document.layers['layer1'].left = document.layers['layer1'].left + 5   if (document.layers['layer1'].left < 1000) {   setTimeout('moveLayer()', 40)   }   }  //-->          </SCRIPT>      </HEAD>      <BODY>          <H1>              Moving layers          </H1>           <DIV STYLE="POSITION:absolute; TOP:60; LEFT:0">              <IMG SRC="image1.jpg">          </DIV>  <LAYER NAME=layer1 left="0" top="60">   <IMG SRC="image2.jpg">   </LAYER>  <DIV STYLE="POSITION:absolute; TOP:140; LEFT:40">              <FORM>  <INPUT TYPE="BUTTON" VALUE="Move the layer"   ONCLICK="moveLayer()">  </FORM>          </DIV>      </BODY>  </HTML> 

You can see the results in Figure 16.7, where, although you can't see it, image 2 is moving to the right.

Figure 16.7. Moving layers in Netscape Navigator 4.0.