HTML and CSS Reference
In-Depth Information
EXPLANATION
(
CONTINUED
)
6
The
src
property of the image object is assigned a new picture. By using the name
of the image as an index value of the images array, JavaScript can determine which
image object to use. (Another way to get to the image:
document.planet_pic.src
or
document.images[0].src.
)
7
Once the index value exceeds the length of the array, the index value,
i
, is reset to
0 and the slideshow begins again.
8
The timer is set so that once every 1.5 seconds a new picture is displayed.
9
When the user clicks the button labeled “Stop Show,” the
clearTimeout()
function
is called, causing the timer to stop. The argument,
timeout
, is a reference to the
timer set on line 8.
10
The initial image is a picture of the planet Jupiter (see Figure 12.22). It is given
size dimensions, which will determine the size of all images in the slideshow. If
the images are of different dimensions, they will have to be scaled to this size. Not
properly sizing images will give them a distorted appearance.
Figure 12.22
Planet slideshow with two control buttons.
In Example 12.11 a set of planet images is displayed as a slideshow. If the viewer clicks
one of the planets, he or she is redirected to a Web page that describes that planet. This
