Home/DHTML/Layers/Adding Layers
You will not be able to view this page correctly unless you are using Netscape 4.
Layers are a nifty little trick if you have Netscape 4. They act a bit like a z-index in a style sheet,
allowing you to place one thing on top of another and give it an exact position on the page.
The coding is just the addition of the <LAYER></LAYER> tags to make what you place in
between them a layer on the page.
<LAYER left="200" top="200" name="bottom">
<IMG SRC="scare.jpg">
</LAYER>
This code would create a layer named "bottom". The contents of the layer is the image in
the image tag. The layer would be located 200 pixels from the top
of the browser window and 200 pixels from the left of the browser window. This is an exact position
on the page, so you may have to adjust the numbers to get the layer where you want it to be. The
layer will just sit right over the top of anything in its way, such as text or other images.
Now, if you want to place some text over that image, you can use another layer over the top
of the image layer, which we named "bottom".
<LAYER left="200" top="700" name="bottom">
<IMG SRC="scare.jpg" width="100" height="100">
</LAYER>
<LAYER left="200" top="700" name="top">
<FONT COLOR="red">I just love to write over the top of my images....</FONT>
</LAYER>
Now you will have that line of text, starting right over your image. (I changed the position in the "top"
attribute so the layers would show up in the correct spot on this page) :
I just love to write over the top of my images....
Notice that the second layer we created just put itself right on top of the first one. When you write
layers, the first will be on the bottom, the second will be on top of it, the next one will be on top of
the previous one, and so on. You can put all kinds of things on top of each other now.
You can also use one image on top of another, or just about anything else you can think of. Give
it a try and see what you can come up with!
|