Using Images as Links
Creating a graphical navigation system is one of the most popular uses of images on the Web. The links used to get around the site can then be delivered as graphical "buttons" as in the bank home page shown in Figure 3.4, or by using other metaphors like the file folder "tabs" used by the TLC site (see Figure 3.5).
){kind=link}
){kind=link}
Figure 3.4 This site uses two types of "buttons" to guide users to different functions of the bank.
Figure 3.5 The file folder "tabs" are a popular navigation metaphor.
The process of linking graphics is as simple as linking text; the image element is placed inside the anchor element:
<a href="foo.html"><img src="bar.gif" alt="bar" /></a>
To simulate a navigation menu, I've created three buttons with the labels "Option 1," "Option 2," and "Option 3."
TIP
These buttons were created using the "buttonize" effect available in Paint Shop Pro 6 (shareware). Most current graphics editors have a similar effect available.
Each button will be placed inside its own anchor, linked to a corresponding option page:
<a href="option1.html"><img src="opt1.gif" alt="option 1" width="100" height="60" /></a> <a href="option2.html"><img src="opt2.gif" alt="option 2" width="100" height="60" /></a> <a href="option3.html"><img src="opt3.gif" alt="option 3" width="100" height="60" /></a>
The initial results, shown in Figure 3.6, have two issues that might need to be addressed: There's a bright blue border around the images, and whitespace between each of them.
){kind=link}
Figure 3.6 A basic set of linked images.
The bright blue border is the browser indicating each image is a link, just as text links are colored blue and underlined by most visual browsers. It does tend to interfere with the look of the buttons, though, so it can be removed by adding a border attribute to the image element. Setting the value to "0" (zero) tells the browser to turn the border off:
<img src="opt1.gif" alt="option 1" width="100" height="60" border="0" />
Next, to address the spacing between images, we can move each of the anchors onto the same line of text in the source HTML document. Browsers properly interpret the new line or carriage return/new line characters that many Windows- or Mac-based text editors produce as white space. Removing those by writing the links on a single line will then remove the white space (see Figure 3.7).
){kind=link}
Figure 3.7 The linked buttons with white space and bordering removed.