To accomplish Step1 above, first, you need to decide where to put the image
within the html page. The image should be placed using the IMG tag as usual. However, you must also
do one more thing. JavaScript needs to know which IMG you
want to use for the slideshow, so you must give the IMG tag a NAME and and ID.
In my example below, I use "myImage" as the NAME
and ID.
<IMG WIDTH=250 HEIGHT=250 ID="myImage" NAME="myImage"
SRC="images/image0.gif"></IMG>
|
Ok, let's move on to the JavaScript side. The source code for the JavaScript section is listed below. This
JavaScript code goes between the <HEAD></HEAD> tag in the html
page. You can also see an example by viewing the source of this
page.
The cyan portion of the code accomplishes Step 2 of the
requirements above. It preloads two images that I want to use (notice that I set numImages=2).
This number can be changed, but the images must be named "image1.jpg,"
"image2.jpg," and so on for this code to work.
Note also that all my images are located in "images"
folder. You can also replace ".jpg" with ".gif"
in the code if you wish to use gif files. (What if the images
are not named "image1.jpg", etc? See below.)
The images are stored by JavaScript on an Array called dimages. An Array
is an object that can have multiple indexed entities. Since we'll be using
more than one image, an Array is a good idea. You can then access the
images by dimages[0], dimages[1], and so on, depending on
how many images you use.
The yellow portion of the code shows a function named swapPicture().
This function accomplishes Step 3 of the
requirements above. The code first check if the browser will
allow JavaScript to change an image; this is just a safeguard so that the
code won't cause an error on older browsers (such as Netscape
3).
The code then increments a
counter named curImage. This counter keeps track of which
image is currently showing and it will wrap around to 0 when all the
images has been shown, then start over. The code then
checks if the nextImage image to be
shown is ready (or has been loaded) in this line:
if (dimages[nextImage] && dimages[nextImage].complete)
{
...
}
else
{
setTimeout("swapPicture()", 500);
}
We need to do that check because some users might have
slow modem connection. What happens if the image is not ready?
Well, then the image won't be swapped, and the else portion of the
code will be executed, on which I made the code check again in
500 milliseconds (half of a second).
After making sure that the image is ready, the code
then sets the target where that image is to be put into. The target
will be the <IMG> placeholder we specified earlier, which is
called: "myImage" If you
change the name for the NAME and ID of the IMG tag,
remember to change the JavaScript part too (the bold text below) ;
otherwise JavaScript won't know where to put the image:
var target=null;
if (document.images.myImage)
target=document.images.myImage;
if (document.all && document.getElementById("myImage"))
target=document.getElementById("myImage");
That was a bit long because we need
to support older Netscape browser, too (I.e.: Netscape 4).
The next line puts the new image
into the target placeholder:
target.src=dimages[curImage].src;
The code then updates the counter so
that it knows which image is currently showing:
And set a time interval upon which
to swap the image. To swap the image, we'll be calling the "swapPicture()" function
over and over:
setTimeout("swapPicture()", 5000);
Here, I have 5000 milliseconds,
which means the image will stay on the screen for 5 seconds. You can
change the number to anything you want.
The pink area of the code above also calls
setTimeout. This is the call that will initiate the whole
slideshow process. (I use 5000 milliseconds which means the initial
picture will be shown for 5 seconds.) This
step accomplishes Step 4 described in the overview section.