Felgall ClubSite

Just launched is my new site Felgall ClubSite. Pages there describe what ClubSite is and how much it will cost you. A demo site will be added soon and I am look... (more)

Creating a Thumbnail Image Link

The first step in creating a thumbnail image link is to create the thumbnail image. Sure you can create the appearance of a thumbnail image by just adjusting the width and height parameters on the image link but that totally defeats the purpose in having the thumbnail image because the entire large image file needs to be downloaded in order to display the thumbnail. You need a separate smaller image to use for the thumbnail and you can create this either using a graphics program on your own computer or alternatively, using an online thumbnail creation facility. The primary purpose in creating the thumbnail image is to split the download of the image out from the page and give the visitor the choice of whether they want to download it or not.

There are two ways to create a thumbnail image. The first way uses HTML to just open the image in a separate browser window. The second way involves using Javascript to create a custom browser window in which to display the image.

Let's look at an example of what you get using the simple HTML method.

Picture of Stephen Chapman at the AMRA 50th Anniversary Convention The code to produce the thumbnail image link at left follows:

 <a href="img/convent.jpg" ><img
src="img/convent_t.jpg" width="57" height="72" border="0"
alt="Picture of Stephen Chapman at the AMRA 50th Anniversary Convention" align="bottom" /></a>

Go ahead and click on the thumbnail image to view the larger image and see how this type of link is handled. Note also that the width and height specified in the code match exactly to the width and height of the thumbnail image.


The second way to do this is to create a custom browser window to display the larger image in by using Javascript.

So let's look at an example of this method.

Picture of Stephen Chapman at the AMRA 50th Anniversary Convention You will notice that this version produces a much nicer result than the HTML only version. The script adds 24 pixels to both the width and height specified so that those browser windows that insist on indenting the page from the top left corner do not move the bottom right corner of the image out of the window.
The code to produce this version of the thumbnail image link requires the following code in the <head> section of your page:

<script type="text/javascript">
function goImgWin(myImage,myWidth,myHeight,origLeft,origTop) {
myHeight += 24;
myWidth += 24;
TheImgWin = window.open(myImage,'image','height=' +
myHeight + ',width=' + myWidth +
',toolbar=no,directories=no,status=no,' +

and the following code where you want the thumbnail image to appear:

 <a href="img/convent.jpg" 
onclick="goImgWin('img/convent.jpg',240,302,100,50);return false;"><img
src="img/convent_t.jpg" width="57" height="72" border="1"
alt="Picture of Stephen Chapman at the AMRA 50th Anniversary Convention" class="left" /></a>

Note that the html version of the code is also included to cater for those browsing with javascript turned off.

Note also that in this instance the width and height in the call to goImgWin match exactly that of the larger image to be opened in that window (so as to open a browser window of an appropriate size). The width and height specified in the code for the thumbnail image also match exactly to the size of that image as specifying sizes smaller than the actual size of the image results in a larger image file than needed while specifying larger sizes means a loss of clarity in the image.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow