Webmaster

DHTML : Creating a Slideshow
Contents ]
Mikael Le Moal

Changing the Image

The role of the ChangeImage() function is to change the images and the animation's direction before actually sliding in the new image:

50: function ChangeImage () {
51: var x,y;
52:
53: cpt++;
54: if (cpt >= tabImg.length) {
55: cpt=0;
56: }
57: if (sens == 0) {
58:    sens =1;
59: } else {
60:    sens = 0
61: }
62: x  = 0;
63: y = 0;
64: if (sens==0) {
65:    position = y = imgH;
66: }
67: else {
68:    position = x = imgW;
69: }
70: objs.top = y;
71: objs.left = x;
72: Ecrire ('<A HREF="'+tabImgn[cpt]+'" target="img"><IMG SRC="'+tabImg[cpt]+'" NAME="tabImg2" BORDER="0" ALIGN="Top" onLoad="InitDiapo ()" onError="setTimeout(\'ChangeImage()\',500);"></A>');
73: }
74:
75: function Ecrire (str) {
76: if (Navigateur()== "Netscape") {
77:    with (obj.document) {
78:       write(str);
79:       close();
80:    }
81:
82: }
83: else {
84:     obj.innerHTML = str;
85: }
86: }

First of all, the image counter is incremented (line 53). If the last image has been processed, we start again with the first one (lines 54-56). The animation's direction is also changed (lines 57-61). The position variable is then initialised (lines 64-69) according to the direction. The layer is therefore positioned in relation to this variable (lines 70-71).

Now the content of the layer needs to be replaced by the new image (line 72). This is the job of the ecrire() function (lines 75-86). It simply replaces the HTML code of the layer with the one it receives as the argument at call time.

And, lastly, the animation is started again by calling up InitDiapo() which is also part of the new HTML code passed as argument for layer2.



  1   2   3   4   5