LD SoftwareBespoke Software, Web Design, Security Consultants and Host Services.


You have been warned!
We have caught 5852 shameful hackers.


Paypal Referral
Sign up for PayPal and start accepting credit card payments instantly.

Link Exchange
Join our free link exchange

Click Here

Web Design & Development Guide


Home | Up

Rollover refers to a button as 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 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 mouses that had a mechanical assembly consisting of a hard rubber ball housed in the base of the mouse (which rolls) as opposed to the modern optical mouse, which has no 'rolling' parts. The term mouseover is probably a more appropriate term considering today's 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.


There are different ways unto creating a rollover, while software and programs as a tool already prepared to make it easier to create a rollover. This is an example of a rollover in CSS and HTML:


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


<a href="http://en.wikipedia.org/"><span>Wikipedia</span></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 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 ares on the screen change to reflect what will happen if the user clicks.

External links

Home | Up | Cascading Style Sheets | Printer friendly | Brochureware | Digital strategy | DOM scripting | Fahrner Image Replacement | Microformat | Progressive enhancement | Rollover | Spacer GIF | Techniques for creating a User Centered Design | URL redirection | Web Interoperability | Web modeling | Web template | Web-safe fonts | Website architecture | Website wireframe

Web Design & Development Guide, made by MultiMedia | Websites for sale

This guide is licensed under the GNU Free Documentation License. It uses material from the Wikipedia.


Text Ads
There isn't content right now for this block.

Community Login


People Online:
Visitors: 180
Members: 1
Total: 181

Online Now:
01 : Monty

Like my code
Then please make a donation.

Which help me produce more free code.

Paypal Verified


Powered by PHP-Nuke

Valid CSS!

Valid Robots.txt

Bad Behavior

[Valid RSS]

[Valid RSS]
You can syndicate our News with backend.php And our Forums with rss.php
You can also access our feeds via Feedburner Site News and LD Software Forums
© 2009 ld-software.co.uk All Rights Reserved.
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Page Generation: 0.64 Seconds