How to Make an Image Trigger a Link

By Ed Tittel, Chris Minnick

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 <img /> 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).

image0.jpg

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.