Help! A Press Release! - Page 5
July 26, 2002
Now that we've done the basic style work on text links, let's jazz
up the help and press-release links. The icons are cute enough, but we can do
something a lot more interesting than having these graphics embedded in the page
itself.
The first thing we need to do is remove the icons from the HTML and create
taller versions—say, 32 pixels high instead of 16. The important thing is
that the icons should be an even number of pixels tall.
Note "Taller" images already exist in the files you downloaded
from the Web site: help-icon.gif and pr-icon.gif.
Now let's put a border around the help link, place the icon in the background,
position it on the left side and centered vertically, set padding to keep the
text from overlapping the icons, and also change the text and background colors
to go along with it (see Figure 4.10). Oh,
and just for the heck of it, we'll eliminate the underline, too.
Figure 4.10
Taking a text link from "blah" to "boo-yah!"
a:link:hover {color: #FFD; background-color: #797;}
a.help:link, a.help:visited {padding: 0 2px 1px 16px;
background: #FDD url(help-icon.gif) left center no-repeat;
color: #733; border: 1px solid #C66;
text-decoration: none;}
</style>
By aligning the background image with the left centerpoint of the link (using
the keywords left center), we can make it look like it's inline.
As for the padding, it helps keep the borders pushed a little bit away from the
text and opens up enough space on the left to show the background image.
It's easy enough to adjust the padding as necessary (for example, to close
up the space between the edge of the icon and the text).
Removing the Images
Remember to remove the img elements from the help and press-release
links in the HTML document itself. If they're left in, they will obscure
the background images we're inserting and greatly interfere with the
intended effect.
It looks like the icon is still part of the document, and that's exactly
what we want. The advantage of putting it in the background of the link, of
course, is that we can easily change it later without having to touch the
document source. We might decide to put the icon on the right side of the
hyperlink, for example. Doing that would be a simple matter of changing the
values for padding and background—nothing more.
Let's give the same treatment to the press-release link, using its icon
and colors to match:
a.help:link, a.help:visited {padding: 0 2px 1px 16px;
background: #FDD url(help-icon.gif) left center no-repeat;
color: #733; border: 1px solid #C66;
text-decoration: none;}
a.pr:link, a.pr:visited {padding: 0 2px 1px 16px;
background: #EEC url(pr-icon.gif) left center no-repeat;
color: #171; border: 1px solid #797;
text-decoration: none;}
</style>
The only real differences are in the colors and the image; otherwise, everything's
the same. Now all we need are some good hover effects for the links, and we'll
be golden (see Figure 4.11):
a.pr:link, a.pr:visited {padding: 0 2px 1px 16px;
background: #EEC url(pr-icon.gif) left center no-repeat;
color: #171; border: 1px solid #797;
text-decoration: none;}
a.help:hover {color: #FFD; background-color: #C66;}
a.pr:hover {color: #FFD; background-color: #797;}
</style>
Figure 4.11
Now there are two way-cool links for our viewing pleasure.
Changes on Hover
In theory, you could also change the background image in the hover state, but
Explorer 5.x for Windows doesn't handle hover-based changes very
gracefully. Its usual behavior is to change the background image when you hover
over a link and then keep the hover image after the mouse moves off the link.
Sadly, there doesn't seem to be a CSS-based way around this bug.
Now let's create some "visited" styles for our way-cool links.
We could do the usual and change the various colors, but let's take it a
step further and display a different background image—thus, changing the
icon for visited links.
The basic need here is for new images. We'll go with ones that look
"washed out" because they're the easiest to produce. Then all we
need to do is create the styles to drop them into place when a link's been
visited, as well as some color shifts.
a.pr:link, a.pr:visited {padding: 0 2px 1px 16px;
background: #EEC url(pr-icon.gif) left center no-repeat;
color: #171; border: 1px solid #797;
text-decoration: none;}
a.help:visited {color: #A88; background-color: #EDD;
background-image: url(help-vicon.gif);}
a.pr:visited {color: #797; background-color: #DDC;
background-image: url(pr-vicon.gif);}
a.help:hover {color: #FFD; background-color: #C66;}
Note
Look for the files help-vicon.gif and pr-vicon.gif in
the files you downloaded from the Web site. These are the washed-out versions
of the link icons we've been using (see Figure
4.12).
Figure 4.12
Visitation changes: Washing out a link after it's been visited helps users
remember where they've been.
Of course, we could have used any icon at all—one with a little
"X" over the icon, maybe an inverse image in which the colors are all
reversed, or really anything. The only limitation is what you can fit into the
space.
Order in the Link States
We've added the various link states in a specific order in this project:
link, visited, hover, active. In general, maintaining this order is critical
because changing it causes link styles to stop working. The order of LVHA has a
few mnemonics you can use: "LoVe-HA!" and "Like Various Hairy
Apes" are two particularly memorable ones.
Altering the Main-Text Links - Page 4
Eric Meyer on CSS: Mastering the Language of Web Design
A Touch of Cleanup - Page 6
|
