sivaramaiah - JavaScript3

What are layers?

Layers are one great new feature of the Netscape Navigator 4.0. This allows absolute positioning

of objects like images. Besides that you can move objects on your HTML-page. You can

also hide objects.

Layers can easily be manipulated with the help of JavaScript. I hope you get as enthusiatic about

layers as I am.

You can only use layers with Netscape Navigator 4.0 at the moment!

As usual I won’t describe all details of the different tags. There is a good document describing

all elements of layers in Netscape Navigator 4.0 at http://home.netscape.com/comprod/products/

communicator/index.html - so there is no need to rewrite this.

What exactly are layers? This can be explained quite easily: you take several sheets of paper.

On one paper you write a text. On another one you draw an image. Write some text besides an

image on a third paper and so on. Now, put these sheets of paper on a table. Let’s say every paper

is a layer. From this aspect a layer is some kind of container. It can contain objects - i.e. in this

case text and images.

Now take a paper with an image on. Move it around on the table. Watch the image following

the movements of the paper carefully. If you move the paper to the right the image will follow!

What do we learn from this fascinating experience? Layers which can contain several different

objects - like images, forms, text etc. - can be placed on your HTML-page and can be moved

around. If you move a layer all objects contained in this layer will follow this movement.

Layers can overlap each other like papers on a table. Every layer can have transparent parts. Put

a hole in one paper. Now put this paper above another paper. The hole is a ’transparent part’ of

the first paper - the content of the underlying paper shines through.

Creating layers

For creating a layer we need either the

Property Description

name="

left=

top=

The

