How to create a basic slide show
Step 1: Get some images!
The first step, needless to say, is to first fetch the images you want to include in the slideshow. For this tutorial, we'll be using these three images:
tn00607a.gif (1499 bytes) tn00738a.gif (1685 bytes) tn00897_.gif (2529 bytes)
"firstcar.gif" "secondcar.gif" "thirdcar.gif"
Imagine yourself as a car salesmen, and these three cars are the ones you are selling!
Step 2: Preload the images using JavaScript.
The term "preload" in JavaScript refers to the loading of images into cache prior to displaying them. Preloading images is "necessary" in a slide show, since the switching between images have to be instantaneous, without any delay:
We've created three instances of the image object, each referring to one of the images that make up the slide show. By doing so, the images are loaded into cache, standing by for us to display at anytime. Notice that the entire code is inserted in the section of the page (Detailed discussion of preloading images can be found here).
Step 3: Add in the html codes necessary to display the first image of the slide show.
All we've done above is insert the first image of the slide show using HTML. Notice how we gave the image a "name" attribute. By naming the image with an arbitrary name, it enables JavaScript to access and manipulate the image, which we will see next.