SHOP PRODUCTS
Houzz Logo Print
canarybird01

How To Create Clickable Thumbnail Photos

canarybird01
16 years ago

I know many would find it convenient to be able to post smaller photos that can be opened or not with a click of the mouse.

For some reason it's not easy to find simple instructions on the web.

So I wrote this tutorial and hope that anyone who wishes to try creating their own clickable thumbs will find this easy to use.

If you find any mistakes....please let me know, so I can excuse myself and try to correct them LOL!


It's convenient to use Word Pad when constructing a line of code so that you can copy and paste the whole line into a forum message box once you have it put together.

Step 1:

Open Word Pad and type in the following:

Note there are only 2 spaces in this line.....one is between the "a" and the "href" and the other is between "img" and "src".

Minimize Word Pad while you go online to your photo hosting site.

Upload your photo to your photo hosting site and open it to full size on your screen.

Highlight, right click and copy the locator address (URL)as usual from either the top of the screen in the address line, or from a convenient box which your photo host may provide for you under each photo.

Copy a line which begins with "http" and ends with "jpg" as in the example here:

Step 2:

Go back to Word Pad and paste that line into the first part of the line of code you wrote in step 1, inserting it between the two quotes.

The first part of your code line should now look something like this:

Step 3:

Back on your photo site, find the small thumbnail version of the photo you just uploaded.

Put your cursor over that small thumbnail and right click. A dropdown menu appears.

Step 4:

Right click on "Properties" which is the last option of that menu:

On the Properties menu, under "Image Properties" you see the heading "Location",

followed by a long address ending in "jpg". This is the URL (locator address) of your

THUMBNAIL photo, that is, the smaller version of the large photo you just uploaded.

You will use this address in the second half of the code you typed in Step 1 :

Step 5:

Highlight and copy this line:

...and paste it into the second half of the line of code you typed in Step 1, putting it between the two quotes:

Your finished line of code should now look similar to this:

Remember that there are still only TWO SPACES in the whole line, as mentioned in Step 1.

You now have a line of HTML which will produce a small thumbnail photo which, when clicked, will open up into

a large version of the same photo. So you're ready to copy and paste the whole line into a forum message box.

Be sure and use the "Preview" function below the message box to check that everything is working.

If you have problems, check to see if you have put extra spaces in the line, or if you have left off a quote or put a bracket

facing the wrong way.

Okay now I'll try it out....

Yipee it worked!

SharonCb


Comments (3)