Tutorial >>

[mmmbisto]

Hehe, I'm not that great at explaining things but here I go :P

Thumbnails on websites are a way of presenting your pictures nicely.

I've had lots of positive comments on the way my pictures are presented over at my website, so as requested by madboy, here is my thumbnails tutorial. All pics are going to be linked, for Craig's sake ;)

The easiest way of doing thumbnails which many people do is by just reducing the image height and width sizes. I've picked a picture of me and my best friend Megan from a party we went to. I'm using Paint Shop Pro 7.

http://www.littlesocks.co.uk/tutorials/thu...bnails-tut1.gif

the HTML used for my image with equal height and width would be

<img border="0" src="http://www.starsandmoon.net/megan_kirsty.jpg" width="100" height="100">

this would make the image look like this:

http://www.littlesocks.co.uk/tutorials/thu...bnails-tut2.gif

which isn't very neat in my opinion.

This is where my idea came in.

I took the original picture and then made a new image: 60x60 pixels.

http://www.littlesocks.co.uk/tutorials/thu...bnails-tut3.gif

I copied the original image, keeping it the same size and pasted it onto the new image, and moved it around until I found some sort of focal point of the picture. The dashed line around the new image is the original picture size.

http://www.littlesocks.co.uk/tutorials/thu...bnails-tut4.gif

I saved it along with the rest of the thumbnails I already had

http://www.littlesocks.co.uk/tutorials/thu...bnails-tut5.gif

The code I used on my page would be the following:

<a href="http://www.starsandmoon.net/megan_kirsty.jpg" target="_blank"><img border="0" src="http://www.starsandmoon.net/thumbnail24.jpg" width="60" height="60">

The "a href" is the link, linking to the full picture, opening in a new window (target="_blank")and the link would be from the thumbnail picture I made (img src)

http://www.littlesocks.co.uk/tutorials/thu...bnails-tut6.gif

Now it all looks a little bit neater! You can always add border="1" in the image tage to separate them, as I have done :)