Webmaster

DHTML : Creating a Slideshow
Contents ]
Mikael Le Moal

Preparing Images and Variables

The images that you want to publish need a bit of preparation. The script will use a smaller version of each image and all the reduced images must be of the same size, since they are displayed in the same frame. By using this method instead of a dynamic reduction of the images (resizing the image's height and width in the <img> tag), we will speed up the loading process.

The right filenames. In this workshop, the small images are called imgX.jpg, and the original ones imgXg.jpg.

We first need to initialise the script with some data:

6: pause  = 2;
7: vitesse  = 5;
8:
9: tabImg = new Array ("img1.jpg","img2.gif","img3.gif");
10: tabImgn = new Array ("img1g.jpg","img2g.gif","img3g.jpg");

Two parameters are defined for the speed and the length of the pause (lines 6 and 7). The vitesse variable defines how fast the successive images appear in the slideshow, and the pause variable sets the short interval between two images.

The names of the files containing the images are placed in two arrays (lines 9 and 10). The first one stores the small images and the second the larger ones. Make sure you correctly match the small and large versions of each image in the arrays.



1   2   3   4   5