Part 10: Layers II
We have already talked about the basics of the new layers technique. This lesson covers the following topics:
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 left=0 and top=0 as my Netscape version (PR3 on WinNT) seems to have some problems if these values are missing)
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:
var width= document.layers["imgLayer"].document.davinci.width; var height= document.layers["imgLayer"].document.davinci.height;Through document.layers["imgLayer"] we can access the layer called imgLayer. But why do we use document after document.layers["imgLayer"]? Well, every layer contains its own HTML-page - this means every layer has got a document-object. In order to access the image inside the layer imgLayer we need to access this document-object. You can see in the code that the image is called davinci. The rest should be clear.
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).
This is the parent layer
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:
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 document.layers["layer1"] or document.layers["layer2"] because the layers layer1 and layer2 are layers inside parentLayer.
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.
Push this button in order to load the example:
Here is the source code:
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.
Let's have a look at the effect:
This example uses these two images (I have added a background color so that you can see the transparent parts):
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 'View document source' in your browser).
©1996-1998 by Stefan Koch