sitemap
Rollover
Web Design & Development Guide
Rollover
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.
Coding
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:
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
<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.
sitemapsitemap |
