Cyber Week

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

Image Map: HTML map Tag

Reading time 2 min
Published Jun 29, 2017
Updated Oct 2, 2019

Image Map HTML: Main Tips

  • Using HTML map tags, you can create a clickable map.
  • By clicking the HTML map area, the user will open links provided.
  • The clickable places are defined using <area> elements.
  • You cannot skip the ending tag when creating an HTML image map.

How to Create a Clickable Map

The map tags define an HTML image map. It is an image with clickable areas associated with links:

Example
<img src="https://cdn.bitdegree.org/learn/space%20gif.gif?raw=true" width="500" height="600" alt="Creatures" usemap="#creaturemap">

<map name="creaturemap">
  <area shape="rect" coords="34, 44, 270, 350" alt="Doggo" href="https://www.bitdegree.org">
  <area shape="rect" coords="290, 172, 333, 250" alt="Gaming" href="http://www.bitdegree.org">
  <area shape="circle" coords="337, 300, 44" alt="Level up" href="http://www.bitdegree.org">
</map>

Note: when creating an image map, HTML <img> element must be included to specify the image you will place the links in.

Using the <area> Tag

To define the clickable places in an image map, you can use HTML <area> elements. This element is a child of <map> and can only be used within it.

One HTML image map can have multiple <area> elements, each with their own hyperlink. HTML <area> elements can be specified using four attributes:

Attribute Definition
shape The shape of the HTML area: a rectangle, a circle, or a polygon
coords The coordinates of the clickable area
alt The alternative text to display if the image doesn't load
href The URL address for the hyperlink

The name Attribute

If you wish to create a clickable image map, HTML <map> tags should also include a <name> attribute. It is required to properly link the map with the image:

Example
<map name="creaturemap">

HTML map tags also support all the global attributes. However, if you're using the global id attribute, you need to make sure it matches the name.

Note: the <name> attribute cannot be empty or contain spaces.

Browser support

Browser image
Chrome
1+
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
1+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All