HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Figure 7.31  Rendering, by Netscape Navigator 4, of the document listed in Figure 7.30. Note how the layers are “clipped” to the window defined by the CLIP attribute.

JavaScript Control of Layer Positions

Layer elements can create sidebar text and other positioned text content, although they are rarely used for this purpose—it is hard to get the positioning just right, particularly when a user can simply change the font size or select fonts that don’t work with the desired positioning.

Layers are more commonly used to create movable layers. In Navigator 4, JavaScript programs can interact with layers, can toggle the value of the VISIBILITY attribute (to “hide” or “display” the element), or can change the position of a layer, causing it to move. Indeed, JavaScript code can let the user drag layered windows using the mouse to move and reposition layers. This is well demonstrated at the Netscape home page (www.netscape.com)—provided you have Netscape Navigator 4, of course.

LAYER and ILAYER Elements: Vertically Positioned Display Layers

ABOVE=“layer–ID” (optional; only one of BELOW, Z–INDEX, or ABOVE is allowed)Specifies the ID value of the layer above the current layer—that is, when the layer is created, it is created just below the layer referenced by ABOVE. The referenced layer must already exist. If it does not, then the layer is stacked in its natural order—that is, it appears on top of all layers that precede it in the document and under any subsequent layers.

BACKGROUND=“url” (optional) Specifies the URL of an image to tile on the background of the layer. This is placed on top of any background color assigned to the layer. If the image is transparent and the background color is not specified, then the content of the main document or any underlying layer shows through the transparent regions of the image.

BGCOLOR=“color”(optional) Specifies the background color for the layer. If a color is not specified, then the layer is transparent.

BELOW=“layer–ID” (optional; only one of BELOW, Z–INDEX, or ABOVE is allowed)Specifies the ID value of the layer below the current layer—that is, when the layer is created, it is created just above the layer referenced by BELOW. The referenced layer must already exist—if it does not, then the layer is stacked in its natural order—that is, it appears on top of all layers that precede it in the document and under any subsequent layers.

CLIP=“num1, num2, num3, num4,” or “num3, num4” (optional) Specifies the clipping box for the layer: Regions of the layer inside the clipping box are displayed, while regions outside the box are invisible, and do not obscure underlying layers or content. The value is a set of four numbers, representing the position of the left edge (num1), top edge (num2), right edge (num3), and bottom edge (num4) of the clipping region, in pixels, relative to the top and left edge of the layer. If only two numbers are present, then these represent the position of the right and bottom edges, the top and left edges being assigned the default value zero.

HEIGHT=“number,” “number%” (mandatory) Specifies the height of the layer. This can be an integer, which gives the height in pixels, a percentage, which gives the height as a percentage of the height of the parent layer, or as a height of the window height if the attribute applies to a top–level layer. The default height is the minimum size required to contain the layer content.

ID=“layer–ID” (optional) Specifies the ID value of the layer. This allows the layer to be referenced by ABOVE or BELOW attributes. Note that you cannot use ID–based CSS selectors to define formatting properties for a layer element.

LEFT=“number,” “number%” (optional; only one of PAGEX or LEFT may be present)Specifies the position of the left–hand edge of the layer, relative to the left edge of the parent layer (if the layer is within another layer) or relative to the inner–left border of the browser window for a layer within the document body. If not specified, the default position places the element at the position it would occupy if the content were not inside a LAYER. If no x position is specified (either by PAGEX or LEFT), the default position places the left–edge element at the position it would occupy if the content were not inside a LAYER.

NAME=“layer–ID” (optional) Specifies a name for the layer. This allows for JavaScript access to the properties of the layer, and in that role is a synonym for ID. JavaScript can be used to hide, reveal, or move the layer, as discussed in the section on document scripting.

PAGEX=“number” (optional; valid with LAYER only; only one of PAGEX or LEFT may be present)Specifies the position of the left–hand edge of the layer relative to the left edge of the parent document. This is similar to LEFT, except that the position is always measured away from the edge of the browser window, regardless of any parent layers. If no x position is specified (either by PAGEX or LEFT), the default position places the left edge of the element at the position it would occupy if the content were not inside a LAYER.

PAGEY=“number” (optional; valid with LAYER only; only one of PAGEY or TOP may be present)Specifies the position of the top edge of the layer, relative to the top edge of the parent document. This is similar to TOP, except that the position is always measured away from the edge of the browser window, regardless of any parent layers. If no y position is specified (either by PAGEY or TOP), the default position places the top edge of the element at the position it would occupy if the content were not inside a LAYER.

SRC=“url” (optional) Specifies a URL containing HTML markup to display in the layer. If SRC is specified, the content of the LAYER or ILAYER is hidden, and the resource referenced by the URL is displayed. However, if the URL is invalid, then the SRC–specified resource is ignored, and the browser displays the content of the LAYER or ILAYER.

TOP=“number,” “number%” (optional; only one of PAGEY or TOP may be present)Specifies the position of the top edge of the layer, relative to the top edge of the parent layer (if the layer is within another layer) or relative to the top inner edge of the browser window for a layer within the document body. If no y position is specified (either by PAGEY or TOP), the default position places the top edge of the element at the position it would occupy if the content were not inside a LAYER.

VISIBILITY=“hidden “, “inherit,” “show” (optional) Specifies the display property of the element. The value “hidden” hides the layer (it is not visible, and does not hide other layers). The value “inherit” means that the layer has the same visibility as the layer’s parent (a LAYER can nest within a LAYER). The value “show” causes the layer to be displayed. The default is “show.”