The <LAYER> and <ILAYER> Tags

The <LAYER> and <ILAYER> tags each start a new layer, and the </LAYER> and </ILAYER> tags end the layer.

Layers defined with the <LAYER> tag can be explicitly positioned by setting the LEFT and TOP attributes. If you do not set either of these attribute, they default to the LEFT and TOP values of the current position in the containing layer. For a layer at the top level, you can think of the document as the containing layer.

Layers defined with the <ILAYER> tag appear wherever they naturally fall in the flow of the document. They are both inflow, in that they occupy space in the document flow, and inline, in the sense that they share line space with other HTML elements. If you want an inflow layer to appear on a separate line, you can insert a break before the layer, or wrap the layer in the <DIV> tag.

<LAYER> and <ILAYER> Tag Parameters

The <LAYER> and <ILAYER> tags have these attributes:

NAME and ID

NAME=layername

ID=layername

The NAME parameter is an identification tag for the layer. The NAME must begin with an alphabetic character. (The ID parameter is the same as the NAME paramter.)

You can use the layer's name to refer to the layer from within HTML and external scripting languages such as JavaScript.

This attribute is optional; by default, layers are unnamed.

LEFT and TOP

LEFT=100 TOP=200

The LEFT and TOP parameters specify the horizontal and vertical positions of the top left corner of the layer within its containing layer, or within the document if it is at the top level. Both attributes are optional. The default values are the horizontal and vertical position of the tag's contents as if they were not enclosed in a <LAYER> tag.

For positioned layers the origin is the upper-left-hand corner of the document or containing layer, with coordinates increasing downwards and to the right. For example:

    <LAYER LEFT=20 TOP=100>

        This layer appears 20 pixels in from the left and 100 pixels 

       down from the top.

    </LAYER>

For in-flow layers, the origin is the layer's "natural" position in the flow, rather than the upper-left corner of the containing layer or page. For example:

    <P>Paragraph above layer</P>

    <ILAYER LEFT=2>

        <P>This paragraph is displaced 2 pixels to the right of 

        its normal position.</P>

        </ILAYER>

    <P>Paragraph below layer</P>

You can also use the LEFT and TOP attributes in the <ILAYER> tag to offset in-flow layers from their natural position in the flow. For example:

<P>This <ILAYER TOP=3>word</ILAYER> is nudged down 3 pixels.</P>

Rather than specify numerical constants for the position of a layer, you can use scripted expressions to position the layer. For example, you can position one layer relative to another.

The following example uses inline JavaScript code to define a layer "suspect1", and then defines another layer "suspect2" that is positioned 10 pixels below the bottom of the first suspect.

<LAYER NAME="suspect1">

    <IMG WIDTH=100 HEIGHT=100 SRC="suspect1.jpg">

    <P>Name: Al Capone

    <P>Residence: Chicago

</LAYER>

<LAYER NAME="suspect2" 

    LEFT=&{"&"};{window.document.layers['suspect1'].left;}; 

    TOP=&{"&"};{window.document.layers['suspect1'].top +

        document.layers['suspect1'].document.height + 10;};>

    <IMG WIDTH=100 HEIGHT=100 SRC="suspect2.jpg">

    <P>Name: Lucky Luciano

    <P>Residence: New York

</LAYER>

There are two particular points to notice in the previous example:

PAGEX and PAGEY

PAGEX=100 PAGEY=200

The PAGEX and PAGEY parameters specify the horizontal and vertical positions of the top left corner of the layer relative to the enclosing document (rather than the enclosing layer.)

SRC

SRC="htmlsource/meals/special.htm"

The SRC parameter specifies an external file that contains HTML-formatted text to be displayed in this layer.

The file specified by SRC can contain an arbitrary HTML document.

The source file can include JavaScript code. Any <LAYER> tags in the source file will be treated as child layers of the layer for which the source file is providing content.

The SRC parameter is particularly useful if you want to dynamically change the content of the layer. For example, a restaurant might have a web page that uses a layer to describe the special meal of the day. Each morning, after the chef has decided what the special is going to be for the day, he or she quickly edits the file "special.htm" to describe the meal.

The chef doesn't have to re-write the entire page just to update the information about the special of the day.

WIDTH

WIDTH=200

WIDTH=80%

The WIDTH parameter determines the width of the layer. The width can be expressed as an integer pixel value, or as a percentage of the width of the containing layer.

Note however that if the elements that cannot be wrapped, such as images, extend beyond the width specified, the actual width of the contents of the layer will expand accordingly.

This attribute is optional; by default, the layer contents wrap at the right boundary of the enclosing layer.

HEIGHT

HEIGHT=200

HEIGHT = 50%

The HEIGHT parameter determines the initial height of the clipping region of the layer. The height can be expressed as an integer pixel value, or as a percentage of the height of the containing layer (or the window for a top-level layer.)

