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”>

</map>

. 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 http://www.vishalphotostat.com/.

The following two tabs change content below.

• Bio
• Latest Posts

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 Conferencing and social media domain. The motive of creating cutehits was just to share the knowledge/solutions I get to know during my day to day life so that if possible I can help someone for same problems/solutions. CuteHits.com is a really a very effort for sharing knowledge to rest of the world. For any query/suggestion about same you can contact me on below details:- Email: shekharmca2005 at gmail.com Phone: +91-9560201363

Latest posts by Chandra Shekhar (see all)

• Best practices for micro service design - January 23, 2022
• Spring Boot - January 23, 2022
• Java - January 23, 2022