Rollover refers to a button created by a web developer or web designer, found within a web page , used to provide interactivity between the user and the page itself. The term rollover in this view originates from the visual process of “rolling the mouse cursor over the button” page itself. The part of the term ‘roll’ is probably a reference to a mechanical assembly of a hard rubber ball in the base of the mouse (which rolls) to the modern optical mouse, which has no ‘rolling’ parts . The term mouseover is probably more suitable for current technology.

Rollovers can be done by imagery, text or buttons. The user only requires two images / buttons (with the possible addition of “alt” text to these images) to perform this interactive action. Rollover imagery can be done with a built-in tool or script coding. The user will have a second image. A mouse action will be set to “click on” or “mouse over” in order to roll out to be triggered. Note that when the “mouse over” moves on the image, the alt image / secondary image will appear but will not stay – when the user “mouses out” by moving the mouse from the image, the original source image will reappear. quote needed ]


There are several different ways to create a rollover. This is an example of a rollover in CSS , JavaScript and HTML :


a {
 background-image : url ( default.png );
 color : white ;
 display : block ;
 height : 30 px ;
 width : 100 px ;
a : hover {
 background-image : url ( rollover.png );
 color : lightpink ;


var link = document . querySelector ( "a" );
link . addEventListener ( "mouseover" , function () {
 this . style . backgroundImage = "url (rollover.png)" ;
 this . style . color = "lightpink" ;
function setStyleDefaults () {
 link . style . backgroundImage = "url (default.png)" ;
 link . style . color = "white" ;
setStyleDefaults ();
link . addEventListener ( "mouseout" , setStyleDefaults );


< A href = "" > Wikipedia </ a >

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 size.
  • Fading rollovers : when the user moves the mouse over an image / text or button, or fades in or out, depending on the user control.
  • Disjointed rollovers : when the mouse is moved over an image or button, other areas on the screen changes to reflect what will happen if the user clicks.