patndoris TechnoGeek

Recently, I was working on a project at work (yes, I do work at work from time to time), and I had reason to display clickable thumbnails in a webpage I was designing. I’d never used them before, and I had no idea how it was done. Luckily, one of my favorite sites is back up, resurrected from the virtual dead. Mandarin Design has a nice tutorial on the subject. Still, I was a little confused and it took me a wee while to get it figured out. Once I did, it’s really a very simple concept. (Not to mention once you get the idea, a simple copy and paste works so very nicely on this!)

...

My first area of confusion was in that you need two of the same image file. Well, I guess you could use different pictures but it would be a little confusing when something other than what you think you’re going to see pops up. (Mental note to self: Remember for April Fools Day next year.). Back to business here! You need one picture for the little image - affectionately called the thumbnail and one for the larger image the person will see displayed upon clicking said thumbnail. The larger image will display in a pop up box. For this example, I’ve uploaded two files. I’ll use Thumb100.jpg for my thumbnail (100 px wide x 115 px in height) and Thumb300.jpg for my (slightly) larger image (300 px wide x 345 px high).

Here’s what it will look like:

Simply replace the image names and sizes with your own information and you’re all set to display a thumbnail image!

Yes, please click it so you can see what happens.

And because I just want to show you what you can do (and because it’s oh so geeky fun), click this one:

Now you are all set to go have some fun with thumbnails…or at least you know the basics of how to create them…or you can read, copy and paste…