Image maps are used to make certain areas of images into links. These areas can be rectangular, circular, or any other poly-sided shape. There can be one or many areas within a single image.
First, we start with an image:
Say we want to make the square a link. To do this we must first define the map:
Next, we're going to define the area that will be click-able within the image:
The 'shape' attribute tells the browser what general shape this "hotspot" is going to be: in this case, "rect" means we're using a rectangular shape. The 'coords' attribute are the coordinates for the top left, and bottom right corners ((top-left-x,top-left-y),(bottom-right-x,bottom-right-y)), where 0,0 is the top left corner. The 'href' and 'alt' attributes have the same function as on an Anchor tag.
Now, to use the Map with our image, we'll have to add an attribute to our image tag:
To make the circle a hotspot, we would add an area to our map:
The 'shape' for this area is "circle" and the 'coords' attribute now has three values: the X and Y coordinates for the center of the circle, and a measurement for the radius (in pixels).For a polygonal shape, such as the star, we'll add another area to our map:
The 'shape' for the star is "poly" and the 'coords' are the X and Y values of all the points within the polygonal hotspot.