HTML Image Maps with <map> and <area>

An HTML image map makes different regions of one image act as separate links. Use an image with a usemap attribute, a matching <map name>, and one or more <area> elements.

<img src="images/map.jpg" usemap="#sections" alt="Tutorial map">
<map name="sections">
  <area shape="rect" coords="213,36,378,93" href="../jquery/site_map.php" alt="jQuery tutorials">
</map>

Matching usemap and name Top ↑

The image value starts with #, for example usemap="#sections". The map uses the same identifier without the hash: name="sections".

Plus2net image-map example Top ↑

Accessibility and responsive layouts Top ↑

Give the image useful alternative text and each linked <area> meaningful alt text. Because coords uses image pixels, responsive resizing can make hotspots inaccurate unless coordinates are adjusted.

Area shapes Top ↑

The detailed <area> tutorial covers rectangle, circle, polygon and default regions.

HTML images Area tag

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: