HTML and CSS Reference
In-Depth Information
The following step creates an image object at a specific location on a Web page.
1
•
point on line 105
after the <p class=
”paragraph_header”>
tag.
Position the insertion
<img> tag with id
attribute to identify
slide show location
start typing
code here
•
Table 11-11 on the
previous page to
define and place the
initial image and do
not press the
e n t e r
key at the end of the
line (Figure 11-16).
Enter the code in
do not press
e n t e r
key
Figure 11-16
Creating the Slide Show User-Defined Function
The first step in creating the slide show is to create an array in which to store the
filenames of the images that will compose the slide show. The Nature Center Web page will
contain only six images: chapter11-1elm.jpg, chapter11-1oak.jpg, chapter11-1ginko.jpg,
chapter11-1japanesemaple.jpg, chapter11-1magnolia.jpg, and chapter11-1blue_bean.jpg.
Recall that the random image generator used a null entry in the array because the random
number generator code did not produce a zero. The slide show array will not need a null
entry, because every image in the array, including the image in the zero position, will be
cycled through by the JavaScript code.
Table 11-12 shows the JavaScript code for the user-defined function slideShow(),
which creates the array and the cycles through the images displaying one after the other.
Table 11-12 Code to Create the slideShow() Function
Line
Code
var slides=new Array(“chapter11-1elm.jpg”, “chapter11-1oak.jpg”,
“chapter11-1ginko.jpg”, “chapter11-1japanesemaple.jpg”,
“chapter11-1magnolia.jpg”, “chapter11-1blue_bean.jpg”)
23
24
25
var slideCntr=slides.length-1
26
function slideShow() {
27
slideCntr+=1
28
if (slideCntr==slides.length) slideCntr=0
29
document.getElementById(“slideHolder”).src = slides[slideCntr]
30
setTimeout(“slideShow()”,2000)
31
}
Line 23 begins by creating an array named slides, with six image filenames set as
the data elements. Line 25 initializes the counter variable named slideCntr to the number
of elements in the table using the length property slides.length. One is subtracted from
the length so the counter does not exceed the number of elements in the array on line 27.
Line 26 declares the user-defined function slideShow(). Line 27 increments the slideCntr
by one, and line 28 tests the counter against the number of items in the array, using
the slides.length property. If slideCntr is equal to the number of elements in the array,
