THUMBNAILS

Thumbnails are when u resize a pic on your page to a smaller size and when you click on it, the larger version opens up in a new window Like this: (click on the image below for example)



Ok, for thumbnails there are a few things you should already know how to do. #1 Get the link of a picture. #2 Place a picture on your page. #3 Resize a pic with html. #4 Link an Image targeted to a new browser. and #5 How to put this all together correctly. So below I will explain each section seperately. If you already know how to do all that, go directly to step #5 for the code. If you do NOT know how to do this stuff, I suggest you read the tutorial first because you might just learn something.

STEP #1:To get the link of a picture you upload it somewhere and then right click on the image or image name and click properties. Then you go to where it says "address" or "URL" in the properties and copy the url. **NOTE If you are using Liquid2k.com... this method will NOT work. Just know that the pic url to any pic on liquid2k will always be: http://liquid2k.com/username/imagename.jpg or it may .gif depending on what you saved it as. And a tip for you is always use lower case letters. HTML is very sensitive and it just makes everything easier that way if you just use lowercase.

STEP #2:Once you get the url of the image you want, you place it on your site or page by inserting the URL into the image code. So it will look something like this:



STEP #3:Once you get the image in the image code, you can resize the picture to be any size you want. For thumbnails 100px or or 75px is usually a good idea to use. But you can choose whatever numbers you want. But since this is a thumbnail tutorial, I'm gonna use 75px. So, you set the width and height in the code like this:


**NOTE the reason it says border="0px" is because this image will be used as a link and usually when an image is linked, a border shows up around it and it can look ugly. So adding the border="0px" will make the border be 0pixels in size.. and zero is nothing so there will be no border.

STEP #4:So, since you want the original sized photo to pop up when you click on the thumbnail, the url of the image is what you insert as the url to be opened up on a new window. Like this:



Then you add the targeting to it. You want it to open in a new window, so the target will be _blank. Like:



STEP #5:So now you put it all toegether and the result of the final code should look something like this:



And That's It!
Hosted by www.Geocities.ws