Using Images as Links

To use an image as a link, you will have to use two things you have already learned.

1.How to create a link.
2. How to add an image to the page.

Now, remember my trusty old picture, "next.jpg"? I have been using it at the bottom of each page as a link to the next section. So, what did I do? Well, first, you must create a link to the place you want people to go when they click on the picture. So, if you wanted to link to our main page, you would go ahead and type the opening link tag, like this:



Now, don't type any text, and don't close the tag just yet. What we are going to do is place the image tag right after the opening link tag. The image we are using here is "next.jpg". So, you would type the following:




OK, now we are going to close the link tag at the end of the image tag, so that the image tag is between the opening and closing link tags, like this:





Now that the image is between the link tags, it will operate the same way as a normal link, but now it is a visual image. Here is what the above code would produce:

sample linked image

Move the mouse over the image, and it will turn into the little pointing hand. If you click on the image, you will end up all the way back at our main page.

Well, that's good, but what's with the border around the image? Well, the border just seems to be added by default on most browsers. To get rid of it, add this command to the image tag:

border="0"

Here is an example:





Now, the picture will be a link, and you won't have the extra border around the sides: