HTML and CSS Reference
In-Depth Information
EXPLANATION
1
A class defines the style of the first picture that appears in the document.
2
A class defines the style for the title at the top of each image in the slideshow.
3
A class defines the
div
position containing the start and stop buttons.
4
A class defines the title attribute of the
img
object that will serve as a caption un-
der each image as it is displayed.
5
The body selector sets the background color of the window.
Step 3:
The JavaScript File: Behavior and Interactivity
EXAMPLE
15.27
1 var i=0;
var timeout;
var hochimin;
2 window.onload=function(){
3
start=document.getElementById("startButton");
stop=document.getElementById("stopButton");
4
hochimin=new Array();
5
var jpegs=["DSCN1211.jpg", "DSCN1212.jpg","DSCN1239.jpg",
"DSCN1257.jpg", "DSCN1202.jpg", "DSCN1264.jpg",
"DSCN1218.jpg", "DSCN1266.jpg","DSCN1200.jpg",
"DSCN1232.jpg"];
6
var picfile="file:///C:/wamp/www/images/";
7
var title = [ "Sidewalk food of noodles, chicken, fish, etc.",
"Balloon lady in Hochiminh City",
"Water buffalo pops his head up from the mud.",
"Sundown along the Mekong Delta",
"Some very colorful and hairy fruit",
"Meat vendor in Ben Hanh market",
"Single proprietor selling goods",
"Preparing food at dawn",
"No thanks. No Moped. We're walking",
"Tour boats in the Mekong Delta"
];
8
for(var i=0; i<jpegs.length;i++){ //
Preload images
hochimin[i]=new Image();
hochimin[i].src=picfile + jpegs[i];
hochimin[i].title=title[i]; // Assign title to each image
}
9
if(window.attachEvent){ #
Is this Microsoft IE?
start.attachEvent("onclick", startSlideShow);
stop.attachEvent("onclick", stopSlideShow);
}
Continues
