The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas. The <map> tag is used along with the <area> and <img> tags to define the image map.

Example Code:
<img alt="Shapes" height="102" src="image/shapes.jpg" style="border: none;" usemap="#shapes" width="375" />
<map name="shapes" id="shapes">
  <area shape="circle" coords="58,50,40" href="javascript:clicked_on('circle');" title="Circle" alt="Circle"/>
  <area shape="rect" coords="136,11,227,89" href="javascript:clicked_on ('rectangle');" title="Rectangle" alt="Rectangle"/>
  <area shape="poly" coords="309,13,358,89,257,89" href="javascript:clicked_on('triangle');" title="Triangle" alt="Triangle"/>
  <area shape="default" nohref="nohref" title="Default" alt="Default"/>
Shapes Circle Rectangle Triangle Default
Attribute Definition
name Assigns a name to the image map.
Global Attributes:

The <map> tag also supports the Global Attributes in HTML5

Event Attributes:

The <map> tag also supports the Event Attributes in HTML5

Last updated on 2 August 2018 By Rene Spronk

View All HTML Tags

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.