An Abbreviated Introduction to JavaScript


Changing the Image

This is a more advanced illustration of how you use links and onMouseOver to change images. In this case, each time you move over the fish, it should change to a different image. When you move off, it changes back to a default fish.

All of the images are taken from the Sherman's Lagoon icon gallery at

http://www.slagoon.com/gallery/macicons.html.


<script language="javascript1.1">
// Variable:
//   fishimg
// Description:
//   The most recent image we used for our "fishie"
var fishimg = "bob1.gif";

// Function:
//   selectFish()
// Parameters:
//   (none)
// Description:
//   Computes the next image to use for our "fishie"
// Note:
//   Uses variable fishimg to keep track of which one we used last.
function selectFish()
{
  if (fishimg == "bob1.gif") {
    fishimg = "fillmor1.gif";
  }
  else if (fishimg == "fillmor1.gif") {
    fishimg = "fish2.gif";
  }
  else if (fishimg == "fish2.gif") {
    fishimg = "hawthor1.gif";
  }
  else if (fishimg == "hawthor1.gif") {
    fishimg = "megan1.gif";
  }
  else if (fishimg == "megan1.gif") {
    fishimg = "quigley1.gif";
  }
  else if (fishimg == "quigley1.gif") {
    fishimg = "sherman1.gif";
  }
  else {
    fishimg = "bob1.gif";
  }
  document.fishie.src = "Images/" + fishimg;
} // selectFish()

// Function:
//   updateFish()
// Parameters:
//   (none)
// Description:
//   Updates the fish image and schedules another update in one second
function updateFish()
{
  selectFish();
  setTimeout("updateFish()", 1000);
} // updateFish()

setTimeout("updateFish()", 2000);
</script>

<img name="fishie" src="Images/fish1.gif"></a>

Source text written by Samuel A. Rebelsky.

This page may be found at http://www.math.grin.edu/~rebelsky/Tutorials/JavaScript/Spring1999/Examples/anifish.html

Source text last modified Wed Apr 14 12:27:23 1999.

This page generated on Wed Apr 14 12:33:31 1999 by SiteWeaver. Validate this page's HTML.