HTML and CSS Reference
In-Depth Information
is accomplished by assigning the image to a link; that is, a link that is assigned a Java-
Script user-defined function and triggered when the user clicks the image.
EXAMPLE
12.11
</html>
<head><title>Planet Slide Show</title>
<script type="text/javascript">
1
var timeout;
var step=0
var whichimage=0;
2
var planet=new Array();
function preLoadImages(){
3
planet[0]=new Image();
planet[0]="/images/Jupiter.bmp";
planet[1]=new Image();
planet[1]="/images/Neptune.bmp";
planet[2]=new Image();
planet[2]="/images/Earth.jpg";
planet[3]=new Image();
planet[3]="/images/venus.jpg";
planet[4]=new Image();
planet[4]="/images/http:/mars.jpg";
}
4
function slideShow(){
5
document.images["planet_pic"].src=planet[step];
6
whichimage=step
;
7
if (step < planet.length){
step++;
}
else{
8
step=0;
}
9
setTimeout("slideShow()",1800);
}
10
function slideLink()
{
11
switch(whichimage)
{
case 0:
12
window.location
=
"http://www.nasa.gov/worldbook/jupiter_worldbook.html";
break;
case 1:
window.location=
"http://www.aerospaceguide.net/planet/planetneptune.html"
break;
case 2:
window.location=
"http://www.windows.ucar.edu/tour/link=/earth/earth.html";
break;
