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>