lecture 8: rollovers

On the right is a very simple rollover. The "button" will change its state when you place the mouse pointer over it (try it). One would assume this would be used as a link, but at the moment it's just a "dummy" - although in lecture 10 more will be said about using images like this . The page in the online teaching materials will say more about the technicalities of causing an image to "roll over" in this way. Here we will think about the general principles, and some dos and don'ts.

There are two images working together here: the original button, which is called buttonimage1.jpg and the "pressed-in" version, which is buttonimage1a.jpg. What I've done is give an instruction to the browser - or rather, two. The first says:

"When the mouse pointer is over the image, display buttonimage1a.jpg in place of buttonimage1.jpg."

And the second says:

"When the mouse moves back off the image, display buttonimage1.jpg again".

(Note that it is not obligatory to include the second instruction. You could leave the second image in place, or even load up a third image.)

The two instructions make use of two different JavaScript events. The first is referred to by the name, onmouseover and the second, onmouseout. These events are incorporated in a dummy <a> tag placed around the image. The other thing that is needed to make this work is a name attribute in the image, in order that the browser knows which image to swap. The code is as follows - this code is also on your handout for this lecture:

<a href="#startcontent" onmouseover="document.button1.src='buttonimage1a.jpg'" onmouseout="document.button1.src='buttonimage1.jpg'">
<img src="buttonimage1.jpg" alt="Image: rollover demonstration" name="button1" />
</a>

Now, have a look at this rollover demo (in the second browser window). This is the "Beautiful Britain" multipart image from the previous lecture, only now, each of the four parts of the image can roll over separately from the others. This should illustrate some of the potential of this combination. Do have a look at the rollovers page in the online teaching materials for more suggestions.

Rollovers can be very effective but they can also be used badly. Remember that the rollover only works if people have reason to activate it. The worst thing to do is "hide" important information under a rollover. As Vincent Flanders (scourge of dodgy web design, seemingly unrelated to Homer Simpson's neighbour) says on his site Web Pages That Suck, this is known as "mystery meat" because, as in some dubious restaurants, you're never quite sure what the "meat madras" is until you take a bite. It's worth spending a minute or two reading the page I've linked to in this paragraph, although it could do with being a bit less obnoxious about the motivations behind web design.