This is an example of using thumbnails. I am using photos from my Screensavers, where you can purchase a custom made screensaver using up to 36 photos from my collection of natural scenery from western USA and Canada for $5.00. Each photo has been re-sized to (a) larger image - 300 pixels wide and (b) thumbnail - 100 pixels wide. The aspect ration of the original photo has been preserved. Aspect ratio mean that if you take a 800X600 pixel photo and reduce the width to 200, then the height will automatically be reduced to 150 pixels.
Each photo has not only be reduced is size but, as they are .jpg file types, I have compressed them so the byte size, in KiloBytes (KB), is about 25KB to speed up the loading. As there are eight photos on this page, your browswer will have to download (data transfer) about 200KB, which on a dial-up connection may take up to 20 seconds.
The thumbnails are set up using a simple table with four rows and two columns and a cellspacing=5. The code for the table looks like this:
|
<table cellspacing=5>
<tr><td> <a href="largeimage1.gif" target="_blank"> <img src="smallimage1.gif"></a></td> <td> <a href="largeimage2.gif" target="_blank"> <img src="smallimage2.gif"></a></td></tr> <tr><td>
<tr><td>
<tr><td>
</tr></table> |
NOTE: the graphics below open in a new window (the use of tagret="_blank" in the code)!
|
|
|
|
|
|
|
|
|
|
|
|