Week 4 - 342v3.htm

<SCRIPT>

var Index = 0;

var album = new Array();
if (document.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();
url[0] = "http://www.yahoo.com";
url[1] = "http://www.gardens.com";
url[2] = "http://espn.go.com";

var msg = new 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) {
     Index = sIndex;
     if (document.images) document.picture.src = album[Index].src;
}

</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.

<BODY onLoad="document.myGallery[0].options[0].selected=true">

<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>

<A HREF="javascript:location.href = url[Index];"
  onMouseOver="window.status = msg[Index]; return true;"
  onMouseOut="window.status=''">
<IMG SRC="images/me.gif" NAME="picture">
</A>