Beginning HTML5 and CSS3 For Dummies
Book image
Explore Book Buy On Amazon

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:

Visit the W3C

This markup replaces the text Visit the W3C with an appropriate icon:

  

Visit the W3C Web Site

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.

About This Article

This article is from the book:

About the book authors:

Ed Tittel is a 30-year veteran of the technology industry with more than 140 computing books to his credit, including the bestselling HTML For Dummies.

Chris Minnick runs Minnick Web Services. He teaches, speaks, and consults on web-related topics and has contributed to numerous books, including WebKit For Dummies.

This article can be found in the category: