342v2a.htm

var Index = 0; // global variable that ties the images, links, & messages together

var album = new Array();
if (document.images) { // pre-load images
album[0] = new Image();
album[0].src = "images/father.gif";

album[1] = new Image();
album[1].src = "images/aunt.gif";

album[2] = new Image();
album[2].src = "images/brother.gif";
}

var url = new Array(); // create Links Array
url[0] = "http://www.yahoo.com";
url[1] = "http://www.gardens.com";
url[2] = "http://espn.go.com";

var msg = new Array(); // create Messages Array
msg[0] = "Yahoo - My Father's Favorite Site";
msg[1] = "My Aunt Loves Outdoor Gardening";
msg[2] = "ESPN - The Place where my Brother gets all his Soccer Scores";

function showImage(sIndex) {
     // assign the picture index to the global variable
     // so that the matching link & message is tied to the image
     Index = sIndex;
     if (document.images) document.picture.src = album[Index].src;
}

function showMsg() {
status = msg[Index]; // display status bar messages
}

function go2() {
location.href = url[Index]; // jump to a new page
}

</SCRIPT>

The Body onLoad is necessary in order to reset the Select Menu. If this wasn't done the last Selected Item would remain when we return back to the page. Demo version without the onLoad.

<FORM NAME="myGallery">
     <SELECT onChange="showImage(selectedIndex)">
          <OPTION>Picture of me</OPTION>
          <OPTION>Picture of my aunt</OPTION>
          <OPTION>Picture of my brother</OPTION>
     </SELECT>
</FORM>

Week 4 - 342v2a.htm