Lab 8: Javascript Events - Rollovers and Random Images

As you have seen in lecture, the implementation of rollovers depends on catching some JavaScript events and reacting to them, i.e. on creating Event Handlers. The events we are interested in are Click, MouseOver, and MouseOut. If you need a reminder about the relevant code to implement an image rollover, the lecture notes are linked here.

Part 1a: Simple Rollovers

Today, we will use the Rollover technique to create the effect, on a web page, of a simple button rollover.

Part 1b: Double Rollovers

You can use the same technique to catch more than one event! Look at these double rollovers.

Part 2a: Using Javascript random numbers

The Javascript function Math.random() generates a random fractional number between 0 and 1.

To get a random number between 0 and n (n excluded), you use:
n * Math.random()

If you want an integer between 0 and n (n excluded), you can use the Math.floor() Javascript function:
Math.floor(n * Math.random())

You may want to look at this page, which uses the formula given above to produce integer random numbers in a certain range. (You will need to reload the page several times in order to see several random numbers.) You are encouraged to look at the source code as well!

Part 2b: Displaying a random image

Several of you have expressed interest in displaying a random image on some page of your projects. Now, you can! For a demonstration, look at this page. (The Wellesley College home page also uses random images). Every time one accesses this page, they will see a different image. Reload the page to see this effect!

Here is how to implement this:
Create a new web page. Use Javascript to:

produce an integer between 0 and n, where n is the number of images you want to randomly choose from. (Save that number in a variable, since you will need to refer to it from the next step.)
place a different image on the page, depending on the produced random number.

Test your page, in the main browsers, to make sure it works properly.