Now that you've learned the basics of images and links, I've decided to put in a section on image maps. They're a bit advanced but not that hard once you've grasped the concept. An image map is a single image with several different links in it; if you click on one part of the picture it will take you to a different page than if you'd clicked on a different part of the picture.

To use an image map, you need a very basic image editing program. Anything that will give you the pixel dimensions and coordinates of an image. (That is, you need to be able to measure how many pixels across and how many tall the image is, and if you click on a certain part of the image, you need to know exactly how many pixels over and down that particular point on the picture is. If you have the dimensions, you can usually figure out what the coordinates are by trial and error, but it's easier to use an image editor.) I'm afraid I can only suggest Paint Shop Pro, which you can download a demo of from their website. But I know there are other, simpler and/or cheaper editors out there.

All right, so you've got your image and your image editor. The first thing you have to do is determine which parts of the image you want to be links. Each link area should be rectangular in shape. Find the coordinates of each of the corners of those rectangular areas. As soon as you've got those, you're ready for the code itself.

The code should look like this:
<IMG SRC="nameofimagebeingused.ext" USEMAP="#NameofMap" BORDER=0>
<MAP NAME="NameofMap">
<AREA SHAPE="RECT" COORDS="x,y x,y" HREF="pagebeinglinkedto.html">
<AREA SHAPE="RECT" COORDS="x,y x,y" HREF="anotherpagebeinglinkedto.html">
</MAP>

Substitute a simple name for "NameofMap"; it can be anything, really. Its only purpose is to tell the computer that the image is being used as an image map. Then, for "x,y x,y" you substitute the coordinates of the upper left and lower right corners of the area you want to be used as a link. Be sure that there is a space between the first coordinate and the second. You'd do the same for the next area you want to be linked, and so on; there's no limit to the number of links you can have, as long as none of the areas overlap. Just remember that the linked area should be big enough your viewer can click on it easily.

Not bad, huh? If you want to take a look at an image map in use, go to my links page and look at some of the webrings; the "I Made Legend" webring specifically.