DHTML : Creating a Slideshow
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.