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="">


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


<img src="ball.jpg" usemap="#round" border="0">
<map name="green">
<area shape="circle" coords="68,211,35" href="http://">


In this way you can create a image map in HTML.

Related Articles

Buy Huawei Ascend II free from US cellular online

Features and specifications of budget phone Huawei Ascend II is provided here. US cellular is offering Huawei Ascend II with a mail rebate of $100. So you can buy Huawei Ascend II online from US cellular with a price of $0.00. The prepaid price in USA of Huawei Ascend II is $139.99.

IRCTC Virtual Reservation Message(VRM) - How to get it?

Read this article on 'IRCTC Virtual Reservation Message(VRM) - How to get it?'. You can travel on train having only a mobile. Ticket comes in the form of message and this message will be treated as a valid ticket. During travel passengers must have to carry his/her valid original photo-id. No need to book ticket standing on a long queue, not to take any tention about a printout copy. Travel on train anywhere freely.

LG Mouse Scanner LSM 100 features & price

LG Mouse Scanner LSM 100 features & price are added here. LG brought world's first mouse cum printer LG Mouse Scanner LSM-100 which has no different with conventional average mouse and whose one portion is mouse and one portion is scanner. With this mouse scanner you can scan documents and photos and save them in Microsoft Words, Excel. Read this article to know more about this multi-tasking mouse.

Computer related problems and their solutions

Read this article to know computer related problems, their solutions and to keep your computer more healthy. We often use to face such type of problems that make you and your life too worry. In this article I have discussed all the problems that we usually face and also their solution. I hope it helps you very much.

More articles: Latest Tech News


No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: