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:

1.	Type <a href="image.jpg">, where image.jpg is the location of the full-sized image on your server (see page 35).
2.	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.
3.	If desired, type alt="alternate text", where alternate text is the text that should appear if, for some reason, the thumbnail does not.
4.	Type the final /> of the thumbnail definition.
5.	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.
6.	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.

Tips

• 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.