Spring.Into.HTML.and.CSS [Electronic resources] نسخه متنی

Linking the Image

Many times you will want to link an image to either another HTML document or a detailed version of the image. In either case, linking an image works the same way as linking text. You surround 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=">
<img src="/image/library/english/10233_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 page. You can even add a title attribute to the link if you want further details about the link to be available to your visitors. By default, browsers place a border around the image to highlight the fact that it is a linked image, and the hand cursor appears upon mouseover, too (see Figure 3-6).

If the image link is followed, the browser will use the default visited link color around the image. Of course, many people find the link border unsightly. If you'd like to get rid of your border immediately, 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=">
<img src="/image/library/english/10233_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).