Chapter 32
JavaScript Extensions for Layers

Introduction to Layers

Netscape Navigator 4.0 introduces functionality that allows you to define precisely positioned, overlapping layers of transparent or opaque content on a Web page. A single Web page can consist of several layers, stacked like papers. Think of a layer as an overhead transparency (those transparent sheets used with overhead projectors).

Layers can be controlled by JavaScript. You can use JavaScript, for example, to move layers, hide them, and change the order in which they overlap. Layers enable you to create various elements on a Web page that would otherwise be very difficult or even impossible.

The <LAYER> tag starts a layer definition, and the </LAYER> tag ends it. The content between the opening tag and the closing one can be treated as a single item that can be moved and altered in many ways. In a document consisting of multiple layers, each layer is a distinct tag.

Using JavaScript, you can dynamically control whether a layer is visible or not, so you can hide a layer and make it reappear again if you want. You can also use JavaScript to move a layer, and, in concert with other methods such as setTimeout(), you can create dynamic animation.

Layers have a stacking order (z-order), which determines the order of layers overlapping each other. You can specify the stacking order of layers as relative to each other (e.g., Layer A is immediately beneath Layer B), or you can specify numerical z-orders (e.g., the z value of Layer A is 1). The z-order is important because the content of underlying layers shows through a transparent layer. A layer defined with a background image or a background color (as you do for the body of an HTML document) is not transparent, so it obscures any layers that lie below it. When using a transparent layer, although the actual content on the layer is opaque, you can see through it.

Layers can be nested inside layers, so you can have a layer containing a layer containing a layer and so forth.

You can define layers that have explicit positions, and you can define layers whose position follows the natural flow of the page. A layer that is explicitly positioned is known as a positioned, or out-of-flow, layer, while a layer that follows the natural flow of the page is known as an inflow layer. For inflow layers the <ILAYER> and </ILAYER> tags are used rather than the <LAYER> and </LAYER> tags.

Defining a Layer

The <LAYER> and <ILAYER> tags start a new layer (different types of layers), and the </LAYER> and </ILAYER> tags end the layer. Layers defined with the <LAYER> tag and its counterpart can be explicitly positioned by setting the LEFT and TOP attributes. Layers defined with the <ILAYER> tag (inflow layers) appear wherever they naturally fall in the flow of the document. Such layers are:

• inflow—they occupy space in the document flow.
• inline—they share line space with other HTML elements, such as text, images, tables, form elements, and so on.

An inflow layer resembles any other HTML element. The browser determines its position like it determines the position of an image embedded with the <IMG> tag. It also takes up space in the document like a standard HTML element. On the contrary, positioned layers differ from standard HTML elements, and they introduce an entirely new aspect in HTML design (remember how frames were revolutionary when Navigator 2.0 was introduced). In this section, we discuss the various attributes that you can specify with the <LAYER> and <ILAYER> tags.

NAME

NAME="layerName"

The NAME attribute is an ID tag for the layer. It accepts a string beginning with an alphabetic character. This attribute is optional, so layers are unnamed by default. You can use the layer’s name for referencing from within HTML and external scripting languages such as JavaScript.

LEFT and TOP

LEFT=num1 TOP=num2

The LEFT and TOP attributes specify the horizontal and vertical positions of the top left corner of the layer. 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. That is, if you do not specify one of these attributes, it defaults to 0.

For positioned layers, the origin is the upper left-hand corner of the document or containing layer (for nested layers), with coordinates increasing downward and to the right. Take a look at the following layer definition:

<LAYER LEFT=100 TOP=200>
This layer appears 100 pixels in from the left
and 200 pixels down from the top.
</LAYER>

We suggest that you do not rely on these attributes to default properly when they are not specified, due to some bugs in the software. Thus, if you want the layer on the top, use TOP=0, and if you want it on the left, specify LEFT=0.

Since inflow layers occupy space in the document flow, the origin is the layer’s natural position in the flow, rather than the upper left corner of the containing page or layer. You can specify the <LAYER> tag with an INFLOW=TRUE attribute, or simply use the <ILAYER> tag. The following layer definitions, for example, nudge one word in a sentence down 3 pixels.

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

Suppose you want to create two layers at the same position. Specifying the same numerical literals for both layers is not recommended because you will have to change the values for both layers if you choose to change the layers’ position. Although we haven’t introduced JavaScript properties for layers, you should be able to understand the following multiple-layer definition.

<LAYER NAME="myLayer1" TOP=20 LEFT=20>
<P>This layer appears on top of myLayer2.</P>
</LAYER>
<LAYER NAME="myLayer2" VISIBILITY=HIDE
LEFT=&{document.layers['myLayer1'].left};
TOP=&{document.layers['myLayer1'].top};>
<P>This layer appears beneath myLayer1.</P>
</LAYER>

We use JavaScript entities to set the value of the HTML attributes. Don’t worry about the VISIBILITY attribute and the JavaScript property references, because they are discussed later in this chapter.