Making Thumbnails

Step 3:
At last.... we're finally gonna make some thumbnails. Open up the Thumbnail maker to fit the full screen so you can see exactly what you are doing. Now, from the 'options' menu click on 'Select all' as shown in the pic below,


See the bigger Pic
You'll notice that now all of the pictures in the window on the right have been highlighted. All that remains now is to tell the thumbnail maker where we want the finished pictures to go. This is the destination where the thumbnails will reside. Remember that this is just a tutorial and I have both folders on the desktop for ease of use. Once you've become familiar with the program, you can use whatever folders you wish. Ok, so let's decide on a destination for our thumbnails. With all the pictures highlighted 'right-click' on any of them and a menu will pop-up just like the one below.


See the bigger Pic
Scroll down the menu and click on 'Save selected thumbs as single images..'. This in turn brings up another dialog box asking you to select your destination folder. Browse to your 'Thumbs' folder, remember the one you made at the start of this tutorial all those years ago? :-)


See the bigger Pic
Click on the 'Thumbs' folder to select it and then click 'OK'. Now that's all the messing about finished. A quick glance inside your 'Thumbs' folder should reveal that you are now the proud owner of some brand new thumbnails. Yippee! You did it!!!

Now all that remains is to place the thumbnail on the webpage and add the necessary code that will call up the full size image when the thumbnail is clicked on. If this is the part that worries you, have no fear, it's simple enough. First of all, We want to display a thumbnail of the ice-cream picture. The picture is called ice-cream_t.jpg and it is stored in the Thumbs folder. We do this using the image tag like so:

<img src="thumbs/ice-cream_t.jpg">



It's important at this point that you should be aware of the destination folder (or path) of your images. You'll notice that I've included the folder 'thumbs' followed by a forward slash, (the red text) immediately prior to the picture filename in the image tag. This lets the browser know what folder to get the image from. The only time you dont need to specify a folder is when both picture and page are stored in the same directory or folder. As I said earlier, we're using two folders on the desktop, if you move your pictures to new locations, you must change the image tag to reflect those changes. So then back to our thumbnail, did you try clicking on it? Yep? Nothing happened, did it? That's because we didnt yet add the code to call up the full size image. Let's do that now, shall we?

Again, we place the code for our ice-cream thumbnail exactly as before, but this time we're gonna wrap the thumbnail code up in 'a href' tags. Dont worry about the computerese terminology, just take note of the way that the code is written.

<a href="pics/ice-cream.jpg"><img src="pics/ice-cream_t.jpg" border="0"></a>


The code responsible for opening up the full size pic is coloured red, dont forget to add the closing </a> tag, if you dont, all kinds of strange things may happen with your page, none of them desirable I might add. :-) Take note also of the border="0" that has been added to the thumbnail code, this isn't totally necessary but if you dont include it you'll get an ugly blue border surrounding your thumbnail. Urrgghh.

Back to the Help Index