Image URL mapping in HTML by usemap attribute

Sometimes we need to map different area of an image with different links . For example we can see a world map on which  all countries are displayed on a single image. Suppose we want to link every country with their respective link. To handle such a scenarion HTML have a good attribute named “usemap”
Usemap attribute in HTML

usemap attribute is always used with Image (<img>) tag in HTML. Usemap attribute is used to associate name or id with their corresponding area. This URL or image mapping is done through <area> tag in HTML. The <area> tag defines the clickable area of the map. To select clickable area withing the map area tag of HTML uses “Shape” attribute. There are different type of parameter can be passed within shape attribute of area tag.
Example of usemap attribute in HTML

<img src=”images/image.jpg” usemap=”#imagedimension”>
<map name=”imagedimension”>

<area shape=”rect” coords=”0,0,82,126” href =”india.html” alt=”india”>

<area shape=”circle”  coords =”100,200,200” href =”usa.html” alt=”usa”>


. Here shae “rect” means “Rectangular” and  “coords” attribute also accept area coordinates or rectagular area. Similarity with “Circle” as well.
To see it in action at my complementry site

Related posts:

The following two tabs change content below.

Chandra Shekhar

GCP Architect
Chandra Shekhar Pandey is Google certified Cloud engineer, I am Magento2 Trained developer. Having huge experience in designing cloud solution. I have around 12 years of experience with world enterprise IT companies and fortune 500 clients. During my architecture design I am always caring about high availability, fast performance and resilient system. From the programmer background I have huge experience in LAMP stack as well. Throughout my carrier I have worked on Retail, E-Learning, Video... Read More about Chandra Shekhar

Latest posts by Chandra Shekhar (see all)