Page Content

Synopsis

  1. If you use rollovers to change text format, consider using CSS rollovers. They generally do not interfere with screen readers, are better for low vision users because the edges remain crisp when the page is zoomed and are usually easier to maintain on the fly. See below for examples of different types of CSS Rollovers.
  2. Rollover links should be distinct from other text even in the "Off" state. Otherwise many users, especially those with older browsers may not realize they are there.
  3. If you use an image rollover with Javascript, then make sure the ALT tag in the "Off" image is descriptive. For rollovers showing complex concepts, make sure a text description is included. See example below.

Top of Page

CSS Rollovers: Font Color Change

There are several specifications you can use to create a different type of rollover effects including changes in font color and style, changes in color background and additions of borders to create "buttons". This page will start with examples of font format changes.

Note: These techniques will work in Firefox, Mozilla, Internet Explorer, Safari or Opera, but not in earlier browsers such as Netscape 4.7. It is important to make sure that links are distinctive even in the "off" state.

For global specifications, you would need to create a . css file and write specifications for these classes:

a (all links)
a: hover (links with the mouse cursor over it)
a: focus (links tabbed to on a keyboard)
a: visited (visited links)

Here is some code for making all links navy blue (#000066) which change to bright green (#006633) and adds an underline when the mouse passes over it. I’ve also specified "font-weight: bold" in order to make the links more visible.

Note: Underlining links embedded in the context is important to help users with color-deficient vision identify links.

Links which turn Green

CSS File Specification

a {color: #000066; font-weight: bold} /*Navy Blue*/
a:hover, a:focus {color: #006633; font-weight: bold; text-decoration:underline} /*Green*/
a:visited {color: #9900FF; font-weight: bold} /* Purple */

HTML Code

<a href="#">Green Link </a>

Sample Link (Changes to green on Hover or Keyboard Focus)

Green Link

 

The key to the rollover is in the specification in the a:hover (mouse effect) and b:focus (keyboard effect) classes. Because they have been specified as a different color than the a (anchor) tag, all links for a document linked to that style sheet will change to green when the mouse rolls over it or a person tabs to it on a keyboard. The style is coded once, but all links become rollovers automatically.

Changing the Background Color

With style sheets, you can also add specifications to change the background color of a link. In this case, this is done by doing nothing to a, but making the a:hover/a:focus tags change its color to white and it’s background-color to gray (#333333). A left-padding and a right-padding of 3 pixels have been added to make the item more "button" like.

Links which change background colors

CSS File Specification

a {padding-left: 3px, padding-right: 3px}
/* You need to specify padding in a in order to keep the text in the same position as in a:hover, a:focus */
a:hover, a:focus {color: #white; background-color: #333333
padding-left: 3px, padding-right: 3px }

HTML Code

<a href="#">Background Changing Link </a>

Sample Link

Background Changing Links

Top of Page

Classes for Special Navigational Links

One advantage of stylesheets is that you can specify different behaviors of the same tag depending on the context. For instance, many sites visually distinguish between two types of links – those embedded in the text and those used for general navigation (e.g. "Home" and "Sitemap"). Links embedded in the text are typically underlined, while those used for navigation may be made to look more "button" like with different background colors and no underlining.

In this first example, I will create a class of navigation links which are bigger, green (#006633) and not underlined. When a mouse rolls over them, an underline will appear and the color will change to black. Links like these might be placed within a colored table layout cell, toolbar or div.

The first step is to create a class of links called "mainnav". This is done by declaring "a.mainnav," then specifying the style classes as before. In this case I need to add a statement "text-decoration:none" in order to block the default underline of most links. To get the underline to appear at a mouseover, a parallel "a:hover.mainnav" and "a:focus.mainnav" classes are declared and specified as "text-decoration: underline." Finally, in order to block any color changes for visited links, a statement a:visited.mainnav is added and given the same values as a.button.

Within the HTML file, all links which are meant to be button like are specified as <a class="mainnav" href="" >. See the example below.

Green Plain Text Button Style Link

CSS File Specification

/* .mainnav means the "mainnav" class*/
a.mainnav {font-weight:bold; font-size: 1.25em; text-decoration:none;}

a:visited.mainnav {font-weight:bold; font-size: 125%; color: #666666;}
/* You need to specify identical font face and size for a.button and a:visited.button in order to keep appearance the same*/
a:hover.mainnav, a:focus.mainnav {color: #063}

HTML Code

<a href="#" class="mainnav" >Main Navigation Link </a >

Sample Link

Main Navigation Link

Top of Page

C.S.S. Button Style Links

The trickiest type of link to encode are links which look like buttons. As with the previous section, you need to create a class of link and specify appearance for a, a:hover, a:focus and a:visited.

The most important step is to add the specification display:block to the A tag. This allows you to specify borders and padding as if the link were contained in a box.

In the example a DIV class called "navigation" has been created and the CSS specifies that links in this DIV are black, non-underlined text with a gray background (#DDDDDD) and changes to white text on a black background. The CSS also adds 5px padding and a 3px margin below the link to control spacing and a border which coordinates with the text.

Rollover Button with Border

CSS File Specification

div.navigation {font-size: 125%; font-weight: bold; text-align: center;
width:50%}
/*div.navigation is the holder unit for the block links. Use this to control the appearance and position of the background for a set of links. */

div.navigation {width:30%; margin: 0 35% 0 35%;}
div.navigation a {display:block; color: black;
background-color: #CCCCCC; text-decoration: none;
padding: 5px; border: 3px solid black; text-align:center;}
div.navigation a:visited {display:block; color: black;
background-color: #CCCCCC; text-decoration: none;
padding: 5px; border: 3px solid black}
div.navigation a:hover, p.navigation a:focus {display:block; color: white;
background-color:black; text-decoration: none;
padding:5px; border: 3px solid white}

HTML Code

<p class="navigation"> <a href="#">Button Link </a> </p>

Sample Link

Top of Page

Image Rollovers

Since CSS can also be used to specify background images, almost all the visual effects found in a JavaScript rollover are available through CSS.

First, you will need to know the pixel dimension of your image. Note that if two images are used, the total dimensions should be the same, even if you add visual padding in one image.

Defining the Styles

There are several approaches one can take, but in this case a class a.surprise is defined to be the same width as the image and it includes a border. The text is centered aligned and some top and bottom has been added.

For a.surprise:hover (and :focus), images are specified in the background-image: url() attribute.

In this case, only the a:hover is specified with a background image. The a just has a color code for its background.

Image Rollover in CSS Button

CSS File Specification

a.surprise {font-size: 1.25em; font-weight: bold; text-align: center;
width: 250px; padding-top:5px; padding-bottom:5px;
color:#000; background-color:#FFF;background-image:none;
text-decoration:none;}

a.surprise:hover, a.surprise:focus {background-image:url(surpriseme.gif);

HTML Code

<div class="surprise">&nbsp; </div>

Sample Link

Surprise Me

This rollover should reveal a colorful spectrum background image.

Top of Page

Rollovers to Compare Images

Sometimes, a rollover is used to allow users to compare two versions of a similar image. If a CSS rollover is being used to compare two images, then a text description must be included.

In the example below, a CSS rollover in an empty link text is used to compare a color and black and white version of a bar chart. The CSS specifies the A tag as having the same dimensions as the two images and a background image for the inactive and for hover/focus states. The link text is then embedded in a SPAN set -5000 pixels offscreen. See the Skip Nav page for more information on hiding text.

Color vs. Black and White Bar Chart

Hover or click in the chart image below to see the black and white version.

Rollover Effect

Rollover Description

This rollover shows a color bar chart with red, blue and green contrast with a grayscale version in which all three bars appear to be the same shade of gray. It is an example of how color coding alone can be inaccessible.

View the Code

Note that the paragraph above includes the tabindex=”0″ attribute so that keyboard users stop at the explanation before activating the link.

<p tabindex="0">Hover or click in the chart image below to see the black and white version.</p>
<a href="#" class="chart"><span style="margin-left:-5000px">Rollover Effect</span></a>

View the CSS


a.chart {
display: block;
width: 342px;
height: 302px;
border: 2px solid #000;
background-image: url(http://accessibility.psu.edu/wp-content/uploads/sites/7691/2014/12/chartbarcolor.jpg);
}
a.chart:hover,a.chart:focus {
background-image: url(http://accessibility.psu.edu/wp-content/uploads/sites/7691/2014/12/chartbarbw.gif);
}

Javascript Rollovers

There may a few cases in which it is desirable to create a rollover with Javascript, but there are some guidelines to follow.

  1. The ALT tag describes the two images – in the chart case above alt="Color Chart versus Grayscale Chart". If this were a link, the ALT tag would describe the location of the link.
  2. Follow other guidelines for JavaScript and other scripting processes.

Top of Page