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>
Attributes:
| id: | An identification handle, or name, for the layer. The ID must begin with an alphabetic character. |
| left/ top: | The LEFT and TOP parameters specify the horizontal and vertical positions of the top-left corner of the layer within its containing layer, or within the document if it is at the top level. Both parameters are optional. |
| bgColor | An optional parameter that specifies the background color of the layer. |
| width/ height | The width/ height parameter determines the width and height of the layer at which the layer's contents wrap. These parameters can be expressed as an integer value, or as a percentage of the width of the containing layer. |
| visibility | The VISIBILITY parameter determines whether the layer is visible or not. A value of HIDE hides the layer; SHOW shows the layer; INHERIT causes the layer to have the same visibility as its parent layer. |
| src: | The SRC attribute for the <LAYER> tag specifies an external file that contains HTML-formatted text to be displayed in this 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>
<a href="#" onClick="document.test2.visibility="show">Reveal!</a>
"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:
<layer src="http://www.microsoft.com/index.htm"></layer>
Don't you just love layers!
Note: For more info on the <layer> tag, visit JavaScript Kit
Recommended resources
|