Main Index |
Top Of Tree |
Tag Index |
Tag History
- What is it?
- This new tag created by Netscape allows an author to define
precisely positioned 2-dimensional layout consisting of overlapping
layers of transparent or solid content on a web page. All the content
between the opening and closing LAYER tags can be treated as a single
item of content that can be moved and altered in various ways.
Layers can have a stacking order that allows a virtual third
z-dimension to be defined. Using this, layers can appear on top of
other layers. Layers can also be transparent or solid; if
transparent, the content of underlying layers shows through it.
As if that wasn't enough, background colors or tiled images can also be
specified for a layer (setting these attributes for a layer will
negate the its transparency property and layers below it will be
obscured.)
Layers can be nested and moved in a dynamic fashion via scripting.
This type of layer defining explicit positioning is also known as
an 'out-of-flow' or 'positioned' layer. An alternate method of defining
a layer is through the use of the ILAYER
tag, which allows the definition of layers whose position follows the
flow of the page [like an image] - this is known as an 'inflow layer'.
Note: This tag is curious in that it mirrors
the functionality of the capabilities now offered through the
positioning property extensions
for Cascading Style Sheets. The
LAYER and ILAYER tags are essentially
tag-based solutions to the same functionality that these CSS extensions
provide. It is interesting to note that support for CSS positioning and
the LAYER/ILAYER tags appeared in Netscape at the same time. However,
CSS positioning has been created with the official sanctioning of the W3C,
while it is unlikely that LAYER/ILAYER will ever gain such support.
- Attributes
- Above
- 2 | 3
| 3.2 | IE
| M | N4B1
- Required? No
- Description:
This attribute specifies the name of the layer that will occur directly
above the current layer in the layer stacking order (z-order.) 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. References to layers not yet defined
result in default layer creation behavior - i.e. the new layer will
be placed on top of all existing layers.
- Values: An existing valid alphanumeric
layer NAME value.
- Background
- 2 | 3
| 3.2 | IE
| M | N4B1
- Required? No
- Description:
This specifies a background image to be tiled on a layer. Default
behavior for a layer is to be transparent.
- Values: An absolute or relative URL.
- Below
- 2 | 3
| 3.2 | IE
| M | N4B1
- Required? No
- Description:
This attribute specifies the name of the layer that will occur directly
below the current layer in the layer stacking order (z-order.) 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. References to layers not yet defined
result in default layer creation behavior - i.e. the new layer will
be placed on top of all existing layers.
- Values: An existing valid alphanumeric
layer NAME value.
- Bgcolor
- 2 | 3
| 3.2 | IE
| M | N4B1
- Required? No
- Description:
This specifies the background color of the layer. Default behavior
for a layer is to be transparent.
- Values:
An RGB triplet or a special
Color name.
- Clip
- 2 | 3
| 3.2 | IE
| M | N4B1
- Required? No
- Description:
This parameter specifies the clipping rectangle (viewable area) of
the layer, which can be less than the width and height of the content
of the layer. If the CLIP attribute is omitted, the clipping rectangle
of a layer is the same size as the HTML content of the layer. A layer
will expand to contain all of its content by default.
- Values:
A comma separated list of integer values representing the absolute pixel
coordinates of the rectangle. Origin values are at the top, left corner
and grow as one moves down or to the right.
Format 1: CLIP="left,top,right,bottom"
Format 2: CLIP="right,bottom" ['left' and
'top' values default to zero.]
- Left
- 2 | 3
| 3.2 | IE
| M | N4B1
- Required? No
- Description:
This specifies the coordinate position of the left side boundary
position of the current layer in relation to a parent layer if present.
if no parent layer exists, the value is relative to the main document window.
- Values:
Integer values specifying screen position or an HTML scripting
expression to position one layer relative to another.
- Name
- 2 | 3
| 3.2 | IE
| M | N4B1
- Required? No
- Description:
This attribute specifies the name of the layer in order to
identify or reference it from other layers or scripting languages.
Layers are unnamed by default.
- Values:
An alphanumeric string. Must begin with an alphabetic character.
- PageX
- 2 | 3
| 3.2 | IE
| M | N4B3
- Required? No
- Description:
This specifies the absolute horizontal (X) coordinate position of the left
boundary position of the current layer in relation to the document window
(this differs slightly in definition from the LEFT attribute.)
- Values:
Integer values specifying screen position or an HTML scripting expression.
- PageY
- 2 | 3
| 3.2 | IE
| M | N4B3
- Required? No
- Description:
This specifies the absolute vertical (Y) coordinate position of the top
boundary position of the current layer in relation to the document window
(this differs slightly in definition from the TOP attribute.)
- Values:
Integer values specifying screen position or an HTML scripting expression.
- Src
- 2 | 3
| 3.2 | IE
| M | N4B3
- Required? No
- Description:
This attribute specifies the URL of an HTML 'sub-document' to be inserted
in to the layer. The effect is similar to the
IFRAME tag implemented by Internet Explorer.
- Values:
Either an absolute or relative URL.
- Top
- 2 | 3
| 3.2 | IE
| M | N4B1
- Required? No
- Description:
This specifies the coordinate position of the top boundary
position of the current layer in relation to a parent layer if present.
if no parent layer exists, the value is relative to the main document window.
- Values:
Integer values specifying screen position or an HTML scripting
expression to position one layer relative to another.
- Visibility
- 2 | 3
| 3.2 | IE
| M | N4B2
- Required? No
- Description:
This attribute specifies whether the layer is visible or not. A layer
will have the same visibility as its parent layer by default. Even if
the visibility of a layer is set to SHOW, a layer can only be seen if
there are no other visible, solid layers stacked on top of it. For top
level 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.
- Values:
show
[Shows the layer]
hide
[Hides the layer]
inherit
[The layer will have the same visibility as its parent layer]
- Width
- 2 | 3
| 3.2 | IE
| M | N4B1
- Required? No
- Description:
This parameters specifies the width of the layer's content. Specifically,
it controls the right margin of the layer for wrapping purposes.
Some elements may not be 'wrappable' (like images) and extend beyond
the width specified. Layer contents wrap at the right boundary of the
enclosing block by default.
- Values: Positive integers representing
a pixel width.
- Z-index
- 2 | 3
| 3.2 | IE
| M | N4B1
- Required? No
- Description:
This attribute allows a layer's stacking order (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 will cause the layer to be stacked below its parent. This
attribute 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 any given layer.
- Values: Positive integers (zero inclusive.)
Event Handler Attributes
- [For more information on Event Handlers, please see the
SCRIPT page.]
- onBlur
- 2
| 3 | 3.2
| IE | M
| N4B3
- Required? No
- Description:
A blur Event Handler executes Script code when a layer loses keyboard
focus.
- Values: Script statements or an
external function call.
- onFocus
- 2
| 3 | 3.2
| IE | M
| N4B3
- Required? No
- Description:
A focus Event Handler executes Script code when a layer receives
input focus by tabbing with the keyboard or clicking with the mouse.
- Values: Script statements or an
external function call.
- onLoad
- 2
| 3 | 3.2
| IE | M
| N4B3
- Required? No
- Description:
This attribute executes Script code with the completion of loading
of the layer.
- Values: Script statements or an
external function call.
- onMouseOver
- 2
| 3 | 3.2
| IE | M
| N4B3
- Required? No
- Description:
A mouseOver Event Handler executes Script code once each time the
mouse pointer moves over a layer from outside the layer.
- Values: Script statements or an
external function call.
- onMouseOut
- 2
| 3 | 3.2
| IE | M
| N4B3
- Required? No
- Description:
A mouseOut Event Handler executes Script code once each time the
mouse pointer exits from the bounds of a layer from inside the
layer.
- Values: Script statements or an
external function call.
Style Sheet Attributes
[More on Cascading Style Sheets]
- Class
- 2 | 3
| 3.2 | IE
| M | N4B2
- Required? No
- Description:
This represents an assigned semantic classification grouping(s) for the
current tag.
- Values:
Given as a comma separated list of alphanumeric characters. Class names
may contain spaces (multiple consecutive spaces treated as a single
space.)
- ID
- 2 | 3
| 3.2 | IE
| M | N4B2
- Required? No
- Description:
This assigns an alpha-numeric identifier that is unique
to this tag instance. Style sheets may use this attribute to reference
the current instance of this tag. Hyperlinks may also use this identifier
to serve as a destination.
- Values:
An alphanumeric string - initial character must be a letter followed
by alphabetic characters, digits, "-" or "."
characters. The allowable set of alpha-characters is restricted to the
A-Z and a-z set.
- Style
- 2 | 3
| 3.2 | IE
| M | N4B3
- Required? No
- Description:
This attribute is a text string that provides rendering style
information for the current tag.
- Values:
Please see the description of
inline styles for more
information on how to use this attribute and its
possible values.
- Example
-
<layer NAME="two" LEFT=40 TOP=40
Z-INDEX=2><font SIZE=7
COLOR="#0000ff">Two</font></layer>
<layer NAME="one" LEFT=25 TOP=25
Z-INDEX=1><font SIZE=7
COLOR="#ffff00">One</font></layer>
<layer NAME="three" LEFT=55 TOP=55
Z-INDEX=3><font SIZE=7
COLOR="#ff0000">Three</font></layer>
- Parent Model
- %Block Format
Parent% |
%Multimedia
Parent% |
<Body> |
<Basefont>
- Content Model
- %Text% |
%Anchors% |
%Virtual Formatting% |
%Physical Formatting% |
%Line Break Content% |
%Multimedia Content% |
%Block Content% |
<address> |
<basefont> |
<Hx>
Tips & Tricks
- DTD Note: This tag is a nestable block tag,
most clearly like the DIV tag. Until I experiment with this tag some or some
official behavioral interaction documentation appears, it will be treated in
the same method as the DIV tag is.
- DTD Note: Since the DTD behavior is preliminary,
I have held off including the tag in the BLOCK tag groupings. Consider the %Block
Format Parent% and %Block Format Content% groups to contain the LAYER tag if
a full behavioral model is desired.
- Note: It appears that content pointed to by the SRC attribute should be
a complete HTML document.
Browser Peculiarities
- Using Javascript scripting to control LAYER behavior is not
supported in Netscape 4.0 Beta 1
Boring Copyright Stuff...