position (with the

window.

The

Now let’s start with an easy example. We want to create two layers. In the first layer we put an

image and in the second layer we put a text. What we want to do is to display the text above the

image.

<layer> or <ilayer> tag. You can use the following properties:layerName" The name of the layerxPosition The horizontal position of the top left corneryPosition The vertical position of the top left corner<layer> tag is used for layers which can be explicitly positioned. If you do not specify aleft and top properties) the layer will be positioned in the top left corner of the<ilayer> tag creates a layer which position depends on the flow of the document.
The text is displayed above the image

Here is the source code:

<html>

<layer name=pic z-index=0 left=200 top=100>

<img src="img.gif" width=160 height=120>

</layer>

<layer name=txt z-index=1 left=200 top=100>

<font size=+4> <i> Layers-Demo </i> </font>

</layer>

</html>

You can see that we define two layers with the

100 (defined through
<layer> tag. Both layers are positioned at 200/left and top). Everything between the <layer> and the </layer> tag (or
<ilayer>

You can see that we use the property

in our case you tell the browser if the text will appear above or below the image. The layer with

z-index=

width=

clip="

above="

below="

Visibility=show|hide|inherit The visibility of the layer

bgcolor="

color or rgb-values

background="

the highest z-index number will be displayed on top. You do not have to use 0 and 1 for the zindex

- every positive integer is ok.

If you write

the text-layer has got a smaller z-index number (

image because I used a transparent background (gif89a format).
and the </ilayer> tag) belongs to this layer.z-index. This defines in which order the layers appear - i.e.layerIndex Index number of layerlayerWidth Width of the layer in pixelx1_offset,y1_offset,x2_offset,y2_offset" Defines the area of the layer which shall be displayedlayerName" Defines above which layer this layer will appearlayerName" Defines below which layer this layer will appearrgbColor" The background color - either name of a standardimageURL" Background imagez-index=100 in the first <layer> tag the text will be displayed below the image - asz-index=1). You can see the text through the
The text is displayed below the image

Layers and JavaScript

Now we are going to access layers through JavaScript. We want to start with an example where

the user can push a button in order to hide and show a layer.

First we have to know how the layers are represented in JavaScript. As usual there are several

ways. The best thing is to assign a name to every layer. If we define a layer with

<layer ... name=myLayer>

...

</layer>

we can access this layer through

provided by Netscape we can also write document.myLayer - but this lets my browser crash.

This is certainly only a problem of the preview version and will be solved in the final release (I

am using Netscape Navigator 4.0 PR3 on WinNT at the moment). There seem to be no problems

with

You can also access the layers through an integer index. In order to access the bottommost layer

you can write

If you have for example two layers called

and 100 you can access these layers through
document.layers["myLayer"]. According to the documentationdocument.layers["myLayer"] - so we are going to use this alternative.document.layers[0]. Please note that the index is not the same as the z-index property.layer1 and layer2 with the z-index numbers 17document.layers[0] and document.layers[1] and
not

There are several layer-properties which can be changed through JavaScript. The following example

presents a button which lets you hide and display one layer (Netscape Navigator 4.0 - or

higher - required!).
through document.layers[17] and document.layers[100].
(The online version lets you test this script immediately)

The source code looks like this:

<html>

<head>

<script language="JavaScript">



</script>

</head>

<body>

<ilayer name=myLayer visibility=show>

<font size=+1 color="#0000ff"><i>This text is inside a layer</i></font>

</ilayer>

<form>

<input type="button" value="Show/Hide layer" onClick="showHide()">

</form>

</body>

</html>

The button calls the function

visibility of the layer-object

myLayer"]
showHide(). You can see that this function accesses the propertymyLayer. Through assigning "show" or "hide" to document.layers[".visibility you can show or hide the layer. Please note that "show" and "hide"
are strings - not reserved keywords, i.e. you

show

I have used the

flow of the document.
cannot write document.layers["myLayer"].visibility=.<ilayer> tag instead of the <layer> tag because I wanted to put the layer in the
Moving layers

The properties left and top define the position of the layer. You can assign new values to these

properties in order to set the position of the layer. The following line sets the horizontal position

of the layer to 200 (in pixel):

document.layers["myLayer2"].left= 200;

We are now going to program a moving layer - this looks like a scroller inside the browser window.

(The online version lets you test this script immediately)

The script looks like this:

<html>

<head>

<script language="JavaScript">



</script>

</head>

<body onLoad="setInterval(’move()’, 20)">

<ilayer name=myLayer2 left=0>

<font size=+1 color="#0000ff"><i>This text is inside a layer</i></font>

</ilayer>

</body>

</html>

We create a layer called
myLayer2. You can see that we are using onLoad inside the <body>
tag. We need to start the scrolling of the layer as soon as the page is loaded. We use
setInterval()
inside the onLoad event-handler. This is a new method of JavaScript 1.2 (i.e. the JavaScript version

that is implemented in Netscape Navigator 4.0). This can be used to call a function over

and over again in a certain time interval. We used

Interval()

Through
setTimeout() for this in the last lessons. set-works almost the same - but you have to call it only once.setInterval() we are calling the function move() every 20 milliseconds. The function
move()

fluent scrolling of the text. All we have to do in the function

of the layer and assign this value to

If you look into the source code of this part of the online-tutorial you will realize that my code

looks a little different. I have implemented some code so that people with older JavaScriptbrowsers

won’t get any errors. How can this be achieved? The following code will only be executed

by browsers which understand JavaScript 1.2:
sets the layer to a certain position. As we call this function over and over again we get amove() is to calculate the positiondocument.layers["myLayer2"].left= pos.
<script language="JavaScript1.2">



</script>

This is the same problem as we had with the Image-object. We can rewrite the code in a similar

way. Setting a variable
browserOK solves the problem.
(The online version demonstrates that moving layers can overlap)

©1996,1997 by Stefan Koch

e-mail:skoch@rumms.uni-mannheim.de

http://rummelplatz.uni-mannheim.de/~skoch/

My JavaScript-book: http://www.dpunkt.de/javascript

V
OODOO’S INTRODUCTION TO JAVASCRIPT
© 1996, 1997 by Stefan Koch

Part 10: Layers II

We have already talked about the basics of the new layers technique. This lesson covers the following

topics:

·
Clipping
·
Nested Layers
·
Effects with transparent layers
Clipping

You can define which rectangular part of a layer will be visible. Everything outside this area

won’t be shown. This is called clipping. You can use the HTML-property clip like this:

<ilayer left=0 top=0 clip="20,50,110,120">

<img src="davinci.jpg" width=209 height=264>

</ilayer>

(I have added

problems if these values are missing)

Although the image is 209x264 pixels in size you can only see a small part of it:

This part has got the size 90x70 (in pixel). The first two values specified through the clip-attribut

(in the HTML-tag <layer> or <ilayer>) define the upper left corner of the clipping box. The next

two values define the lower right corner. The following image illustrates this:

More interesting things can be achieved through setting the clipping region through JavaScript.

For this you can change the properties

Just assign a new pixel value to one of these properties and the clipping region will change.

The following example changes the clipping region dynamically. The user gets the impression

that the image is being built up slowly:
left=0 and top=0 as my Netscape version (PR3 on WinNT) seems to have someclip.left, clip.top, clip.right and clip.bottom of the Layerobject.
(The online version lets you test this script immediately)

Here is the code:

<html>

<head>

<script language="JavaScript">



</script>

</head>

<body>

<ilayer name="imgLayer" clip="0,0,0,0">

<img name=davinci src="davinci.jpg" width=209 height=264>

</ilayer>

<form>

<input type=button value="Start" onClick="start()">

</form>

</body>

</html>

The button in the

we should start - this is the pixel in the middle of the image. We store the x and y values

of this pixel in the variables

function sets the clipping region depending on the variables
<body>-part calls the function start(). First we have to calculate at which positionmiddleX and middleY. Then the function show() is called. ThismiddleX, middleY and pos. The variable
pos

gets bigger every time. At the end of
is incremented everytime the show() function is called. This means the clipping regionshow() we set a timeout with setTimeout() - like this the
show()

image is being displayed.

Please note how we get the size of the image in the
function is being called over and over again. This process stops as soon as the wholestart() function:
var width= document.layers["imgLayer"].document.davinci.width;

var height= document.layers["imgLayer"].document.davinci.height;

Through

we use

HTML-page - this means

inside the layer

the image is called
document.layers["imgLayer"] we can access the layer called imgLayer. But why dodocument after document.layers["imgLayer"]? Well, every layer contains its ownevery layer has got a document-object. In order to access the imageimgLayer we need to access this document-object. You can see in the code thatdavinci. The rest should be clear.
Nested layers

We have already seen that a layer can contain several different objects. They can even contain

other layers. You might ask yourself what this might be good for. There are several reasons for

using nested layers. We will have a look at some examples which demonstrate the use of nested

layers.

The first example uses a layer (called
parentLayer) which contains two other layers (layer1 and
layer2
).
(The online version lets you test this script immediately)

You can see three buttons. These buttons will start and stop the movement of the layers. You

can see that moving the layer parentLayer also affects the other two layers. But moving the layer

layer1 (or layer2) only affects this layer. This demonstrates that you can define groups of objects

through nested layers.

Now let’s have a look at the source code:

<html>

<head>

<script language="JavaScript">



</script>

</head>

<body onLoad="setInterval(’move()’, 20)">

<ilayer name=parentLayer left=100 top=0>

<layer name=layer1 z-index=10 left=0 top=-10>

This is the first layer

</layer>

<layer name=layer2 z-index=20 left=200 top=-10>

This is the second layer

</layer>

<br><br>

This is the parent layer

</ilayer>

<form>

<input type="button" value="Move/Stop parentLayer" onClick="startStop(0);">

<input type="button" value="Move/Stop layer1" onClick="startStop(1);">

<input type="button" value="Move/Stop layer2" onClick="startStop(2);">

</form>

</body>

</html>

You can see that we define two layers inside the parentLayer. These are the nested layers. How

do we access these layers through JavaScript? You can see how this is done in the function
move():
document.layers["parentLayer"].left= 100 + pos0;

...

document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;

...

document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;

In order to access the nested layers you cannot just write

layers["layer2"]

We have seen how to define a clipping region. The following example uses a clipping region

and a moving image. What we want to achive is that the clipping region is fixed - i.e. it does not

follow the movement of the image.
document.layers["layer1"] or document.because the layers layer1 and layer2 are layers inside parentLayer.
(The online version lets you test this script immediately)

Here is the source code:

<html>

<head>

<script language="JavaScript">



</script>

</head>

<body onLoad="setInterval(’moveNclip()’, 20);">

<ilayer name="clippingLayer" z-index=0 clip="20,100,200,160" top=0 left=0>

<ilayer name="imgLayer" top=0 left=0>

<img name=davinci src="davinci.jpg" width=209 height=264>

</ilayer>

</ilayer>

</body>

</html>

Again you can see how we have to access the nested layer:

document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;

You should be familiar with all the other elements in this script.

Effects with transparent layers

Interesting effects can be created with the help of (partial) transparent layers. Especially images

with transparent parts can create a cool effect. Not all image formats can handle transparent

parts. At the moment the best format to use is gif89a. The most of the new graphic programs

support this gif-format. There are also some freeware tools available on the net.

The new image-format PNG supports transparent parts as well. I think we will see many pages

using this format in the near future (as soon as the most browsers support it). It has got many

advantages in comparison to the gif-format.

(The online version lets you test this script immediately)

This example uses these two images (the solid grey parts are transparent):

The script does not differ very much from the other examples - so I won’t print it here (of course

you can see the code through choosing ’

Many cool effects which can be found on the net are based on layers with transparent parts. You

can find some further examples on my JavaScript example page (which is part of the homepage

of my JavaScript book at

german.

I hope you’ve got a basic understanding of using layers with the help of this tutorial. So I am

looking forward to seeing some really cool JavaScript effects...
View document source’ in your browser).http://www.dpunkt.de/javascript/) - this page is available in english or