Chapter 7, Lesson 4

If you already know how to build a clickable-thumbnail image to load an off-page image, you can skip this lesson.

In the last chapter, we learned that an off-page image was simply a link whose special purpose was to point to an image file which would be loaded only if the operator activates (i.e., clicks on) the link. Naturally, this approach can be just as easily handled using a clickable image rather than a text link.

Saving download time is one of the primary purposes for off-page images, because they are only loaded if the receiving operator activates the corresponding link. However, the ability for the operator to choose is a goal in and of itself. One of the ways to enhance the operator's ability to choose which off-page image they want to view, is to use a special kind of clickable image called a "thumbnail". Ideally, the thumbnail image is a small, but representive replica of the larger file it points to, but in the context of our discussion here, we'll include any small icon or image which suggests the content of the larger picture.

The first step in creating a thumbnail link is to acquire or construct the thumbnail image. A typical way to construct the thumbnail image is to modify the original image using a graphics editor (such as LVIEW), resizing it to something on the order of 50x50 to 75x75 pixels, and saving it in GIF format under a different filename.

Alternatively, you might acquire an icon (a small symbolic image) from on of the many icon archives on the internet, selecting one that represents the content of your off-page image.

The thumbnail link is nothing more than a clickable image which points to an off-page image file, and so for this special case, we formulate the method:

<A HREF="off-page-image-filename"><IMG SRC="thumbnail-filename"> </A>

Let's take a gander at some HTML source code:

<A HREF="acft_b1.jpg"><IMG SRC="acft_bi.gif" 
ALT="[click: B1 Bomber]" WIDTH=50 HEIGHT=50 ALIGN=MIDDLE 
BORDER=0></A><B> B-1 Bomber [JPEG, 11 KB]</B>
<P>
<A HREF="acft_106.jpg"><IMG SRC="acft_bi.gif" 
ALT="[click: F106 Fighter]" WIDTH=50 HEIGHT=50 ALIGN=MIDDLE 
BORDER=0></A><B> F-106 Fighter [JPEG, 9 KB]</B>
<P>
<A HREF="acft_sun.jpg"><IMG SRC="acft_sun.gif" 
ALT="[click: Fighters' Sunset]" WIDTH=50 HEIGHT=50 ALIGN=MIDDLE ></A><B> 
Fighter formation in the sunset [JPEG, 10 KB]</B>

B-1 Bomber [JPEG, 11 KB]

F-106 Fighter [JPEG, 9 KB]

Fighter formation in the sunset [JPEG, 10 KB]

In the demo's first two examples, we've used an aircraft "icon" as our link-description, to symbolize the content (indicating to us that the off-page image is aircraft related). Then, we place a non-clickable caption next to the icon, indicating what the image is. We've now given the operator enough information to make a choice. The off-page images are loaded when the operator clicks on the icon. Notice that because the icons were "buttons" (which is itself an invitation to "click"), we made the 'BORDER' equal to zero, so the browser wouldn't add highlighting.

In the final example, we've used a true "thumbnail". The thumbnail was constructed from a larger image, resizing it through the use of an image editor. Notice that we've left the default border enabled (by NOT specifying a 'BORDER'), because we want the operator to know that it's a clickable image. We've also placed a caption, although the image itself may convey enough information to seduce the operator into clicking on it.

---

Overseer: Monty Northrup ... ... leave e-mail ...

---