Images and Anchors | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

As mentioned earlier, <a> tags can enclose text and other content, including images. When an anchor encloses an image, the image becomes clickable, thus providing the basic mechanism for a graphic button. Typically, a browser shows an image to be part of an anchor by putting a colored border around the image ” generally , the same color as the colored link text, either blue or purple. The browser also can indicate that the image is a link by changing the pointer to a different shape (such as a finger) when the pointer is positioned over an image link. If combined with scripting, the anchor also can modify the size or content of the image, creating a form of animated button. The following markup shows how an anchor can be combined with an <img> tag, as discussed in Chapter 5, to create a button:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Anchors and Images  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <p>   <strong>  Button with a border  </strong><br />   <a href="about.html">   <img src="about.gif" alt="About Button" height="55" width="55" />   </a>   <br /><br />   <strong>  Same button without a border  </strong><br />   <a href="about.html">   <img src="about.gif" alt="About Button" border="0" height="55"   width="55" />   </a>   </p>   </body>   </html>

Notice how the border attribute is set to "0" to turn off the image's border. Further, note that the code contains a small but significant error. When a space exists between the close of an <img> tag and the closing </a> tag, a small blue or purple line, or "tick," might occur, as shown in Figure 4-4. To remove a tick, make sure that no space is between the <img> tag and the closing </a> tag.

Figure 4-4: Ticks ”a common problem with image links

Note

Although ticks aren't the worst offense on the Web, they indicate a lack of attention to detail in Web page coding. In print literature, spelling errors or small nicks or ticks on an image would be cause for serious alarm. Eventually, the same standards will be applied to Web pages, so HTML authors should begin to look for such small mistakes. Be careful when looking for ticks, though. Internet Explorer actually tries to fix such small spacing problems for you, leading you to believe there isn't a tick if you look at it under only one browser. Testing in many browsers and validation of HTML markup should help catch subtle errors such as ticks.

All the examples given so far show images with only one destination. Wherever a user clicks on the image link, the destination remains the same. In another class of image links, called image maps , different regions of the image can be made hot links for different destinations.

< Day Day Up >