weballey logo
left DHTML - netscape backnext right
homesearchsite mape-mail
< netscape >
internet explorer
dynamic content
moving elements
cross browser
      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.

Basic syntax
    The basic syntax of the <layer> tag can't be simpler (as if any tag in HTML is complicated!):

<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.

Layer attributes
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:

The name of the layer, used to identify it in your script
The position of the layer in relationship to the x coordinates
The position of the layer in relationship to the y coordinates
The width of the layer, in px or %
The height of the layer, in px or %
The background color of the layer
The background image of the layer
The external html document contained inside the layer
    Mix and match different attributes any way you like. Here's a sample layer that uses some of the above attributes:

<layer id="mylayer" width=100px height=70px bgColor="yellow"><h3>A layer</h3></layer>

A layer
    Notice I didn't specify the left and top attributes. When you don't, the layer is positioned where you defined it.

Scripting layers
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 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>

<script language="JavaScript1.2">
//variable that helps alternate between red and blue
var thecolor=true

//Apply a bgColor of blue as the initial layer color
function changecol(){

//if thecolor=true
if (thecolor)

//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!

left Copyright © Gerben Hoekstra - All rights reserved backnext right