🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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