Layers in HTML (which as far as I know works only in Netscape Navigator version 4.x) are very much like layers in graphic images, such as the layers we looked at using Fireworks. The visibility of each layer can be independently controlled, and if more than one is shown, the resulting image is determined by the order of the layers and whether they are transparent.

With layers, it's like you have more than one web page in the same file. Usually, you keep all but one of them invisible, and certain actions can change the visibility of the layers.

You can do some cool things with this idea. One is kind of like a slide show. I got the following example from the tutorial pages on layers at Netscape.com, the people who invented layers. Here's the link to their example:

http://developer.netscape.com/docs/manuals/communicator/dynhtml/flower.htm

Read the code to learn more. The basic idea is that each flower is in its own layer, so selecting from the menu just makes a different layer visible.

It can be hard to understand the different layers in that example, so I shifted them around a little to produce the following variation, where you can show or hide each layer independently, using buttons.

Finally, I used the idea of layers to demonstrate "drop-down" menus. The indea is that I wrote some JavaScript code in the onMouseOver event handler to show a different layer. To make it easy to see when we've switched layers, I used a different background color for each layer, but for maximum coolness, you'd use the same background color for all layers.

• An example where the layer is all text (bullet lists of A HREF tags).
• An example where the layer is all images, wrapped by A HREF tags

As always, you're encouraged to read the code. Because I'm a masochist, I wrote JavaScript code to generate the four layers; look through that if you like, it's nothing outside your abilities. The alternative is just to copy/edit one layer to produce the others; look at the end of the file to see the layer code.

Remember, this code only works in Netscape 4.x. However, very similar code works in IE and in Netscape 6.x and 7.x, except that it uses DIV instead of LAYER, but the basic idea is the same. I haven't developed that because I didn't have easy access to those browsers over the weekend. If you're interested in learning how to do it, talk to me and we'll learn it together.

Scott D. Anderson
Fall 2002