JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

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



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→