Rollover refers to a button created by a web developer or web designer, found within a web page

Web page

A web page or webpage is a document or information resource that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a monitor or mobile device. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext...

, used to provide interactivity between the user and the page itself. The term rollover in this regard originates from the visual process of "rolling the mouse cursor over the button" causing the button to react (usually visually, by replacing the button's source image with another image), and sometimes resulting in a change in the web page itself. The part of the term 'roll' is probably referring to older mice which had a mechanical assembly consisting of a hard rubber ball housed in the base of the mouse (which rolls) contrary to the modern optical mouse, which has no 'rolling' parts. The term mouseover

Mouseover

In computing a mouseover, mouse hover or hover box refers to a GUI event that is raised when the user moves or "hovers" the cursor over a particular area of the GUI. The technique is particularly common in web browsers where the URL of a hyperlink can be viewed in the status bar...

 is probably more appropriate considering current technology.

Rollovers can be done by imagery, text or buttons. The user only requires 2 images/buttons (with the possible addition of "alt" text to these images) to perform this interactive action.
Rollover imagery can be done either by a program with a built-in tool or script coding. The user will have to pick a first image and select an alternate secondary image. A mouse action will have to be set to either "click on" or "mouse over" in order for the rollover to be triggered. Note that when the "mouse over" moves on the image, the alt image/secondary image will appear but won't stay - when the user "mouses out" by moving the mouse away from the image, the original source image will reappear.

Coding

There are several different ways to create a rollover. This is an example of a rollover in CSS

Cascading Style Sheets

Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...

 and HTML

HTML

HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....

:

CSS

a {
display: block;
width: 100px;
height: 30px;
background-image: url(default.png);
}
a:hover {
background-image: url(rollover.png);
}
a span {
display: none;
}


HTML
Wikipedia

Different types of rollovers

While rollovers are not in themselves animated images, some users and HTML experts have managed to create animation-like effects.

• Zooming rollovers: when the mouse is moved over an image/text or button, it increases its size, depending on the limit size the user sets. link
• Fading rollovers: when the user moves the mouse over an image/text or button, it either fades in or out, depending on the user control link
• Disjointed rollovers: when the mouse is moved over an image or button, other areas on the screen change to reflect what will happen if the user clicks.

External links

• Tutorial on creating a rollover (limited application)
• Tutorial for creating accessible rollovers