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 NAME
d "Red" would be displayed on-top of the layer NAME
d "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">
<SPAN CLASS="QMark">?</SPAN>
</LAYER>
<LAYER LEFT="25" TOP="100" NAME="What" ABOVE="QMark">
<SPAN CLASS="What">What</SPAN>
</LAYER>
<LAYER LEFT="135" TOP="100" NAME="Do" BELOW="QMark">
<SPAN CLASS="Do">do</SPAN>
</LAYER>
<LAYER LEFT="187" TOP="100" NAME="You" ABOVE="QMark">
<SPAN CLASS="You">you</SPAN>
</LAYER>
<LAYER LEFT="264" TOP="100" NAME="Want" BELOW="QMark">
<SPAN CLASS="Want">want</SPAN>
</LAYER>
<LAYER LEFT="365" TOP="100" NAME="To" ABOVE="QMark">
<SPAN CLASS="To">to</SPAN>
</LAYER>
<LAYER LEFT="100" TOP="125" NAME="Know" BELOW="QMark">
<SPAN CLASS="Know">know</SPAN>
</LAYER>
<LAYER LEFT="210" TOP="125" NAME="Today" ABOVE="QMark">
<SPAN CLASS="Today">today</SPAN>
</LAYER>
. . .
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.
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.
© 1995-1998, Stephen Le Hunte
file: /Techref/language/html/ib/Block_Level_Elements/layer.htm, 13KB, , updated: 2004/3/1 15:47, local time: 2024/12/30 10:51,
18.190.239.189:LOG IN
|
©2024 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions? <A HREF="http://massmind.ecomorder.com/techref/language/html/ib/Block_Level_Elements/layer.htm"> <LAYER></A> |
Did you find what you needed? |
Welcome to ecomorder.com! |
Welcome to massmind.ecomorder.com! |
.