Adam's Advanced HTML Guide- <layer> tag
HTML has come a long way since it's inception- we can now format text, insert images and tables, add music and frames to our pages, all thanks to the evolution of HTML. The latest "gadget"- the <layer> tag of Netsape 4.
Overview of the <layer> tag
The layer tag is a new tag introduced in Netscape 4 that allows authors to position and animate (through scripting) elements in a page. A layer can be thought of as a separate document that resides on top of the main one, all existing within one window. I'll first list the specifications of the <layer> tag, then show some examples to further clarify.
Syntax: <layer>HTML inside</layer>
Let's see some actual examples.
A basic layer may look something like this:
<layer id="test"><b>text inside a layer!</b></layer>
How does such a layer look like? Try it out in your NS 4 browser! Assuming you have, you'll notice the text "text inside a layer!" appear, only that the text floats above the rest of a page, like a "layer".
I can control the precise coordinates as to where the layer is to appear by supplying in the left/ top attributes:
<layer id="test" left=0 top=0><b>text inside a layer!</b></layer>
Such a layer will appear exactly at the upper left corner of your screen!
Ok, moving on, let's say I want the layer to have a background color as well. No problem! The bgcolor attribute is used just for that:
<layer id="test" left=0 top=0 bgColor="black"><b>text inside a layer!</b></layer>
Things are getting kind of messy, so let's use a fresh new layer before we continue on with more examples:
<layer id="test2"><img src="myimage.gif" width=100 height=30></layer>
Notice that this time, I put an image inside the layer instead...
Ok, let's say that you want the layer to be exactly as big as the image, so no part of the layer except the image is revealed. Well, you can accomplish this by setting the width/ height attributes of it:
<layer id="test2" width=100 height=30><img src="myimage.gif" width=100 height=30></layer>
So far, all the attributes we've seen are pretty much self-explanatory...many of them also appear in other HTML tags. The following three, however, won't feel all that familiar at all. First up, the "visibility" attribute.
Ever wish you could make an element inside your page "disappear", perhaps temporarily, and appear on demand? Well, with the "visibility" attribute, that's exactly what you can do! A value of "hide" for this attribute hides the layer, and through scripting, you can reveal the layer again. Here's an example:
<layer id="test2" width=100 height=30 visibility="hide"><img
src="myimage.gif" width=100 height=30></layer>
"test2" is at first hidden by setting it's visibility to "hide" Howeve, by clicking on the link below it, the layer is revealed. This is accomplished through scripting. To access any given layer, first go through the document object, then the layer's id, and finally, the attribute you want to manipulate.
Finally, let's examine the src attribute. This is a very neat attribute that allows you to create a layer containing any HTML file! The below example is a layer with Microsoft's homepage in it:
Don't you just love layers!