Image maps are used when you want to make certain parts of an image clickable. To create an image map we must first have an image. For our image I will make the top-left of the image clickable. So first we will need an image and we have to add the <map> tags. This tells the browser that we want an image map. For this tag we have to use two attributes with the same value. These are the id and name attributes. The reason we use both is because some browsers use the name attribute while others use the id attribute. They both do the exact same thing.

I have given our image map the name of 'map'. Now that we have a name we have to add the usemap attribute to our image tag. The value for this will be #map. It looks like this:

Now the browser knows that the image we have used will have an image map on it and the maps name is 'map'. We use names in case there are multiple map tags. Since we have linked the image and the map we need to define the areas of our image that will become links. For this we use the <area /> tag. The area tags will go within the map tags. The area tags also need some attributes. These attributes are shape, coords, and href. Alt is also recommended just as it is in the image tag. Here is a full example of the coding:

Now if you test this out you will find that when you put your cursor in the top corner of the image it will be a link. You already know what href does, it is just the URL link. Shape defines the shape of your link area. Possible choices include default, circle, poly, and rect. Default will cause the whole image to be a link, circle is a circle, rect is a rectangle, and poly is any multisided polygon. All of these will work in conjunction with the coords attribute.

If you choose a rectangle the coordinates will be the left, top, right, and bottom points respectively. For this image the left size is 0 pixels into the image, the top is zero pixels, the right is 50 pixels into the image, and the bottom is 50 pixels into the image. The pixel location is respective to the top or left of the image.

If you choose a circle the coordinate will be center x value, the center y value, and the radius respectively. For this you would just choose the distance from the left of the image for the first coordinate, then the distance from the top of the image, and after that the distance from that point you want the edge to be.

The last choice is the poly choice. For this you do the x and y values for all of the vertexes until you have done them all. You can do as many sides as you choose. Example: coords="50,0,60,10,40,10" (This makes a triangle) The green highlighted are the first coordinate, the red is the second and the blue is the third.