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

id
The name of the layer, used to identify it in your script
left
The position of the layer in relationship to the x coordinates
top
The position of the layer in relationship to the y coordinates
width
The width of the layer, in px or %
height
The height of the layer, in px or %
bgColor
The background color of the layer
background
The background image of the layer
src
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:

document.layername

    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
document.test1.bgColor="blue"
function changecol(){

//if thecolor=true
if (thecolor)
document.test.bgColor="blue"
else
document.test.bgColor="red"

//set thecolor to the opposite of its current state
thecolor=!thecolor
setTimeout("changecol()",1000)
}
changecol()
</script>

    All of the layers' attributes are read/write, so be sure to experiment with each of them!

bottom  
left Copyright © Gerben Hoekstra - Alle rechten voorbehouden backnext right