Creating Video

You are here : HomeCreating Graphics for the WebCreate Navigation Buttons

factfile4.4 Rollover buttons


Rollover images are images that change when the site visitor moves their mouse over the image (the pointer “rolls over” the image). They provide a visual guide to show the visitor that the image is an active link and can be clicked on.

Typically rollover images are used for buttons. The button will change colour in some way when the mouse pointer moves over it. For example, in the button below the background colour is yellow, but on rollover it changes to pink. Contrasting colour combinations are often used.


A rollover uses two different images. One image is the “normal” state for the image, which is how it looks when no mouse is over it. The second image is then used for the rollover state. To work best, this image should be exactly the same size as the original, and only differ in terms of the colours used. Adding a rollover will increase the total file size of the graphics on a page because the browser will load all the images – both normal and rollover states – at the same time.

Roll your mouse over the image below to see what happens.

Rollover example 2

Graphics software such as Serif DrawPlus and PhotoPlus allow designers to create rollover graphics quite simply. One image file can contain different layers, where the colour changes and rollover effects are applied. These layers are then saved as separate image files when the final graphics are exported to the web.

The helpsheet How to make rollover buttons in DrawPlus will help you.

pushpin How to make rollover buttons in DrawPlus

video Rollover buttons in DrawPlus - Slice web objects : demo : training

video Rollover buttons in DrawPlus - Create three states : demo : training

video Rollover buttons in DrawPlus - Export and optimise : demo : training

video Rollover buttons in DrawPlus - Preview in a browser : demo : training

Previous PageMain Site Indexsection indexNext page