HTML <map> tag


With clickable image map area:

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

Try it yourself

Browser Support

IE Firefox Chrome Safari Opera

All major browsers support <map> tag.

Definition and Usage

Define a client-side image maps. Image map (image-map) refers to an image with clickable areas.

Differences between HTML and XHTML


Tips and Notes:

Note: area element is always nested inside the map element. area elements define the image map area.

NOTE: <img> attributes can be referenced in usemap <map> The id or name attribute (depending on the browser), so we should at the same time to <map> add id and name attribute.

Required attributes

Attributes value description
id unique_name Define a unique name for the map tag.

Optional attributes

Attributes value description
name mapname The name of the image-map requirements.

Global Properties

<map> tag supports HTML in the global properties .

Event Properties

<map> tag supports HTML in the event properties .

Examples TIY

Create image maps
This example shows how to create image maps with clickable areas. Each of these regions is a hyperlink.

Related Pages

HTML DOM Reference Manual: the Map Object