Web pages often use images for navigation. They’re prettier than plain-text links, and you can add both form and function on your page with one element. To create an image that triggers a link, you substitute an element in place of text to which you would anchor your link.
This markup links text:
<p><a href="http://www.w3.org">Visit the W3C</a></p>
This markup replaces the text Visit the W3C with an appropriate icon:
<p><a href="http://www.w3.org"><img src="w3.jpg"
alt="Visit the W3C Web Site"
title = "Visit the W3C Web Site" height="75" width="131"
style="border: solid blue; padding: 0.1em; margin: 2.0em;"></a></p>
The preceding markup creates a linked image to http://www.w3.org. In this example, the alternative text now reads Visit the W3C Web Site, so users who can’t see the image know where the link goes. When a user moves the mouse pointer over the image, the cursor changes from an arrow into a pointing hand (or any icon the browser uses for a link).
This image includes a blue border around it as a visual cue to let users know it serves as a link. The border appears as a blue outline (shown in the figure).
A quick click of the image launches the W3C website. It’s as simple as that.
You can set the border of any image you use in a link to 0 if you want to keep the browser from surrounding your image with a blue line. Without that line, however, users need other visual (or alternative text) clues so they know that an image is a link.
Be sure images that serve as links scream to the user (tastefully of course), “I’m a link!” In all cases, if the automatic outline is eliminated, you should build an outline into the graphic itself or add a caption that indicates that the image serves as a link.
