Turning Images into Links | Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

You probably noticed in Figure 8.1 that the images on the page are quite large, which isn't ideal when you're trying to present multiple images. It makes more sense in this case to create smaller image thumbnails that link to larger versions of each image. Then you can arrange the thumbnails on the page so that visitors can easily see all the content, even if they see only a sampling of what is to come. Thumbnails are one of many ways you can use image links to spice up your pages.

You can turn any image into a clickable link to another page or image using the same <a href> tag used to make text links. Listing 8.2 contains the code for a modified Pond sample page that takes advantage of image links and thumbnails to improve on the page layout. This page is shown in Figure 8.3.

Listing 8.2. Thumbnail Images Serve as a Great Example of How to Effectively Use Image Links

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml 11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>Michael's Pond</title>   </head>   <body>     <p style="text-align:center">       <img src="/books/4/158/1/html/2/pondtitle.gif" alt="Michael's Pond" />     </p>     <p>       My backyard pond is not only a fun hobby but also an ongoing home       improvement project that is both creative and relaxing. I have numerous       fish in the pond, all Koi from various places as far as Japan, Israel,       and Australia. Although they don't bark, purr, or fetch anything other       than food, these fish are my pets, and good ones at that. The pond was       built in a matter of weeks but has evolved over several years through       a few different improvements and redesigns. I still consider it a work in       progress, as there are always things to improve upon as I continue to       learn more about how the pond ecosystem works, how to minimize       maintenance, and how to get a more aesthetically pleasing look.     </p>     <p style="text-align:center">       <a href="pond1.jpg"><img src="/books/4/158/1/html/2/pond1_sm.jpg"       alt="The Lotus, Floating Hyacinth, Japanese Lantern, and Waterfall All       Add to the Drama of the Pond" style="border-style:none" /></a>       <a href="pond2.jpg"><img src="/books/4/158/1/html/2/pond2_sm.jpg"       alt="Feeding Time is Always Full of Excitement"       style="border-style:none" /></a>       <a href="pond3.jpg"><img src="/books/4/158/1/html/2/pond3_sm.jpg"       alt="One of the Larger Fish Cruises for Dinner"       style="border-style:none" /></a>       <a href="pond4.jpg"><img src="/books/4/158/1/html/2/pond4_sm.jpg"       alt="A Dragonfly Hovers Over the Lotus for a Quick Drink"       style="border-style:none" /></a>     </p>   </body> </html>

Figure 8.3. Using linked thumbnail images allows you to dramatically improve the layout of pages with large images.

As the code reveals, not a whole lot has changed in this version of the page beyond the anchor tags that now wrap around each of the pond images. Also pay close attention to the fact that the images on this page are now thumbnail images, as is evident by their different file names (pond1_sm.jpg, pond2_sm.jpg, and so on). The _sm in the filenames simply means "small," as compared to the larger versions of the images that are referenced in the <a> tags.

Normally, web browsers draw a colored rectangle around the edge of each image link. Like text links, the rectangle usually appears blue to people who haven't visited the link recently, and purple to people who have. Because you seldom, if ever, want this unsightly line around your linked images, you should usually include style="border-style:none" in any <img /> tag within a link. (You'll learn more about the border attribute in Hour 13, "Digging Deeper into Style Sheet Formatting.")

Did you Know?

A practical example of an image link that you may want to eventually incorporate into your own web pages is a PayPal Buy Now button. Such a button allows visitors to purchase items from you via PayPal, which automatically handles collecting the money and notifying you of the purchase. PayPal's Buy Now buttons involve the use of forms, which are covered in Hour 18, "Gathering Information with HTML Forms." You'll also learn how to create and use a PayPal Buy Now button in Hour 18.

All the same linking rules and possibilities discussed in Hour 3 and Hour 6 apply to image links exactly as they do for text links. (You can link to another part of the same page with <a href="#name">, for example.)

When you click one of the thumbnail images on the Pond sample page, the full-size image is opened in the browser, as shown in Figure 8.4.

Figure 8.4. Clicking a linked thumbnail image opens the large version of the image in the web browser.