Category Covered

How to create image map in HTML

Image maps is a type of HTML code  where we can make images with clickable areas that usually link to another page.

To create an image map you have to follow the following steps::

    1. Create an image (save as a gif or jpeg form into your website's image folder).

    2. Use the HTML <map> tag to create a map with a name. Ex: map    name="planetmap". Inside this tag,you   

       will take another tag <area> where you will specify the  clickable location i.e link of another page.    

    3. Use the HTML <img> tag to link to this image. In the img tag, use with the

usemap attribute to define which image map to use (the one we just specified).

<img src="image-mapping.gif" width="516" alt="World map for image mapping"


<map name="worldmap">
  <area shape="rect" coords="78,69,129,100" href="russia.htm" alt="russia">
  <area shape="circle" coords="421,188,25" href="austrailia.htm" alt="austrailia">
  <area shape="poly" coords="326,29,429,43,385,113,323,104,261,46" href="bangladesh.htm"


In the above given code - coords attribute means the coordinates of an area in an image-map. EX: (0,0,0,0) Specifies the coordinates of the left, top, right, bottom corner of a rectangular. Again (0,0,0) Specifies the coordinates of the  corner of a radius. And (0,0,0,.....,0) Specifies the coordinates of the corner of a polygon.Suppose the coordinates of the top-left corner of any shape are 0,0. You can change the coordonates wherever you want to palce your link/location page on the image