Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

The <LAYER> and <ILAYER> Elements

Chapter 24 showed you some examples of content positioning. Specifically, you saw how you could position an element with respect to the upper-left corner of the browser window (absolute positioning) or with respect to the location where the element would ordinarily be placed (relative positioning). In addition to being able to specify the x and y coordinates of where the element should appear, you were also able to control a z coordinate, which determined how the elements overlap. You could think of each element as sitting on a transparent sheet that you could move around the browser screen and stack one on top of the other to create different effects. Netscape’s term for these transparent sheets is layers. You can implement layers in Navigator by using the CSS specification for content positioning or by using the proprietary <LAYER> and <ILAYER> elements to do absolute and relative positioning, respectively. This section introduces you to the <LAYER> and <ILAYER> tags and their many attributes.

---

NOTE:  <LAYER> and <ILAYER> take the same set of attributes, so this section focuses only on using the <LAYER> tag. The <ILAYER> (inline layer) tag behaves the same as the <LAYER> tag. Although the <ILAYER> allows for positioning of content relative to where the content would appear in the flow of the document, the <LAYER> tag is used for absolute positioning of content with respect to the upper-left corner of the browser window.

---

The <LAYER> tag is a container tag that can take the following attributes:

•  BACKGROUND—The BACKGROUND attribute is set equal to the URL of an image to tile in the background of the layer. In the absence of a background image or background color (see BGCOLOR next in this list), the layer background is transparent and enables any layers stacked beneath it to show through.

•  BGCOLOR—You can set BGCOLOR equal to a reserved English-language color name, an RGB triplet, or a hexadecimal triplet that specifies a background color for the layer. Otherwise, the layer background is transparent.

•  SRC—You have two ways to place content in layers. You can place the content between the <LAYER> and </LAYER> tags or you can import the content from another file by using the SRC attribute. SRC is set equal to the URL of the document you want to import.

•  ID—The ID attribute is used to assign a unique name to a layer so that it can be referenced in other <LAYER> tags or in JavaScript code.

•  LEFT and TOP—LEFT and TOP are set equal to the number of pixels from the upper-left corner of the browser screen where the layer should begin. These two attributes permit exact positioning of the layer on the screen. Note that if you’re using <ILAYER>, LEFT and TOP specify displacement from the left of and below the point where the layer would ordinarily start, rather than from the upper-left of the browser screen. Also, when using relative positioning, you can set LEFT and TOP equal to negative values.

•  Z-INDEX, ABOVE, and BELOW—These three attributes help to specify how the layers stack up along the z-axis (the axis coming out of the browser screen toward the user). Z-INDEX is set equal to a positive integer, and a layer with a larger Z-INDEX value will appear stacked on top of layers that have lower Z-INDEX values. You can place a new layer above or below an existing named layer by setting ABOVE or BELOW equal to the named layer’s name. In the absence of Z-INDEX, ABOVE, or BELOW attributes, new layers are stacked on top of old layers.

•  VISIBILITY—VISIBILITY can take on one of the following three values: SHOW, HIDE, or INHERIT. If a layer’s VISIBILITY is set to SHOW, the content of the layer will be displayed. Setting VISIBILITY to HIDE conceals the layer content. A VISIBILITY value of INHERIT means that the layer will have the same VISIBILITY behavior as its parent layer.

•  CLIP—The clipping region of a layer is a rectangular area that defines how much of the layer content is visible. You can control the size of the clipping region by using the CLIP attribute. CLIP is set equal to a comma-delimited list of four numbers that represent the coordinates of the upper-left and lower-right corners of the clipping region. Measurements for clipping region coordinates are taken with respect to the upper-left corner of the layer. By default, the clipping region is large enough to display all the contents of the layer.

•  HEIGHT—In the absence of a CLIP attribute, HEIGHT controls the height of the clipping region. HEIGHT may be set equal to a number of pixels or to a percentage of the layer’s height.

•  WIDTH—The WIDTH attribute specifies the width at which layer contents begin to wrap to new lines. Like HEIGHT, you can set WIDTH equal to a number of pixels or to a percentage of the layer width.

•  PAGEX and PAGEY—Because it is possible to nest layers inside of layers, you may end up in a situation where you want to position a layer with respect to the entire browser screen and not its parent element (the layer that contains it). In such a case, you can use the PAGEX and PAGEY attributes to specify where the layer should begin with respect to the upper-left corner of the browser screen.

The <LAYER> tag’s extensive set of attributes makes many interesting effects possible. By changing the size of the clipping region, for example, you can show or hide different parts of the layer’s content. You can change the Z-INDEX of a layer to make it rise above or drop below other layers. You could even adjust the TOP and LEFT values to make a layer move to a new position. All these changes are possible thanks to the capability to use JavaScript to modify layer properties. The following section provides some examples of that. To complete the discussion of the <LAYER> tag’s syntax, however, the following is a list of JavaScript event handlers you can use with the <LAYER> tag: