How to create an image map in HTML
This article will help you in creating the image map in html. You will also get the knowledge about the various shapes that image map supports. Also the ways to add co-ordinates in the map tag and others details of adding the map over the image are described here.
HTML provides an interesting feature of creating a map over any image. This map means to create a hyperlink structure over a single image. This technique brings the new meaning to simple picture. To create the image map we have to use the tag <map> this will create map in the form of certain shape and then this map is applied over image using use map attribute.
The steps of creating image map are as follows.
1. Select an image over which you want to create an image map, say ball.jpg.
2. Now open the image in the paint, then write the co-ordinates of the area on the image of which you want to create map. The co-ordinate can be check via looking at the bottom of the paint window.
3. Then check the co-ordinates for the location on the images. then choose the one of the shape below according to co-ordinates , the shapes are 
a. Polygon
The polygon shape can contain various shapes, to create other shapes from below use polygon.
b. Square
For this four co-ordinates are required, the four sides of shape square.
c. Rectangle
For this four co-ordinates are required, the four sides of shape rectangle.
d. Circle
For this three values are required, centre co-ordinates and radius co-ordinates.
4. After this write the following code for creating the image map on the image ball.jpg. for the selected image circle shape is used to create a link over the image
<map name="round">
<area shape="circle" coords="301,184,141" href="http://www.cricket.com/ball.html">
</map>
Give name to your map tag for referencing this in the image tag.
5. Now add the image to your HTML document using <img> tag. Also insert an attribute i.e. usemap in this tag to the name of the image map to this tag, so an image is created over this image . The code for this as follows
<img src="ball.jpg" usemap="#round" border="0">
Make sure that use # with the name of the image map in this tag.
6. The full code will look like this
<body>
<img src="ball.jpg" usemap="#round" border="0">
<map name="green">
<area shape="circle" coords="68,211,35" href="http://http://www.cricket.com/ball.html">
</map>
</body>
In this way you can create a image map in HTML.
