HTML and CSS Reference
In-Depth Information
EXAMPLE
15.27 (
CONTINUED
)
else{ #
W3C standard
10
start.addEventListener("click", startSlideShow, false);
stop.addEventListener("click", stopSlideShow, false);
}
}
11 function startSlideShow(){
12
picture=document.getElementsByTagName("img").item(0);
13
divCaption=document.getElementById("description");
if(i < hochimin.length){
14
picture.src=hochimin[i].src; //
Image replacement
divCaption.innerHTML=hochimin[i].title
i++;
}
else{i=0;}
15
timeout = setTimeout('startSlideShow()',5000);
}
16 function stopSlideShow(){
clearTimeout(timeout);
}
EXPLANATION
1
Global variables will be used by the functions.
2
When the page has finished loading the
onload
event handler is triggered, causing
the anonymous function to be activated.
3
The next two lines get a reference to each of the buttons in the HTML page, one
to start the slideshow and one to stop it.
4
This array will be used to preload all the images and to assign the location and
title to each image (see Figure 15.50).
5
All of the JPEG images used in the Web page are assigned to the literal array called
jpegs
.
6
The variable,
picfile
, is assigned the directory path to the image files.
7
The literal array,
title
, is a list of all the captions that will appear under the pic-
tures. They will be assigned as attributes of the image object.
8
The
for
loop is used to preload each image in the list of JPEGS and to assign both
an
src
attribute with the path and name of the image, and a title for the image.
9
If using Microsoft's event model, then we go into the block and attach an
onclick
handler to the object called
start
. When the user clicks the button, the
startSlide-
Show()
function will be called. Then we do the same for the
stop
object.
10
If using the DOM event model, the
addEventListener()
method will be attached to
the objects called
start and stop
. When the user clicks one of the buttons, the event
will be triggered to either start or stop the slideshow.
11
This is the function that will be called when the user clicks the “Start Slideshow”
button in the form.