Note however that if the contents of the layer do not fit inside the specified height, the layer will expand its height to include all its contents.

The main purpose of hte HEIGHT attribute is to act as the reference height for attribute values in its children layers that are specified using percentages.

This attribute is optional; by default, the layer height is the minimum height that contains all the layer contents.

CLIP

CLIP=20, 20, 50, 100

The CLIP parameters determines the clipping rectangle of the layer, that is, it defines the boundaries of the visible area of the layer.

The value is a set of 4 numbers, indicating in order, the left value, the top value, the right value, and the bottom value. The left and right values are specified as pixels in from the left, while the top and bottom values are specified as pixels down from the top of the containing document or layer.

Each of the 4 values are numbers of pixels. You can also specify the value as a set of 2 numbers, in which case the left and top values default to 0. For example:

CLIP=10,20

is equivalent to

CLIP=0,0,10,20

The CLIP attribute is optional. If the CLIP attribute is omitted, the clipping rectangle of a layer is determined by the values of WIDTH and HEIGHT.

By default, a layer expands to contain all of its content.

Z-INDEX, ABOVE and BELOW

Z-INDEX=3

ABOVE=layer1

BELOW=greenlayer

These three parameters specify the z-order (stacking order) of layers. If you set one of these parameters, it overrides the default behavior of placing new layers on top of all existing layers. Only one of the Z-INDEX, ABOVE, or BELOW attributes can be used for a given layer. Note: in pre-release 4, only positive values for z-index are supported.

The Z-INDEX attribute allows a layer's z-order to be specified in terms of an integer. Layers with higher-numbered Z-INDEX values are stacked above those with lower ones. Positive Z-INDEX values cause the layer to be stacked above its parent while negative values cause the layer to be stacked below its parent.

The ABOVE attribute specifies the layer immediately on top of a newly created layer; that is, the new layer is created just below the layer specified by the ABOVE attribute.

Similarly, the BELOW attribute identifies the layer immediately beneath the newly created layer. For either attribute, the named layer must already exist. Forward references to other layers result in default layer creation behavior (as if the ABOVE or BELOW attribute had not appeared).

Currently all nested layers exist above their parent layer in the stacking order. The Z-INDEX, ABOVE and BELOW values are relative to sibling layers, that is, other layers that have the same parent layer.

VISIBILITY

VISIBILITY=SHOW

VISIBILITY=HIDE

VISIBILITY=INHERIT

The VISIBILITY parameter determines whether the layer is visible or not. A value of HIDE hides the layer; SHOW shows the layer; INHERIT causes the layer to have the same visiblity as its parent layer. For top level layers (that is, layers that are not nested inside other layers, a value of INHERIT has the same effect as SHOW since the body document is always visible.)

This attribute is optional. By default, a layer has the same visibility as its parent layer, that is, the value of the VISIBILITY attribute is INHERIT.

Remember that even if the visibility of a layer is is set to SHOW, you will only be able to see the layer if there are no other visible, opaque layers stacked on top of it.

BGCOLOR

BGCOLOR="#00FF00"

BGCOLOR="green"

This parameter determines the solid background color of a layer, similar to the BGCOLOR attribute of the <BODY> tag. The BGCOLOR is either the name of a standard color (such as "red") or an RGB value, such as #334455 (which has a red hexadecimal value of 33, a green hexadecimal value of 44 and a blue hexadecimal value of 55.)

This attribute is optional; by default, a layer is transparent -- layers below it show through the transparent areas of the layer's text and other HTML elements.

BACKGROUND

BACKGROUND="images/dogbg" 

This parameter controls the tiled image backdrop of a layer, similar to the BACKGROUND attribute of the <BODY> tag. The value of BACKGROUND is the URL of a backdrop image.

This attribute is optional; by default, a layer is transparent -- layers below it show through the transparent areas of layer's text and other HTML elements.

OnMouseOver, OnMouseOut

OnMouseOver="highlight; return false;" 

OnMouseOut="dehighlight; return false;" 

These are event handlers. Their values must be functions or inline Javascript code. The onMouseOver handler is invoked when the mouse enters the layer, and the onMouseOut handler is invoked when the mouse leaves the layer.

through the transparent areas of layer's text and other HTML elements.

OnFocus, OnBlur

OnFocus="function1; return false;" 

OnBlur="function2; return false;" 

These are event handlers. Their values must be functions or inline Javascript code. The onFocus handler is invoked the layer gets keyboard focus, and the onBlur handler is invoked when the layer loses keyboard focus.

OnLoad

OnLoad="dosomething; return false;" 

This is an are event handler. Its values must be a function or inline Javascript code. The onLoad handler is invoked when the layer is loaded, regardless of whether the layer is visible or not.