Can an image serve as a link? Sure it can! If you include an <img> tag inside a link tag (<a>), that image serves as a link itself:
<a href="index.html"><img src="/books/2/631/1/html/2/uparrow.gif" alt="Up" /></a>
If you include both an image and text in the link tag, they become links to the same page:
<a href="index.html"><img src="/books/2/631/1/html/2/uparrow.gif" alt="Up" />Up to Index</a>
One thing to look out for when you're placing images within links, with or without text, is white space between the </a> tag and the <img> tag or between the text and the image. Some browsers turn the white space into a link, and you get an odd "tail" on your images. To avoid this unsightly problem, don't leave spaces or line feeds between your <img> tags and </a> tags.
By default in HTML 2.0, images that are also links appear with borders around them to distinguish them from ordinary, nonclickable images. Figure 7.11 shows an example of this. The butterfly image is a nonclickable image, so it doesn't have a border around it. The up arrow, which takes the visitor back to the home page, has a border around it because it's a link.
Figure 7.11. Images used as links have a border around them.
You can change the width of the border around the image by using the border attribute to <img>. The border attribute was a Netscape extension that became part of HTML 3.2, but it's been deprecated in HTML 4.01 in favor of style sheets. This attribute takes a number, which is the width of the border in pixels. border="0" hides the border entirely. This configuration is ideal for image links that actually look like clickable buttons, as shown in Figure 7.12.
Figure 7.12. Images that look like buttons.
Including borders around images that are links has really fallen out of favor with most web designers. Not turning them off can make your design look very dated.
Task: Exercise 7.2. Using Navigation Icons