<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
<LAYER> element accepts the following attributes :
NAME attribute can be supplied to uniquely identify the layer for scripting purposes. By default, all layers are unnamed.
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
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 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 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
<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 attribute is mutually exclusive with the
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 attribute (mutually exclusive with
BELOW attributes) can be used to specify the layer immediately above the current layer. For example,
. . . Layer content
<LAYER NAME="Green" ABOVE="Red">
. . . Layer content
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.
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
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 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 :
. . .
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 :
. . .
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 attribute controls whether the layer is currently visible or not. It can accept values of
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 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
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.
The following (very simple) HTML fragment specifies a number of different document layers, mainly using
. . .
<LAYER LEFT="-50" TOP="100" NAME="QMark">
<LAYER LEFT="25" TOP="100" NAME="What" ABOVE="QMark">
<LAYER LEFT="135" TOP="100" NAME="Do" BELOW="QMark">
<LAYER LEFT="187" TOP="100" NAME="You" ABOVE="QMark">
<LAYER LEFT="264" TOP="100" NAME="Want" BELOW="QMark">
<LAYER LEFT="365" TOP="100" NAME="To" ABOVE="QMark">
<LAYER LEFT="100" TOP="125" NAME="Know" BELOW="QMark">
<LAYER LEFT="210" TOP="125" NAME="Today" ABOVE="QMark">
. . .
can be used to create the following effect :
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.
<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.