Using Images to Label Links

In this age of graphical interfaces, people are used to clicking on images and icons to make things happen. Adding an image to a link creates a navigational button that the visitor can click to access the referenced URL. (For more information about images, see Chapter 5, Images.)

Figure 6.22. I've removed the border from all the image links.

To use images to label links:

1.	Type <a href="destination.html">, where destination.html is the URL of the page that the user will jump to when they click the button.
2.	Type <img src="/books/2/62/1/html/2/image.jpg" where image.jpg gives the location of the image file on the server.
3.	If desired, type border="n", where n is the width in pixels of the border. Use a value of 0 to omit the border.
4.	Add other image attributes as desired and then type the final />.
5.	If desired, type the label text, that is, the text that will be underlined or highlighted in blue, that when clicked upon will take the user to the URL referenced in step 1.
6.	Type </a> to complete the link.

Figure 6.23. The images act just like clickable text. The alt text can indicate where the link is leading.

Tips

• If you invert steps 5 and 6, only a click on the image will produce the desired jump. A click on the text has no effect. (You can also leave the text out altogether.)

• Most browsers surround clickable images with a border of the same color as the links (generally blue). For no border, use a value of 0 in step 3. Note that the border attribute is deprecated for images. You can use CSS instead (see page 184).