USE EVENTS TO CREATE DYNAMIC PAGES

Image rollovers (also known as mouseovers) were introduced in Netscape 3 and Internet Explorer 4. They have a continuing appeal to Web audiences, and are often used in navigation menus to display a second image when a user rollovers the first image.

In this section, the focus is on image rollovers; however, you're not limited to images and links for mouseover actions. Later in this lesson, you learn to create text rollover effects.

Important points to remember when creating image rollovers:

1. Be sure to give images a name and/or an id -- this is what makes them accessible to scripting. The most frequent error in image mouseover scripting is to forget to include a name attribute in the <img> tag.

<img name="myCat" id ="myCat" 
src="graphics/myCat.jpg" width="200" height="200">

2. The replaced image should be the same size as the original (to avoid page reflow problems in Netscape 4.x)
3. Don't use transparent images unless you want to see through one of the images (in order words, see parts of both images at the same time).
4. After giving an image a name, you can refer to it with JavaScript, for example:

document.images('myCat')

or

document.images.myCat.

5. Remember to include an onmouseout action unless you want the image to stay on display even after the user has moved the mouse off the image target.
6. You can create a function for the onmouseover action, and call the function in this way, for example:

<a href="myCats.html" onmouseover="rollIt('myCat')">;

7. Preload your images, so there's no delay when the user mouseovers the original image. You can do this with a block of code similar to this:

var Image1On = new Image();
Image1On.src = "graphics/image_1_on.gif";
var Image1Off = new Image();
Image1Off.src = "graphics/image_1_off.gif";

and so on for any images involved in mouseovers. Include this code in a script block in the head section of the page so that the images start preloading as soon as possible.

Remember to use the variable name when you create the event code, not the URL; for example, use:

onmouseover="document.myCat.src=myCatOn.src"

instead of

onmouseover="document.myCat.src=graphics/myCat.jpg"

Otherwise, you'll have image loading problems in Internet Explorer (it'll redownload the image every time there's a mouseover event).

8. Finally, to do multiple rollovers (in other words, change more than one thing for one mouseover event), follow the previous steps, but add a semicolon and then a second event action, similar to the following:

<a href="rooms.html" 
onmouseover="document.picField.src=tile1.src;
document.nav1Img.src=accomOn.src"
onmouseout="document.picField.src=outside.src;
document.nav1Img.src=accomOff.src">