DHTML Lab 6:
Netscape Layers

Now we're going to discuss Netscape Layers. Why are they called "Netscape" Layers? Well, layers only work in Netscape Communicator 4.0 plus...Microsoft Internet Explorer doesn't support them. We will learn about layers if only to understand some of the JavaScript syntax we'll use later on. Also, there are some things about CSS that Netscape doesn't support but can be accomplished with Layers. In reality we should only use Layers if we absolutely cannot accomplish the same thing with CSS.

In case you haven't already figured this out, you will need Netscape Navigator 4.x (Communicator) do do the examples in this lesson. If you don't have it, go ahead and download it. I'll wait.

Layers are very much like the positioning stylesheets we've already learned about. The only difference is that the attributes have a slightly different syntax. The attributes for the layer tag aren't contained in the "stye" attribute, but instead are attributes themselves. Also, some of the names of the attributes are slightly different than with stylesheets. Let's see what I mean... OK. Now that you have Netscape open, let's make a layer.

In HTML mode, Type the following code into the edit textarea below:
<body bgcolor=white>

Here is some text and <layer bgcolor=red top=100 left=150>this is a layer</layer>

</body>


Click the "Preview" button and see what this code makes.

Then we added the bgcolor, top and left attributes to the opening <layer> tag. Do you see the difference between this and a stylesheet?

Since in Netscape, a Layer is just another HTML tag we can use the stylesheet syntax with it. Here is the same effect as above only treating the layer tag as a positioning stylesheet:

In HTML mode, Type the following code into the edit textarea below:
<body bgcolor=white>

Here is some text and <layer style="position:absolute; background-color:red; top:100; left:150;">this is a layer</layer>

</body>


Preview this, and see that it does the same thing.

Now let's get back to the layer syntax and properties. Now that we've done the layer syntax (top example not the last one), all we need to know is which properties we can add to a layer. The following is a complete list of the layer properties we can add, look them over and then we'll try a few of them:

  • NAME and ID

    The NAME parameter specifies the name of the layer so that other layers and JavaScript scripts can refer to it. You can use ID and NAME interchangably.
    This is just like the NAME parameter for frames, images, or form elements. We're going to use 'ID' instead of 'NAME' because that's what we use with stylesheets, but technically the 2 are equivalent.

  • LEFT and TOP

    The LEFT and TOP parameters specify the horizontal and vertical position of the layer for layers defined with <LAYER> VALUES: integers, can in px (pixels), em (font size), in (inches), or % (percentage).
    We already did these.

  • PAGEX and PAGEY

    The PAGEX and PAGEY parameters specify the horizontal and vertical position of the layer relative to the document's window. VALUES: integers, can in px (pixels), em (font size), in (inches), or % (per\ centage).
    Same as LEFT and TOP, but does not restrain positions to the current frame (if the layer is in a frame.) No CSS equivolent.

  • SRC

    The SRC parameter specifies the pathname of a file that contains HTML-formatted content for the layer.
    Just like defining SRC for a frame - this parameter loads a file into the layer. This is an example of something that cannot be done with stylesheets!!

  • Z-INDEX, ABOVE and BELOW

    These three parameters specify the stacking order of a layer. These three parameters are mutually exclusive - use only one of them. VALUES: for ZINDEX use positive integers, for ABOVE and BELOW use layer names.
    ABOVE and BELOW have no CSS equivalent.

  • WIDTH

    This parameters specifies the width of the layer's content. It controls the right margin for wrapping purposes. VALUES: integers, can in px (pixels), em (font size), in (inches), or % (percentage).
    Like WIDTH for stylesheets.

  • HEIGHT

    This parameters specifies the height of the layer's clipping region, and serves as the reference for setting the relative height of children layers. VALUES: integers, can in px (pixels), em (font size), in (inches), or % (percentage).
    Like HEIGHT for stylesheets.

  • CLIP

    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.
    This is kinda cool, although you don't often use it in your DHTML code, but instead with your JavaScript.

  • VISIBILITY

    The VISIBILITY parameter specifies whether the layer is visible or not.
    Visibility. This is the same as visibility with stylesheets.

  • BGCOLOR, BACKGROUND

    The BGCOLOR specifies the background color of the layer, while the BACKGROUND parameter specifies an image to use as the background.
    Just like BACKGROUND-COLOR and BACKGROUND in stylesheets.

  • OnMouseOver, OnMouseOut

    These are JavaScript event handlers that are invoked when the mouse enters or leaves the layer.
    Events

  • OnFocus, OnBlur

    These are JavaScript event handlers that are invoked when the layer gets or loses keyboard focus.
    More events...these two are particularly useful with DHTML as we'll see in later tutorials.

  • OnLoad

    This is an event handler that is invoked when the layer is loaded.



OK. That's everything you can use in layers. Try out some of these on your own. Let's go over the things that are most likely new to you (i.e. SRC, and CLIP.)

Let's do SRC and CLIP. SRC will load into the layer any file we wish whether it be an HTML file a picture or whatever. CLIP will allow us to clip it so that the layer doesn't take up the whole page. You see normally the layer will try to become as large as the content filling it, but with CLIP we can make the layer cut off some of the content so that the layer can be the size we want.

In HTML mode, Type the following code into the edit textarea below:
<body bgcolor=white>

<layer top=100 left=30 src="http://www.useractive.com/file.html" clip="300,100">this is a layer</layer>

</body>


Preview this and see that it works!

CLIP takes two values. The first value is the width of the clip and the second is the height of the clip.

Next, so that you see how CLIP works, try changing the 300 to a 100 and the 100 to a 300. Like this:
In HTML mode, Type the following code into the edit textarea below:
^M
<body bgcolor=white>

<layer top=100 left=30 src="http://www.useractive.com/file.html" clip="100,300">this is a layer</layer>

</body>


That's it for this lesson. In the next lesson we learn how to change properties with javascript to make dynamic effects!