So, You Want to Layer, Huh?

You MUST be using Netscape 4.0 or above to do this Tutorial
...it will not look at all correct without it.
...you can grab it here.

Use these to jump around or read it all...

[How To Do It] [Here's What's Happening]
[Layering In General]
[Layered Images Are Not Regular Images]
[Layers Don't Have To Be In The Same Space]
[This Only Works With Netscape 4.0]

Let us imagine that I have these three images:

All three images are wonderful by themselves, but I would really like to lay each one on top of the other, sort of build an "X" with each. Something like... this:

Neat, huh? Let me state right up front that I am able to make such an "X" because I made the images that lay on top transparent images so you could see through where it was not purple or red. Without doing that, the overriding image would just block out the one underneath. See my tutorial on Transparent Images if you don't already know how this is done.

How To Do It

What you see above are three images, all the same size. I did that on purpose. They are all 100 by 100 pixels. I then denoted that each image be placed in the same space. I then denoted each image as a layer section in and of itself. Here's the code that makes the layered image above:

Here's What's Happening

LAYER denotes to the browser that this is a layer.
Please note that the first layer you place is the bottom layer. They continue to go over top as you add layers.
NAME names the layer, obviously.
This won't come into play much in this tutorial, but will be important in later layer get-togethers.
LEFT and TOP denote the image placement ON THE BROWSER WINDOW. Allow me to state that again... ON THE BROWSER WINDOW!
The LEFT is from the left of the screen to the upper left-hand corner of the image. The TOP is from the top of the screen to the upper left-hand corner of the image. The numbers are pixels. There will be a lot of playing with numbers to get the image exactly where you want it. Think of the browser screen width as around 600 pixels and the height as around 500 pixels.
IMG SRC acts just like any old image command.
You can add the HEIGHT and WIDTH if you'd like.
/LAYER ends each layer.

...as shown above, you need to do one of these LAYER commands for each layer you want.

Layering In General

The process of creating a layered image is not difficult. However, there are a few items that might trip you up. I learned most this from a lot of trial and error so here are few items you should know before you waste a good deal of time messing around.

Layered Images Are Not Regular Images

They do not react to ALIGN or CENTER commands. They do not care if there is text in the way. They place right where you say to place them without any regard for what's around.

See the layered image above? All three images are placed 250 pixels from the left of the screen and 500 from the top. That's why they layer. I have them all in the same place. The thing is that the layered image will be at 250 in and 500 down no matter what. You must write the rest of your page accordingly leaving a big enough text space so the image has a place to sit. If not, it will layer right over what is sitting in its space. Which itself might be a neat effect....

But if you want it to sit in the open like mine, you need to leave a big space right where you want it to sit. I do it by adding these:

<P>  

Each one of those adds two open lines. You need the   to add a space on a line. You see, just putting in a lot of <P> commands won't do it. There has to be something on a line for the next <P> command to work. You can't use any character because you need the line to be blank, so use a space. That space is created by  . And no, just inserting a space by hitting the space bar won't do it. You need the   for the space.

Layers Don't Have To Be In The Same Space

I have them that way more for demonstration purposes than anything. If you have two oddly shaped images and you only want part of one overlapping the other, it'll work. You'll have to play with the LEFT and TOP pixel number a bit, but you'll find the correct placement.

This Only Works With Netscape 4.0
and above

That's a bit of a bummer. Don't go crazy layering things. Try this: If you have a chance to see a layered page in a browser window that doesn't support the commands -- do it. You'll see how bad it all looks when the commands aren't supported. All the images show up -- they just aren't where you want them to be. Bummer.