">
Domain Registration : Discount Domain Pricing : Website and Domain Hosting : Frontpage 2000 Hosting : Website Development and Promotion : Secure E-Commerce : Shopping Cart Software : Linux and Windows NT : Graphic Design : Free Email Services : Fast Servers : Low Cost!


RESOURCES




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.

Basic syntax

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.

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

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











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.

Privacy Policy | Acceptable Use Policy | Terms of Service