|
Unfortunately, the Netscape <LAYER> tag was not copied by
Microsoft, who chose their own solution to animation and overlaying
text. In addition it's not endorsed by the W3C, so it's effectively
dead. Netscape themselves have abandoned their child in later versions
of NN.
Let's take a brief peek at Netscape layers:
In order to make a layer, you use the <LAYER> or <ILAYER>
tag. Each has its corresponding (</LAYER> or </ILAYER>) closure.
Between the tag and its closure, you put HTML code that goes to make
up the layer. The really cute thing is that you can then freely move
the layer around - over or under the other layers that make up the
document. An easy way to say which layer goes over what is simply to
use a Z-INDEX attribute for each layer. This sounds formidable,
but it aint! Choose a positive number, say 1. Say z-index="1"
in the LAYER tag of the window you want to be furthest in the background.
Then say z-index="2" for the layer that is in front of this,
and so on. Only the name z-index is formidable!
What's the difference between a layer and an ilayer? The layer is
'fixed' (and separate), the ilayer is part of the natural flow of
a document.
Probably the most important part of getting your layers to work well
is to plan them beforehand. What will be in front of what? What is
transparent, and what is opaque? Once you've done this the rest is
easy. Here's the rest:
Layer transparency
Layers are by default transparent. If you want a layer to be opaque,
then simply specify a BGCOLOR in the LAYER tag. But remember that
if you do this, all layers behind this one will be invisible! You
can also make only part of a layer opaque - look at our example again,
and move the red ball down and right - see how the central controls
have an opaque background, because we specified a background colour
of white for the table that contains them! You can also specify a
background image for a layer - just say BACKGROUND="img.gif" or
whatever in the layer tag. You can specify layer visibility using
the visibility="show" instruction inside the layer tag.
Positioning a layer
Not only can you move a layer around - you can also specify its starting
position. We do so by specifying the TOP and LEFT coordinates of the
layer - these position the top left corner at the stated pixel coordinates.
We actually used this in our example (view the source), positioning the
layer containing the red ball slightly down and to the right.
Limiting the layer
There are several ways of limiting the layer's extent:
- You can define its width (in pixels or as a percent of screen
width) using (for example) width="20%";
- You can define its clipping rectangle. This takes
four arguments thus:
clip="20,50,150,100"
What the above will do is take the layer as it would normally
be displayed, and then clip 20 pixels off the left margin, 50
off the top, 150 off the right and 100 off the bottom margins.
As you'll often not want to clip the top and left margins,
there's another infernally helpful format (yawn):
clip="150,100"
- if you include just two numbers, the assumption is that
they specify the right and bottom clipping margins, with the
left and top margins set to zero.
The clip object has six properties: clip.bottom, clip.top,
clip.left, clip.right as well as clip.height and clip.width. {Further
details are obscure}.
Here are all the attributes that you can use in a layer:
LAYER attributes (JavaScript 1.2)
(and object properties) |
| Attribute (an example) |
What it means |
| bgColor="#FFFFFF"
| Set background colour to opaque, and white. Similar
is background which is used to set a background image.
|
| clip="20,50,150,100"
| Set clipping rectangle as described above. (The corresponding
object has six properties - top, left, bottom, right, height, width)
|
| left="25" top="2%"
| Set offset of layer in pixels or percentage - top is from
top margin, left from left margin of parent layer.
Synonyms for the properties Layer.left and Layer.top are x and
y!
|
| visibility="show"
| layer is visible; the converse is "hide"; another option is "inherit".
|
| width="20%"
| width of frame (as percent of parent, or in pixels).
Width is not directly a property of the
layer object, but rather its clip property - there is no
Layer.width property.
|
| z-index="1"
| A positive integer which says which frame is in front
(frames with bigger z-indices are in front of those with smaller)
Similar are above and below which identify the
frame objects above and below the current one.
Note that the corresponding property of the layer object is
zIndex, and not z-index.
|
| src="somewhere.htm"
| Specify the source from which html code is loaded into
the frame.
|
| id="fred"
| The name property of the layer is specified
using the ID attribute. It would appear that one can also
say name="fred" - the documentation is a little unclear.
|
|
In addition there are JavaScript properties of layers that are
not represented in the attributes of the <LAYER> tag. Here
they are:
|
| parentLayer
| The parent layer that contains this layer, or if there is
none, then the enclosing window object.
|
| siblingAbove
| If this layer has a parent, and the parent has other 'child'
layers, then these children are siblings of the current layer. The
siblingAbove is the sibling immediately in front of the current
layer (ie with z-order 1 greater than that of the current layer).
|
| siblingBelow
| like siblingAbove, but the sibling layer with lower z-order
(below the current layer, further from the person viewing the layers).
|
| document
| (the document contained in the frame!)
|
| window
| The window (or frame) object that contains the layer,
regardless of nesting of layers!
|
| pageX, pageY
| the horizontal and vertical pixel positions of the layer,
relative to the page.
|
There are also several methods you can use to alter the properties
of a layer. They are:
|
Layer methods
|
| Method |
What it does |
| moveAbove(layer)
| move the layer above the specified layer
|
| moveBelow
| as for moveAbove
|
| moveTo(x,y)
| move the layer to the specified position - (0,0) is the
top left hand corner of the screen; moveBy() is the corresponding function
for a relative movement. moveToAbsolute() moves the layer
to the specified page coordinates, unlike all the other
move methods, which are relative to the containing layer!
|
| offset(x,y)
| relative movement (in pixels) - the method we used
in our demonstration (Which doesn't seem to appear in the
Netscape documentation!!)
|
| resize(w,h)
| resize the layer to the stated width and height (in pixels).
Also not in the Netscape documentation. They have resizeBy()
(which effectively adds/subtracts width/height to/from clip.width
and clip.height);
and resizeTo()!
|
| captureEvents(), releaseEvents(),
handleEvent(), routeEvent()
| See page 7.
|
| load()
| load the given URL into the layer. The wrapping width of
the layer contents is apparently also changed.
|
|
