Linking the Image

code with the anchor element and the reference to where the image is linking, just as if it were the text content (see Example 3-3).

Example 3-3. Linking the image

<a href="detail.html">
<img src="/images/010/photo.jpg" width="250" height="188" alt="photograph of a delicious
 Vietnamese noodle dish from restaurant Pho 88" />
</a>

The image is now linked, and when clicked on, it will take the visitor to the detail.html page. You can even add a title and the hand cursor appears upon mouseover, too (see Figure 3-6).

you can do so by turning it off directly in the HTML, as shown in Example 3-4.

Example 3-4. Using the border attribute

<a href="detail.html">
<img src="/images/010/photo.jpg" width="250" height="188" alt="photograph of a delicious
 Vietnamese noodle dish from restaurant Pho 88" border="0" />
</a>

The image, while still linked, now displays no border (see Figure 3-7).

Beware: Borders Are Presentational The border attribute is considered presentational because it can be used decoratively. By providing a value greater than 0, the border size changes, whether the image is linked or not. Ideally, you will use CSS instead of the border attribute to modify your borders. CSS will also be used to position or float the image within its content. You'll learn more about this in Chapter 11, "Margins, Borders, and Padding," and Chapter 12, "Positioning, Floats, and Z-index."