HTML <area> Element for Image Maps

The <area> element defines a clickable region inside an image map. It must be placed inside a <map> element, while the related image points to that map using usemap="#name".

<img src="images/map.jpg" usemap="#sections" alt="Tutorial sections">
<map name="sections">
  <area shape="circle" coords="62,39,25" href="../php_tutorial/site_map.php" alt="PHP tutorials">
</map>

shape and coords values Top ↑

• rect: x1,y1,x2,y2
• circle: x,y,radius
• poly: a sequence of x,y coordinate pairs
• default: the remaining image-map area; do not use coords with it.

Working image-map demo Top ↑

Try the active regions in this original Plus2net map:

Important attributes Top ↑

When an <area> has an href, provide meaningful alt text describing the link destination or purpose. Link attributes such as target, rel, download and referrerpolicy can also be used where appropriate.

Responsive-image caution Top ↑

Image-map coordinates are pixel based. If the image is resized with CSS, the original coordinates do not automatically scale with it. Test image maps carefully on responsive layouts or use an alternative interaction pattern when the image must resize substantially.

HTML image maps HTML images CSS cursor

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: