HTML and CSS Reference
In-Depth Information
EXAMPLE
13.11 (
CONTINUED
)
4
season[0]=new Image();
5
season[0].src="winter.jpg";
season[1]=new Image();
season[1].src="summer.jpg";
season[2]=new Image();
season[2].src="fall.jpg";
season[3]=new Image();
season[3].src="spring.jpg";
6
function changeSeason()
{
7
var size= season.length - 1;
if( indx < size ) {
indx++;
}
else {
indx = 0;
}
8
document.times.src= season[indx].src;
9
timeout=setTimeout('changeSeason()', timeDelay);
}
10
function stopShow(){
11
clearTimeout(timeout);
}
</script>
</head>
<body bgcolor="cornflowerblue">
<div align="center"><font face="arial">
<h2>The 4 Seasons</h2><b>
To see slide show, put your mouse on the image.<br />
Move your mouse away from the image, to stop it.
12
<a href="JavaScript:void(null);"
onMouseOver="return changeSeason();"
onMouseOut="return stopShow()">
<
img name="times"
src="winter.jpg" align="left"
border=8 hspace="10" width="700" height="200">
</a>
<br />
</div>
</body>
</html>
EXPLANATION
1
A new
Array
object called
season
is declared. It will be used to store an array of
images.
2
A global variable called
indx
is declared and initialized to 0.
3
The value 2000 is assigned to another global variable, called
timeDelay
.
4
Using the
Image()
constructor preloads and caches the images. Each new image
object is assigned to an element of the
season
array.
Continues
