DHTML in NS 4 - The <LAYER> tag
This could either be a good thing, or a bad one, depending on your view. DHTML in NS 4 is quite simple, and comes down to essentially one word- Layer. I was pretty astonished myself, but its true- NS 4 relies completely on a new tag, called the <LAYER> tag, to spin up its DHTML magic. This new tag is dynamic in that it can be positioned anywhere on a web page (without relation to other content), moved around, its content inside updated on demand, and more.
The basic syntax of the <LAYER> tag can't be any simpler:
<LAYER>Text inside LAYER</LAYER>
The <LAYER> tag is a content tag, which means you can add into it content (like <TABLE>). Go ahead, try inserting the above code onto your page...you'll notice that the text inside the layer floats above other text, and overlaps them. Imagine a layer as a sheet of paper that resides on top of the rest of the page, and does not take up space within the flow of the document.
A layer by itself can't be more boring, not to mention useless. Fortunately, there's more to it. Layers support attributes that allow you to position it using the x,y coordinates-system, give it a background, clip it (make only certain area of the layer visible), hide it from view, and so on. I've listed the most important layer attributes below:
Mix and match different attributes any way you like. Here's a sample layer that uses some of the above attributes:
Notice I didn't specify the left and top attributes. When you don't, the layer is positioned where you defined it.
Here's one of the most important thing to learn about layers- how to script them. After all, its the scripts that make layers come alive. To access a layer, you need to use the following syntax:
Accessing the layer is just the first step. Once you've accessed a layer, you can then go on and manipulate one of the layer's attributes to produce dynamic effects. I'll show a simple example (can be viewed through Netscape) where a layer's background color interchanges between red and blue:
Here's the source code I used:
<layer id="test" width=80px height=80px></layer>
//variable that helps alternate between red and blue
//Apply a bgColor of blue as the initial layer color
//set thecolor to the opposite of its current state
All of the layers' attributes are read/write, so be sure to experiment with each of them!
Copyright © 1995-2003 Sidetrips Internet Services, Inc. All rights reserved.
Reproduction in whole or in part in any form or medium without express
written permission of Sidetrips Internet Services, Inc. is prohibited.
sidetrips.com, hostserver.com, registera.com, htmlshop.com,
and associated domains are trademarks of Sidetrips Internet Service, Inc.