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:

<A HREF="http://www.mysite.com">

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:

<A HREF="http://www.mysite.com">
<IMG SRC="mouse.gif">

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:

<A HREF="http://www.mysite.com">
<IMG SRC="mouse.gif">
</A>

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:

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:

<A HREF="http://www.mysite.com">
<IMG SRC="mouse.gif" border="0">
</A>

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

You can also make the border larger in the same way, just use a larger number in there, for instance:

border="5"

The drawback to the border is that it insists on being the color of your link color, and sometimes this isn't the color you want to use. The only way I know around it is to edit the actual image to where it has the border you want, and then set the border="0" in your image tag. Oh, well.