<script language="JavaScript1.2">
<!--
// Define and populate a 2-dimensional array with image paths and corresponding descriptions
var imgArr = new Array(["images/image1.gif", "Image1 Caption"],
["images/image2.gif", "Image2 Caption"],
["images/image3.gif", "Image3 Caption"],
["images/image4.gif", "Image4 Caption"]);
// Define and initialize the array index
var imgSpot = 0;
// Increment the index
function showNextPic(){
viewNextPic();
}
function viewNextPic(){
imgSpot = imgSpot < imgArr.length - 1 ? imgSpot + 1 : 0;
showPic();
}
function showPic(){
document.images.mainPic.src = imgArr[img]pot[/img][0]; // Change the image
document.images.mainPic.alt = imgArr[img]pot[/img][1]; // Change the image's alternative text
defaultStatus = imgArr[img]pot[/img][1]; // Change the text in the Status bar
document.all.PicNum.innerText = (imgSpot + 1) + ": " + imgArr[img]pot[/img][1]; // Display the image number and description
}
// Decrement the index
function showPrevPic(){
imgSpot = imgSpot == 0 ? imgArr.length - 1 : imgSpot - 1;
showPic();
}
function AddToOptionList() {
// Add options to the selection list from the image Array
var optionSpot;
for(optionSpot = 0; optionSpot < imgArr.length ; optionSpot++)
document.all.PicList[optionSpot] = new Option(imgArr[optionSpot][1], optionSpot);
}
//-->
</script>
</head>
<body bgcolor="Silver" onload="AddToOptionList()">
<table width="100%"><tr>
<td width="15%" valign="top">
<a href="javascript:showNextPic()">Next</a>
<br><br>
<a href="javascript:showPrevPic()">Back</a>
<br><br>
Show Picture
<br> <select name="PicList" size="1" onchange="SelectPic()">
</select>
<br>
<br>
</td>
<td align="center" valign="top">
<img src="images/Search.gif" border="0" id="mainPic" alt="Picture Goes Here" >
<br><br>
Picture Number <span id="PicNum">1: Search Button</span>
</td>
</tr></table>
</body>
</html>
