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.
Today, we will use the Rollover technique to create the effect, on a web page, of a simple button rollover.
You can use the same technique to catch more than one event! Look at these double rollovers.
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!
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!
To implement a page like this, start with your page from the last exercise, which generates a random number. Do the following:
Test your page to make sure it works properly.
© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified:
Monday, 26-Oct-2009 13:08:48 EDT
