15. Layers

Layers can give your page a 3D look by letting you stack images or with JavaScript to make a pop up menu. There a many other uses for layers as well, however I guess I need to get on with showing you how to make them.

A layer tag looks like this <layer> </layer>. You place a layer using the top and left attribute which is the distance from the top left corner of the screen and it is in pixels. Use the height and width to dimension the layer. The default location is the top left corner of the screen and the default size is equal to whatever you put in. You can add text or images to the layer just by pacing it in the layer tags. In fact, you can add anything you can put on a page including tables, links or whatever. The background color and image use the same attributes as the body tag. Try the example below to see how it works. Then try changing the size, color, placement, dimensions and content of the layers.Here's an example of how to use layers to stack picures.

<Layer ID="layer1" Top="5" Left="5">
<IMG SRC="mountian1.jpg" WIDTH="250" HEIGHT="175"
BORDER="0"></LAYER>
<Layer ID="layer2" Top="15" Left="240">
<IMG SRC="mountian2.jpg" WIDTH="250" HEIGHT="175"
BORDER="0"></LAYER>
<LAYER ID="layer3" TOP="155" LEFT="15">
<IMG SRC="mountian3.jpg" WIDTH="250" HEIGHT="175"
BORDER="0"></LAYER>
<LAYER ID="layer4" TOP="170" LEFT="245">
<IMG SRC="mountian4.jpg" WIDTH="250" HEIGHT="175"
BORDER="0"></LAYER>

The you could add links to show a larger picture when clicked.

Here's an example of how to make a pop up menu using layers.

Tags covered in this section.
Layer <LAYER></LAYER>
Name <LAYER ID="***"></LAYER>
Location <LAYER LEFT=? TOP=?></LAYER>
Source File <LAYER SRC="***"></LAYER>
Dimensions <LAYER HEIGHT=? WIDTH=?></LAYER>
Visible? <LAYER VISIBILITY=SHOW|HIDDEN|INHERIT></LAYER>
Background <LAYER BACKGROUND="$$$$$$"></LAYER>
Color <LAYER BGCOLOR="$$$$$$"></LAYER>
Alt. Content <NOLAYER></NOLAYER>