Webstandards, Accessibility and Usability at Penn State

This Page

1. Synopsis
2. CSS Rollovers: Font Color Change
3. CSS Rollovers: Changing Background Color
4. CSS Rollovers: Classes for Navigational Links
5. CSS Button Style Links: Simple
6. CSS Button Links with Borders
7. CSS Image Rollovers
8. Javascript Rollovers

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 they 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: visited (visited links)

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

The key to the rollover is in the specification in the a:hover class. Because it has been specified as a different color than the a (anchor) class, all links for a document linked to that style sheet will change to green when the mouse rolls over it. The style is coded once, but all links become rollovers automatically.

C.S.S. Rollovers: 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 tag change it's 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.

Top of Page

C.S.S. Rollovers: Classes for Special Navigational Links

One advantage of stylesheets is that you can create 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 parralel "a:hover.mainnav" class is declared and is 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.

Top of Page

C.S.S. Button Style Links: Simple

The trickiest type of link to encode are links which look like buttons. The simplest way to do it is to create a class of link which has one background color for the a and a:visited statements and another for a:hover. Here a class called "button1" has been created which starts out with black, non-underlined text with a pink background (#FFCCFF) and changes to white text on a purple background. As with the second case, a left and right padding of three pixels have been added. See the example below.

Top of Page

C.S.S. Button Links with Borders

Changing the background color is still somewhat limited though. Ideally, one would also want to specify borders, and add additional padding at the top and bottom of a link.

Defining the Styles

For this example, I will create a class of links which have a gray background (#CCCCCC), a padding of five pixels and a black, three pixel solid border. When the mouse rolls over it, the link will become black with white text and a white border.

In order to access controls for borders and padding, you must specify that a specific class of links will be treated as a "block", like a P or H1, instead of as a "span". This is done by specifying a region such as a P, here called "navgation" within which a, a:visited and a:hover will behave as "blocks". To declare this, a statment p.navigation a is added and given its features. The browser will interpret these as meaning that any A tag found within a <p class="navigation" > statement will behave as a block. The p.navigation class itself contains specifications for font size, center alignment and a width of 50% of the page. These standardize the appearance of the "button" across the three type of a classes.

The statement for p.navigation a specifies no underlining, bold face and background-color as before. The property display:block will access the additional properties such as padding: 5px and border: 1px solid black. Similar statements for p.navigation a:visited and p.navigation a:hover are needed to complete the effect. See the example below.

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.

Note: If the rollover is being used to compare two images, then a text description must be included in either hidden or visible text.

Defining the Styles

In this case, the links are embedded in a p.surprise class which is set to the height and the width of the image(s) - which is 250 pixels wide and 50 pixels high. As with the previous example, the A tags must be treated as a block so that the background can be formatted with CSS. Images are specified in the background-image: url() specification.

In this case, only the a:hover is specified with a background image. The a and a:visited just have a color code for their backgrounds.

Top of Page

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.

This rollover shows a color bar chart with red, blue and green contrast with a grayscale version in which the contrast is almost muted. It is an example of how color coding alone can be inaccessible.