HTML and CSS Reference
In-Depth Information
EXAMPLE 12.11 ( CONTINUED )
case 3:
window.location=
"http://csep10.phys.utk.edu/astr161/lect/venus/venus.html";
break;
case 4:
window.location=
"http://www.nasa.gov/worldbook/mars_worldbook.html";
break;
}
}
</script>
</head>
13 <body bgColor="black" onLoad = "preLoadImages(); slideShow()" >
<font color="white">
<big>
Click on a Planet<br /><br />
14 <a href="JavaScript:slideLink()">
<img src="Jupiter.bmp" name="planet_pic"
border="0" width="120" /> </a>
</big>
</font>
</body>
</html>
EXPLANATION
1
Global variables that will be used by the functions in this program are declared in
the head of the document.
2
The Array() constructor creates an array object, called planets .
3
The Image() constructor will preload and cache four images and assign them to
the array created in line 2.
4
This function starts the slideshow. It displays an array of images one at a time at
selected intervals of 1.8 seconds.
5
The src property of the first element of the image array is assigned an image called
Jupiter.bmp . Each array element is assigned a different image. Every 1.8 seconds
an image is replaced with a new image in the array, until all the planets have been
displayed, at which time the index value, called step , is set back to 0.
6
The variable, whichimage , is used to get the index value of the image that was just
clicked by the user. This value will be used in the switch statement on line 11.
7
As long as the value of step is less than the size of the planets array, the step value
will be incremented by 1, taking us to the next image in the array.
8
When the index value is greater than the size of the array, it will be reset to 0.
9
Here the JavaScript time is set to call slideShow() every 1.8 seconds.
10
The function slideLink() is defined. Its purpose is to redirect the user to a page de-
scribing the planet when he or she clicks its image.
Continues
Search WWH ::




Custom Search