ACOM: Web Design Tutorial Site

Rollover images

A "rollover" image is one that can change its state on screen. Usually this happens when the user places his or her mouse pointer over the image. You can try it with this image. Now, obviously that's an entirely gratuitous use of the technique, designed to raise a mild laugh more than anything else, but as we'll see there are some more productive applications. (I should point out at this stage that this isn't my baby son, although there have been times when he's pulled similar faces!)

To make a rollover, you need two images. In the example above, they are as follows (reduced in size):

This is an image called madbaby.jpg		This is an image called madbaby2.jpg

It is madbaby.jpg that is first placed on the page in the normal way, using a standard <IMG> tag. What you must then do is tell the browser to swap the images over when a particular event happens: in this case, an "onMouseOver" event. This is another simple piece of JavaScript, placed in a fashion that makes it resemble an attribute. It has to be located in <A> tags that surround the image, as follows:

<A HREF="#" onMouseOver="document.baby.src='madbaby2.jpg';"
               onMouseOut="document.baby.src='madbaby.jpg';">
    <IMG SRC="madbaby.jpg" NAME="baby" BORDER="0"
         ALT="Rollover image demo">
</A>

Because the best way of making this technique work is to do so within a link, but because the image is not meant to serve as an actual link, the link is what is known as a dummy. The HREF="#" suggests it is an anchor link, but there is no destination. I have also included BORDER=0 within the <IMG> tag to ensure the image renders without an unnecessary border. (Note that HREF="#" does in fact have a destination - it will return you to the top of any given page. If the rollover image is not an actual link but is not at the top of a page, you may need to define an anchor link at the image in question. The "Northern Travelling Seagulls" image seen earlier is an example of this.)

As to the rest of that HTML, the key to the rollover technique is the NAME attribute. Just as in anchor tags and the <MAP> tag, by giving an HTML element a NAME, you are enabling the browser to refer to that element from another part of the HTML file. As it happens, the reference is made in the immediate proximity of the NAME in this case - e.g., the <A> tag immediately surrounding the NAMEd image - but it doesn't have to be, as I'll suggest below. Anyway, the onMouseOver "attribute" consists of some JavaScript which basically says, "take the element named baby in the current document and change its SRC to the file madbaby2.jpg when the mouse is over that element." All rather logical, when you put it like that.

The onMouseOut event changes things back once you're done. Note that there's nothing stopping you leaving the second image in place, by omitting the onMouseOut portion; nor would there be anything stopping you loading up a third image when the mouse moves off, instead of reverting to the original.

The tag in which the onMouseOver event is located doesn't have to be actually around the image being changed. It's the NAME which draws the two into a relationship, not their being nested. See this example. These links will actually work if you try them; I do that here to show you how you can nowstart livening up your menu bars:

Go to the lesson on navigation and menus

Go to the lesson on JavaScript

Go to the lesson on frames

Note that although the three arrows are identical in terms of the two images which comprise them, they each have different NAMEs. They have to, otherwise placing the mouse over any one of the links would cause all three arrows to change simultaneously. This time, the rollover image is not itself a link; rather, the onMouseOver and onMouseOut events are placed within the active <A> tag surrounding the nearby text. But there's no reason why the event and the image being changed even need to be particularly near each other, though obviously they have to be on screen at the same time, otherwise the procedure is nearly pointless.

As to how to create these images, use a graphics package! To go into detail is beyond the scope of this web site, but once I'd got madbaby.jpg, it was only the work of about five minutes with Paint Shop Pro to create madbaby2.jpg, and I'm pretty inept with graphics packages, to tell the truth. Be creative!

Of course you could "roll" between two images that were only vaguely related, if at all. I think this is a waste of time, though; if you want to show two images on a page, show them both in the ordinary fashion. The two images below (the one you can see first, and the one you'll see if you place the mouse pointer over it) are vaguely related (that's Lewis Carroll, that is), but what's the point of the rollover? And note the distortion which occurs because the two images are not the same size. No, if you're going to do this sort of thing, have two images that are closely related and generally alike, so the rollover has visual impact and isn't gratuitous.

A further development of this idea comes on the page about multipart images. If using the technique for any image that is larger than a few Kb - that is, almost all images - you should really preload the image, as if the new image isn't in your cache, the time taken to load it up can completely spoil your use of this technique.

A final word of warning - do give the reader cause to place their mouse over a rollover image. If there's one there, tell them about it! Also, don't "hide" important information under a rollover. It's very irritating to come to a page and find that the author has gratuitously hidden half the content simply to show off their mastery of the rollover technique. (Some critics of this style have called it "mystery meat" - like the "meat" in certain take-aways, you don't know what it is until you've taken a bite, and then you might not like it.) As ever, if you're going to do this sort of thing, have a point. But it's very common, and once you've got the two images, quite easy to produce eye-catching effects. It's main use is in livening up your menu bars, and more detail comes on this in lesson 10.

Back to the top

Back to the menu for lesson 7