Initialising Layers with the Script

The initialisation of the layers and how they are accessed in the script depends on the browser detected. So we need to use the Navigateur() function.

Once the browser is identified, everything else is simple. The layer initialisation occurs in the Initialise() function:

18: function Initialise () {
19: if (Navigateur()=="Netscape") {
20: imgW  = document.images["img"].width;
21: imgH = document.images["img"].height;
22: obj = document.layer1;
23: obj.top = document.images["img"].y;
24: obj.left = document.images["img"].x;
25:
26: obj.clip.bottom = imgH;
27: obj.clip.right = imgW;
28: obj.clip.top = 0;
29: obj.clip.left = 0;
30:
31: obj = document.layer1.document.layer2;
32: objs = obj;
33: }
34: else {
35: imgW  = document.all.img.width;
36: imgH = document.all.img.height;
37: obj = document.all.layer1;
38: obj.style.top  = document.all.img.offsetTop;
39: obj.style.left = document.all.img.offsetLeft;
40: obj.style.clip = "rect (0px," + imgW + "px," + imgH + "px,0px)";
41: obj = document.all.layer2;
42: objs = obj.style;
43: }
44:
45: sens = 0;
46: cpt = 0;
47: ChangeImage ();
48: }

The image height and width values are stored in two variables (lines 20-21 or lines 35-36). The layer1 layer is then positioned at the exact coordinates of the image (lines 23-24 or lines 38-39). Its size is also defined (lines 26-29 or line 40). The image and the layer are now merged (same position, same size).

The obj variable is used to contain the layer2 layer, whereas objs contains the layer style (lines 31 and 32 or 41 and 42). The sens variable defines the direction of the animation and is set to 0 (the image comes from the bottom). The image counter is also initialised to 0, representing the first image (lines 45 and 46). And, lastly, the ChangeImage() function is called up.