Image Map Area in HTML with Examples

In this article, I am going to discuss Image Map Area in HTML with Examples. Please read our previous article where we discussed Image Maps in HTML with Examples. At the end of this article, you will learn everything about HTML Image Map Area with Examples.

HTML Imagemap Area

The HTML <area> element specifies a predetermined clickable area within an image map. Geometric areas on an image can be directly linked with hypertext links using an image map.

Inside the area element coords attribute is used to define the coordinates of a clickable object inside the image and the shape attribute is used to define the shape of a clickable area for example rectangle, circle, etc.

Rectangle

Rectangle coords have the values x1,y1,x2,y2. The coordinates of the rectangle’s top-left and bottom-right corners are specified by this value.

coords=” 60,40,391,195 “

Example

<!DOCTYPE html>
<html>
<body>

<img src="https://lh3.googleusercontent.com/Mo2TF6vbPWHs3an26pQpAaIjCCwt33imr5-Yr3gkcq8rr8VpaEba3pFPa3sryo6rNJf3iJiY2XyqavKWomTM87rjmLc7nAqcdK-xyPWMdulZ4lb8KTVSXMxG_bIfT2HkrQ=w1280" alt="rectangle" usemap="#rectmap" >

<map name="rectmap">
  <area shape="rect" coords="60,40,391,195" alt="rectangle" href="https://en.wikipedia.org/wiki/Rectangle">
</map>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

The coordinates are 60, 40, and 391,195 specifying the top-left and bottom-right corners of the rectangle respectively.

Circle

Circle coords have the value x,y, radius.The coordinates of the circle center and the radius are specified by this value.

coords=” 151,147,120 “

Example

<!DOCTYPE html>
<html>
<body>

<img src="https://lh4.googleusercontent.com/Ppp1wRzLnmoRf-R9WCrQwY3ojTKMix9oO57NeyliCvuW8yfg19vECsL66z1GH5w3rC-ZHLGvwi8-QHBSs48KSJH92WDOs9JU2Mn57Qus-OGUHmrywzPeUJONZ5IjUTuLKA=w1280" alt="circle" usemap="#circlemap" >

<map name="circlemap">
  <area shape="circle" coords="151,147,120" alt="circle" href="https://en.wikipedia.org/wiki/Circle">
</map>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

The coordinates are 151, 147, and 120 specifying the circle center and radius respectively.

Polygon

Polygon coords have the values x1,y1,x2,y2,..,xn,yn. The coordinates of the edges of the polygon are specified by this value. The browser will add the last coordinate pair to close the polygon if the first and last coordinate pairs are not the same.

coords=” 48,163,260,56,465,166,267,270,48,163 “

Example

<!DOCTYPE html>
<html>
<body>

<img src="https://lh5.googleusercontent.com/Ip8KS33abbo2Q5BBDBh229mEaQwAw0dO56CmJQ2UOb26sbNKPsRH9le9ZY9mZzbfvbCun4umf1RSppi1BcelCmYQWOdXBYicl2HL_kj1ELG7vokxdQLRtXhT_fU40Q-8QQ=w1280" alt="polygon" usemap="#polymap" >

<map name="polymap">
  <area shape="poly" coords="48,163,260,56,465,166,267,270,48,163" alt="polygon" href="https://en.wikipedia.org/wiki/Polygon">
</map>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

In the next article, I am going to discuss HTML Tables with Examples. Here, in this article, I try to explain Image Map Area in HTML with Examples and I hope you enjoy this HTML Image Maps with Examples article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.