www.cryer.co.uk
Brian Cryer's Web Resources

How to do rollovers

A rollover is where an image, background or text changes as the cursor is moved across the item. Simple rollover effects can be achieved using JavaScript.

Most browsers (certainly Internet Explorer and Netscape Navigator) support 'onMouseover' and 'onMouseout' events. These allow JavaScripts or scriptlets to be called when the mouse is moved over an item ('onMouseover') and when the mouse is moved away from the item ('onMouseout'). This can be used to implement simple rollovers.

For example, to change the background colour as a rollover:

www.cryer.co.uk/brian This uses:

onmouseout="this.style.backgroundColor=''"
onmouseover="this.style.backgroundColor='burlywood'">

emily.cryer.co.uk
explained.at

Alternately, to change the foreground colour or attributes:

www.cryer.co.uk/brian This sets the text bold, using:

onmouseout="this.style.fontWeight='normal'"
onmouseover="this.style.fontWeight='bold'"

Warning: The disadvantage of making any changes to the font (other than its colour) is that it causes the text to resize. This can play havoc with tables and is best avoided.

emily.cryer.org.uk
explained.at