Dynamic HTML; Quick 'n Easy Layers
If you've heard of dynamic HTML and layers and wanted to see what you can do with it, but the information you got was too much and too fast for understanding, this article is for you.
Here you will find a few pieces of information, enough to get you started. When you use what's presented here with confidence, you then have a foundation against which additional information can make more sense.
A layer is content in a DIV tag with an ID. Example:
<div id="myLayer">
Content here.
</div>
The ID attribute allows JavaScript to modify the position, color, visibility, and other attributes of the layer.
Layers are HTML. When JavaScript is used to modify a layer, the layer is dynamic. Thus, "Dynamic HTML."
You've already seen how to create a layer. It can contain text, images, anything that a normal web page can have, including more layers.
Next, I show you how to position the layer in the exact place you want it on the web page.
Then, I'll show you how to use JavaScript to hide the layer, rendering the layer's content invisible, and how to make it visible again.
Positioning a Layer
If you want the layer to be displayed on the page where it naturally would be displayed when the browser renders your web page from top to bottom, you can skip this section.
But if you want to display the layer in a specific spot on your web page, read on.
In the DIV tag, specify a style with "position", "top", and "left" values. Example:
<div
id="myLayer"
style="
position: absolute;
top: 10;
left: 200;">
Content here.
</div>
The style in the above DIV tag causes the layer to be positioned absolute (there are other positions, such as "relative," that we won't address in this article) so the top of the layer is 10 pixels from the top of the browser window and the left edge of the layer is 200 pixels from the left edge of the browser window.
It's simple, really. Specify an absolute position for the layer with the number of pixels down from the top and the number of pixels in from the left.
No matter where the other text of the web page is displayed, the content of the layer will be displayed in the position you specify.
The layer's style can optionally define other attributes, including such things as text color, text size, the layer's size, border color and size, background color, and in what order this layer's content shall be printed when more than one layer is in the same spot.
The page at /a/26h/pl.pl?art266 demonstrates some of those attributes.
Hiding Layers and Making Them Visible Again
Hiding layers and making them visible requires the use of JavaScript. The JavaScript simply changes an attribute in the layer's style so it's either "hidden" or "visible". When the attribute is "hidden" the layer disappears. When it's "visible" the layer is printed.
The JavaScript code is very simple, or it would be if there was only one browser. But there are three different methods that browsers can use to change attributes of layers.
Netscape had layers first. Then Microsoft developed their own layers, which was different than Netscape's. Finally, the W3C developed guidelines to standardize the thing, which was different than the previous two developments.
So the JavaScript code has to test the browser to see which layers method the browser uses. Only then can it change the layer's attributes. The demonstration download page at /a/26h/pl.pl?art266 does that.
In the demonstration, three methods are presented to tell the JavaScript to hide the layer and to make it visible again.
-
A SPAN tag with an onclick attribute. Example of the hiding method:
<span onclick="javascript:MakeHidden()">Hide it</span>
When the cursor clicks on the spanned text, the layer disappears.
-
A SPAN tag with an onmouseover attribute. Example of the hiding method:
<span onmouseover="javascript:MakeHidden()">Hide it</span>
When the cursor moves over the spanned text, the layer disappears.
-
A link with an onmouseover attribute. Example of the hiding method:
<a href="#" onmouseover="javascript:MakeHidden()">Hide it</a>
When the cursor moves over the link text, the layer disappears.
Those and other methods can be used. (Note: Netscape 4 will work only with links, not with SPAN or other HTML tags.)
When the cursor hovers over a link, its shape changes (for most browsers). When moving over spanned text, it doesn't. Whether or not you want the cursor to change when it hovers over the hidden/visible text would be a consideration when determining which method to use.
Now you can do layers :)
Will Bontrager
©2004 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
