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:
Layer attributes
| 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!
-Tutorial
Introduction
-What
is DHTML?
-DHTML in NS- The <layer> tag
-DHTML
in IE 4
-Dynamic
Content
-Moving
elements around in the document
-Creating
cross-browser DHTML
-DHTML
resources
Discussion - Client Side Scripting
DHTML in NS 4- The <layer> tag