<LAYER>

The <LAYER> element (currently only supported by the Navigator component of Netscape Communicator) allows discrete 'layers' of documents to be produced. It was introduced in Navigator 4.0, pre-empting the widespread adoption of standards based positioning (using style sheets), as supported by Internet Explorer 4.0 (and also Navigator 4.0). The standards based style sheet positioning mechanism is preferable to use of the <LAYER> element. For details, see the Style Sheets section for details.

Layers can contain any normal HTML content and can be exactly positioned in (or even outside of) the browser window and be displayed overlapping one another to create complex layouts in HTML documents. There are two basic types of layers, one that is given a fixed position (using the <LAYER> element) and one that can be placed relative to its position in the flow of document text (using the <ILAYER> element). Each defined layer in a document can be controlled by JavaScript, to produce almost limitless visual effects. For details, see the Layer Object in the Scripting Reference.

The <LAYER> element accepts the following attributes :

NAME
The NAME attribute can be supplied to uniquely identify the layer for scripting purposes. By default, all layers are unnamed.

LEFT
LEFT specifies the layers exact x coordinate, in pixels, where "0" (the default value) is the left-hand edge of the current browser window. Care should be taken in specifying the LEFT (and indeed TOP attribute) as you cannot guarantee the size of the users window. However, with JavaScript 1.2 (supported in Communicator) it is possible to dynamically resize and move any browser windows. See the Layer Object for more information. The LEFT attribute can be given negative, or large positive values, initially displaying the layer off the current browser window (useful for when scripting transition effects with layers).

TOP
The TOP attribute specifies the exact y coordinate in pixels, where "0" (again, the default value, as with the LEFT attribute) is the top-most edge of the current browser window. As with the LEFT attribute, care should be taken, unless you are dynamically resizing the browser window for the layered effect. The TOP attribute can be set with negative, or large positive values, initially displaying the layer outside the current browser window (useful for scripting layer transition effects).

SRC
The SRC attribute can be used to reference a separate document that contains the content of the layer. Currently (for Communicator pre-release 2), the document referenced must not include <HEAD> or <BODY> elements. Referencing external layer source files may be extremely useful if you provide the same frequently changing layer in several documents. As with Client Side Image Maps, only the layer source file needs to be altered to update all the documents that contain the particular layer. Note that there is currently no way to set the height of a particular layer (just the width - see below), which could affect the layout of any other layers in documents if a layer using an external source has its contents size drastically changed.

Z-INDEX
The Z-INDEX attribute is mutually exclusive with the ABOVE and BELOW attributes. It is supplied with a numerical value which determines the layers z-order setting (which determines how various layers overlap each other). The z-order can be thought of as the z axis of the browser window, with increasing values as the axis originates from the page out towards the user. Hence, a layer with a Z-INDEX of 2 would overlap a layer whose Z-INDEX is 1. The differences need not be incremental values, basically, with any number of layers, the one with the highest Z-INDEX will be displayed above the others.

ABOVE
The ABOVE attribute (mutually exclusive with Z-INDEX and BELOW attributes) can be used to specify the layer immediately above the current layer. For example,

<LAYER NAME="Red"> . . . Layer content </LAYER> <LAYER NAME="Green" ABOVE="Red"> . . . Layer content </LAYER>

The layer NAMEd "Red" would be displayed on-top of the layer NAMEd "Green". Note that currently, any layer specified as being ABOVE another, must be defined before the lower layer in the document.

BELOW
Similar to the ABOVE attribute (and mutually exclusive with it and the Z-INDEX attribute), the BELOW attribute specifies the layer to be displayed immediately below the current layer, with the same restrictions as the ABOVE attribute.

WIDTH
The WIDTH attribute can be specified (with a pixel value) to set the width of the layer, to determine how the content of the layer is wrapped within the layer. Layer heights are automatically defined according to the content of the layer.

CLIP
The CLIP attribute can be used to specify a certain portion of the layer as being visible. Anything outside the CLIP region is transparent and won't be displayed. It accepts 4 pixel values (comma delimited) which are used to set the CLIP rectangles left, top, right and bottom coordinates. Left and right values start from the left hand edge of the layer, while top and bottom values start from the top of the layer. If only two values are supplied, then the left and top coordinates are set to 0. For example :

<LAYER CLIP="10,10,50,20"> . . .

specifies a clipping region of 40 (x direction) by 10 (y direction) pixels for the layer, starting at the position 10,10 (x,y), while :

<LAYER CLIP="50,20"> . . .

specifies a clipping region of 50 (x direction) by 20 (y direction) pixels for the layer, starting at the position 0,0 (x,y).

VISIBILITY
The VISIBILITY attribute controls whether the layer is currently visible or not. It can accept values of show, hide or inherit. Show and hide explicitly set the layers visibility, while inherit makes the current layer inherit the VISIBILITY of its parent layer(s) (layers can be nested). If the current layer is a parent layer (or contains no child layers), 'show' and 'inherit' are identical, since the layer will be visible (unless VISIBILITY="hide" is used).

BGCOLOR
BGCOLOR can be used to set the background colour of the current layer. By default, layers are transparent, specifying a BGCOLOR makes the layer opaque, using the colour specified. Any standard rrgggbb triplet, or a named colour can be used. For more details on document colouring, see the <BODY> element.

BACKGROUND
The BACKGROUND attribute can be used to reference a background image for the layer. Note that is the image used is wider than the layers WIDTH attribute value (see above), then the width of the layer will be extended to display the image fully.

Layer examples
The following (very simple) HTML fragment specifies a number of different document layers, mainly using ABOVE and BELOW attributes to set the z-order of the layers. Style sheet settings and script functions have not been included for brevity. For more details about JavaScript interactions with layers, see the Layer Object and for style sheet information, see the Style Sheets topic.

. . . <LAYER LEFT="-50" TOP="100" NAME="QMark"> ? </LAYER> <LAYER LEFT="25" TOP="100" NAME="What" ABOVE="QMark"> What </LAYER> <LAYER LEFT="135" TOP="100" NAME="Do" BELOW="QMark"> do </LAYER> <LAYER LEFT="187" TOP="100" NAME="You" ABOVE="QMark"> you </LAYER> <LAYER LEFT="264" TOP="100" NAME="Want" BELOW="QMark"> want </LAYER> <LAYER LEFT="365" TOP="100" NAME="To" ABOVE="QMark"> to </LAYER> <LAYER LEFT="100" TOP="125" NAME="Know" BELOW="QMark"> know </LAYER> <LAYER LEFT="210" TOP="125" NAME="Today" ABOVE="QMark"> today </LAYER> . . .

can be used to create the following effect :

What do you want to ? know today

NOTE : As you've probably guessed, the functional example above is not using layers, but Style Sheet positioning of various elements to achieve the same effect as using layers in Netscape Communicator.

The <LAYER> element does have various properties and methods that can be manipulated and invoked in a document. These are accessed through the Layer Object and are only supported by Netscape 4.0 and above.