HTML and CSS Reference
In-Depth Information
line 28 assigns a zero (0) to slideCntr, which reinitializes the counter to the first element
of the array. Using the length property allows a developer to add or subtract images in
the array without having to change other lines of code. Line 29 assigns the contents of
slides[slideCntr] to the image object, identified by the getElementById() method, so the
new image is displayed. The function then uses the setTimeout() method on line 30 to
make a recursive call to itself after a two-second delay. The brace (}) on line 31 completes
the slideShow() function.
To Create a User-Defined Function to Add a Slide Show
The following step enters the slideShow() function to create a slide show on the Nature Center page.
1
•
Click blank line 22,
press the
e n t e r
key
once, and then enter
the JavaScript code
(on line 23)
shown in Table
11-12 to create
the slideShow()
user-defined
function, indenting as
shown (Figure 11-17).
array contains slide
show filenames
user defined
function to run
slide show
assign slide
image to
<img> tag
place holder
display new slide
every two seconds
•
Press the
e n t e r
key
once after the closing
brace to complete the user-defined function.
Figure 11-17
To Enter an OnLoad Event Handler to Call a Function
The next step is to enter the onLoad event handler that calls the slideShow()
function when the Nature Center Web page loads. To call the slideShow() user-defined
function initially, an onLoad event handler is placed in the <body> tag. The following
steps enter the onLoad event handler to call the slideShow() function.
1
Position the insertion point between the y and the > symbol in the <body> tag on line 89.
2
Press the
s p a c e b a r
once.
3
Type
onLoad=”slideShow();”
to enter the onLoad event handler in the <body> tag,
and do not press the
e n t e r
key (Figure 11-18).
onLoad event handler
to start the slide show
do not press
e n t e r
key
Figure 11-18
