Linking Thumbnails to Images

A very similar technique to using images to label links is to use thumbnails, or miniature versions of your images and then link them to larger ones. You can load a lot of small pictures quickly and let your visitor choose which ones they'd like to see full size.

Figure 6.24. Remember to use the full-size image in the link and the thumbnail in the image definition.

To link a thumbnail to a larger image:


Type <a href="image.jpg">, where image.jpg is the location of the full-sized image on your server (see page 35).


Type <img src="/books/2/62/1/html/2/mini.jpg", where mini.jpg is the location of the thumbnail version of the image on the server.

Figure 6.25. In this example, the thumbnails are about 4K and take a few seconds to load.


If desired, type alt="alternate text", where alternate text is the text that should appear if, for some reason, the thumbnail does not.


Type the final /> of the thumbnail definition.


If desired, type the label text that should accompany the thumbnail. You could include the actual file size of the full-sized image so the visitor knows what they're getting into by clicking it.


Type </a> to complete the link to the full sized image.

Figure 6.26. If the visitor clicks the icon, the full-size image opens in a new window.


  • Using miniatures or thumbnails is a good way to get a lot of graphic information onto a page without making your visitors wait too long to see it. Then they can view the images that they are most interested in at their leisure.

  • See Creating Pop-ups on page 193 in Chapter 12, Dynamic Effects with Styles for a technique that can display the larger images right on the same page.

HTML, XHTML, & CSS(c) Visual QuickStart Guide
HTML, XHTML, and CSS, Sixth Edition
ISBN: 0321430840
EAN: 2147483647
Year: 2004
Pages: 340

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: