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