Links and images

Although links are primarily text-based, it’s possible to wrap anchor tags around an image,
thereby turning it into a link:
<a href="a-link.html"><img src="linked-image.gif" width="40"
å height="40" /></a>
Some browsers border linked images with whatever link colors have been stated in CSS (or
the default colors, if no custom ones have been defined), which looks nasty and can displace
other layout elements. Historically, designers have gotten around this by setting the
border attribute within an img element to 0, but this has been deprecated. Therefore, it’s
best to use a CSS contextual selector to define images within links as having no border.
a img {
border: 0;
}
Clearly, this can be overridden for specific links. Alternatively, you could set an “invisible”
border (one that matches the site’s background color) on one or more sides, and then set
its color to that of your standard hover color when the user hovers over the image. This
would then provide visual feedback to the user, confirming that the image is a link.
a img {
border: 0;
border-bottom: 1px solid #ffffff;
}
a:hover img {
border-bottom: 1px solid #f22222;
}
In any case, you must always have usability and accessibility at the back of your mind when
working with image-based links. With regard to usability, is the image’s function obvious?
Plenty of websites use icons instead of straightforward text-based navigation, resulting in
frustrated users if the function of each image isn’t obvious. People don’t want to learn
what each icon is for, and they’ll soon move on to competing sites. With regard toaccessibility, remember that not all browsers can zoom images, and so if an image-based
link has text within it, ensure it’s big enough to read easily. Whenever possible, offer a textbased
alternative to image-based links, and never omit alt and title attributes (discussed
earlier in this chapter). The former can describe the image content and the latter can
describe the link target (i.e., what will happen when the link is clicked).
Therefore, the example from earlier becomes the following:
<a href="a-link.html"><img title="Visit our shop"
å src="linked-image.gif"width="40" height="40"
å alt="Shopping trolley" /></a>

The difference between a and a:link

Many designers don’t realize the difference between the selectors a and a:link in CSS.
Essentially, the a selector styles all anchors, but a:link styles only those that are clickable
links (i.e., those that include an href attribute) that have not yet been visited. This means
that, should you have a site with a number of fragment identifiers, you can use the a:link
selector to style clickable links only, avoiding styling fragment identifiers, too. (This prevents
the problem of fragment identifiers taking on underlines, and also prevents the
potential problem of user-defined style sheets overriding the a rule.) However, if you
define a:link instead of a, you then must define the visited, hover, and active states,
otherwise they will be displayed in their default appearances. This is particularly important
when it comes to visited, because that state is mutually exclusive to link, and doesn’t
take on any of its styling. Therefore, if you set font-weight to bold via a:link alone, visited
links will not appear bold (although the hover and active states will for unvisited
links—upon the links being visited, they will become hover and active states for visited
links and will be displayed accordingly).