Приглашаем посетить
Хемницер (hemnitser.lit-info.ru)

Styling Links with Background Images

Previous Page
Table of Contents
Next Page

Styling Links with Background Images

Following on from the preceding example, it is possible to display a small icon beside every external link.

The first step is to create basic rules for the required link states. In this case, you can use a:link, a:visited, and a:hover.

Three new states are then added, specifically for links styled with an "external" class. These are a.external:link, a.external:visited, and a.external:hover.

In each case, a background image is added to the link. The image is set to no-repeat so that it doesn't tile across the background of the entire link. The position is set to 100%, which will place the right edge of the image against the right edge of the link.

A single background image is used for all three states. The vertical background-position needs to change for each state. This means that a single image is loaded and cached, so there is no lag when the rollover image is required.

The a:link state has been set to 0. The a:visited state has been set to 100px. The a:hover state has been set to 200px. The background image is shown in Figure 10.2.

Figure 10.2. Screenshot of background image used to style the .external link.

Styling Links with Background Images


Finally, padding has been used to push the link content away from the background image as shown in Listing 10.4 (see Figure 10.3).

Listing 10.4. CSS Code Containing the Markup to Style the .external Link
a:link
{
    color: blue;
}

a:visited
{
    color: purple;
}

a:hover
{
    color: red;
}

a.external:link
{
    background: url(chapter10.gif) no-repeat 100% 0;
    padding-right: 20px;
}

a.external:visited
{
    background: url(chapter10.gif) no-repeat 100% -100px;
    padding-right: 20px;
}

a.external:hover
{
    background: url(chapter10.gif) no-repeat 100% -200px;
    padding-right: 20px;
}

Figure 10.3. Screenshot showing styled .external link with a background image.

Styling Links with Background Images



Previous Page
Table of Contents
Next Page