Index by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Creating Image-Based Rollovers

Problem

You want image-based rollovers to replace text links.

Solution

First, wrap the text inside the anchor element in a span:

<a href="/" id="linkhome">
 <span>Homepage</span>
</a>

Next, instead of JavaScript, use the background-image property within the :hover and :active pseudo-class selectors to swap the images (see Figure 7-24):

a span {
 display: none;
}
a:link {
 display: block;
 width: 100px;
 height: 50px;
 background-image: url(submit.png);
 background-repeat: no-repeat;
 background-position: top left;
}
a:link:hover {
 display: block;
 width: 100px;
 height: 50px;
 background-image: url(submit-roll.png);
 background-repeat: no-repeat;
 background-position: top left;
}
a:link:active {
 display: block;
 width: 100px;
 height: 50px;
 background-image: url(submit-on.png);
 background-repeat: no-repeat;
 background-position: top left;
}
The link with default, rollover, and active states

Figure 7-24. The link with default, rollover, and active states

Discussion

Replacing text with an image has five benefits. First, it separates the text from the presentation. The image that contains more elaborately formatted type is part of the presentation, and therefore is controlled by a style, while the content in the markup remains pure text. The second benefit is that an image heading can be modified across a whole site by one change of the stylesheet. The third benefit is that this method works for alternative styles and stylesheet ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required