Rollover

Rollovers

To the right is an effect known as a rollover. If you use your mouse to put the cursor over the fantasy football picture, it changes to the Othello picture. When you move your mouse away, it changes back.

This type of rollover is created by using two images and a little bit of JavaScript code. The JavaScript code can be embedded in the HTML page, but I recommend keeping it in a separate file. Here is the Javascript code and the HTML code:

// identify the src file for the Othello image
var o2 = new Image();
o2.src = "../images/o2.gif";
// identify the src file for the fantasy football image
var ff = new Image();
ff.src = "../images/ff.gif";
// here is the function that switches the images
function switchlogo(logoname){
if (logoname == "o2")
document.images["secondlogo"].src = o2.src
else document.images["secondlogo"].src = ff.src;
}

When the mouse is over the graphic, we call the function switchlogo with the parameter 'o2' and this causes the switch to the Othello graphic. When the mouse moves away (onMouseOut), we call the function switchlogo with the parameter 'ff' and we go back to the fantasy football graphic.

The most common use of rollovers is with graphics for menus. For example, if you go to the Hebrew Academy web site at www.mjbha.org and move your mouse cursor over "School Activities" a different graphic appears with a longer menu list. That is a rollover effect.