DHTML Tutorial
What is DHTML?
The layer Tag
Dynamic Content
Moving Elements

Free Tutorials
What is Internet
Internet Games
Learn TCP IP
Learn HTML
Learn CSS
Learn XML
Learn WML
Learn Access
Learn Data-VB
Learn Oracle
Learn SQL
Learn ActiveX
Learn C++
Learn CGI_Perl
Learn Interdev
Learn Java
Learn JavaScript
Learn Vbscript
Learn VisualBasic
Learn VC++
Operating systems
Learn RedHat
Learn Unix
Learn Winnt

The layer Tag

Next Next

DHTML in Netscape The <layer> tag

This could either be a good thing, or a bad one, depending on your view. DHTML in NS is quite simple, and comes down to essentially one word- Layer. I was pretty astonished myself, but its true- NS 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:


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:

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

Next Next

|  About us | Categories | New Releases | Most Popular | Web Tutorial | Free Download | Drivers |

2013 Soft Lookup Corp. Privacy Statement