<HTML>
<HEAD>
<TITLE> Javascript activity - slideshow </TITLE>
<SCRIPT>
imgArray =
new Array(8);
imgArray[0]
= new Image;
imgArray[0].src
= "lacrosse1.jpg";
imgArray[1]
= new Image;
imgArray[1].src
= "lacrosse2.jpg";
imgArray[2]
= new Image;
imgArray[2].src
= "lacrosse3.jpg";
imgArray[3]
= new Image;
imgArray[3].src
= "lacrosse4.jpg";
imgArray[4]
= new Image;
imgArray[4].src
= "lacrosse5.jpg";
imgArray[5]
= new Image;
imgArray[5].src
= "lacrosse6.jpg";
imgArray[6]
= new Image;
imgArray[6].src
= "lacrosse7.jpg";
imgArray[7]
= new Image;
imgArray[7].src
= "lacrosse8.jpg";
imgButton =
new Array(8);
imgButton[0]
= new Image;
imgButton[0].src
= "button1.JPG";
imgButton[1]
= new Image;
imgButton[1].src
= "button1d.JPG";
imgButton[2]
= new Image;
imgButton[2].src
= "button2.JPG";
imgButton[3]
= new Image;
imgButton[3].src
= "button2d.JPG";
imgButton[4]
= new Image;
imgButton[4].src
= "button3.JPG";
imgButton[5]
= new Image;
imgButton[5].src
= "button3d.JPG";
imgButton[6]
= new Image;
imgButton[6].src
= "button4.JPG";
imgButton[7]
= new Image;
imgButton[7].src
= "button4d.JPG";
index = 0 ;
function
doBack()
{
if
(index > 0)
{
index--;
document.slideshow.src
= imgArray[index].src;
}
return;
}
function
doNext()
{
if
(index < 7)
{
index++;
document.slideshow.src
= imgArray[index].src;
}
return;
}
function
processData(myform)
{
// chosenVal is going to hold the index # of
the picture to display
var
chosenVal = myform.choice.value;
var chosenVal =
parseInt(chosenVal,10);
index
= chosenVal - 1;
document.slideshow.src
= imgArray[index].src;
}
function
changeImg(cImg,ref)
{
document.images[cImg].src
= ref.src
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H1> MY JAVASCRIPT SLIDE SHOW</H1>
<P>
<FORM id ="picForm">
Enter picture to display:
<INPUT TYPE="text" NAME="choice"
VALUE="1"><P>
<INPUT TYPE="button" NAME="process"
VALUE="Process Request..."
onClick="processData(this.form)">
</FORM>
<IMG SRC = "LIONS.GIF"
NAME =
"slideshow"
WIDTH = 400
HEIGHT =
200 >
<p>
<H3>
<A onMouseOver =
"changeImg('imgButton1',imgButton[0]); doBack()"
onMouseOut =
"changeImg('imgButton1',imgButton[1])">
<img src="button1d.JPG"
name="imgButton1" height=30 width=100></A>
<A onMouseOver =
"changeImg('imgButton2',imgButton[2]); doNext()"
onMouseOut =
"changeImg('imgButton2',imgButton[3])">
<img src="button2d.JPG"
name="imgButton2" height=30 width=100></A>
<A onMouseOver =
"changeImg('imgButton3',imgButton[4]); doBack()"
onMouseOut =
"changeImg('imgButton3',imgButton[5])">
<img src="button3d.JPG"
name="imgButton3" height=30 width=100></A>
<A onMouseOver =
"changeImg('imgButton4',imgButton[6]); doNext()"
onMouseOut =
"changeImg('imgButton4',imgButton[7])">
<img src="button4d.JPG"
name="imgButton4" height=30 width=100></A>
</h3>
</CENTER>
</BODY>
</HTML>