Making a Multimedia Website

You are here : HomeCreating a Multimedia Website Create Interactive Elements

Fact file5.1 Rollover Images


Rollover images are images that change when the site visitor moves their mouse over the graphic (the pointer “rolls over” the image). They provide a visual guide to alert the visitor to an active link.

Typically rollover images are used for buttons. The button might change colour or appear to move up or down slightly when the mouse pointer rolls over it. Roll your mouse over the image below and see what happens.

An example of a rollover image

For example, the button above is usually red with white text, but on rollover it becomes blue with yellow text.

A rollover uses two different images. One image is called the normal state for the image, which is how it looks when no mouse is over it. The second image is used for the rollover state. To work best, the second graphic should be exactly the same size as the original, and only differ in terms of colour.

normal staterollover state

It is good practice to produce both states at the same time from the same image. Designers create the normal state in a graphics package, then save it, for example, as email_normal. They then make the necessary changes and save it as email_over

Web design software such as Serif WebPlus has an Insert Rollover feature. This makes it easy to define both the normal and rollover images at the same time and creates the html code needed to perform the rollover effect.


Previous PageMain Site IndexSection indexNext page