Multiple Thumb Nails to One Large Image
I'm often asked for a way to display multiple images with smaller 'thumb nail' pictures that you can click to display a larger image on the same page. There are several versions of this floating around, and most use the WIDTH and/or HEIGHT attributes of the IMG tag to resize the same image for the thumb nail as well as the larger version.
This actually works, but it is an incorrect usage of the WIDTH or HEIGHT attributes which are really meant to provide the actual pixel size of the graphic to the browser. Further, no saving in file transfer size is gained since the full larger file size must be transfered, even to make the thumbnails.
Instead, you can work with small thumbnail image files and larger display size files. Here is the correct way to do this, with the fully attributed code shown below:
|
  
click small picture
for larger image
|
Be careful copying the following code. It is very fussy and won't run correctly if 'hard returns' (ENTER keys) are introduced at the ends of lines when you copy and past. Some browsers will do this! If so, you may need to reassemble the code in NotePad or another text editor and be sure all lines are intact. I've recuded the font size so that the lines will display better here. I've also spaced the individual lines of code apart so you can see each one.
<TABLE WIDTH="560" BORDER="0" CELLPADDING="0" CELLSPACING="0" ALIGN="center">
<TR><TD ROWSPAN="3" WIDTH="420" ALIGN="center" VALIGN="top">
<IMG SRC="http://www.ourhutch.net/examples/graphics/bear1.jpg" WIDTH="400" HEIGHT="240" BORDER="0" NAME="picture" ALT="Large Image">
</TD><TD WIDTH="140" ALIGN="center" VALIGN="top">
<A href="#"; onClick="document.picture.src='http://www.ourhutch.net/examples/graphics/bear1.jpg'; return false;">
<IMG SRC="http://www.ourhutch.net/examples/graphics/bear1sm.jpg" WIDTH="120" HEIGHT="72" BORDER="0" ALT="picture one"></A>
<A href="#"; onClick="document.picture.src='http://www.ourhutch.net/examples/graphics/bear2.jpg'; return false;">
<IMG SRC="http://www.ourhutch.net/examples/graphics/bear2sm.jpg" WIDTH="120" HEIGHT="72" BORDER="0" ALT="picture two"></A>
<A href="#"; onClick="document.picture.src='http://www.ourhutch.net/examples/graphics/bear3.jpg'; return false;">
<IMG SRC="http://www.ourhutch.net/examples/graphics/bear3sm.jpg" WIDTH="120" HEIGHT="72" BORDER="0" ALT="picture three"></A>
<FONT SIZE="2">click small picture<BR>for larger image</FONT>
</TD></TR>
</TABLE>
You will need the large image and the thumb nail as separate files for each picture. The part of the code for the three thumbnail images is strung together in one single line in order for the three images to nest tightly together. If you space the code, the images will have a small amount of space between them. The choice is yours.
This is the code block relevant to each of the small pictures:
<A href="#"; onClick="document.picture.src='http://www.ourhutch.net/examples/graphics/bear1.jpg'; return false;"><IMG SRC="http://www.ourhutch.net/examples/graphics/bear1sm.jpg" WIDTH="120" HEIGHT="72" BORDER="0" ALT="picture one"></A>
By working with picture sizes, different table layouts and adding one more of these code blocks for each additional image pair, you can have any number of thumb nails displayed beside, around or below the primary image.
If you need help understanding this further, please ask.
Bear photos courtesy of The Bear Chronicles - the adventures of Alexander T. Bear, a travelling friendship bear.
It's always the right time to use good code.
| 
