Image Map: HTML map Tag

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:

<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.

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

GET 50% OFF

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

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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:

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:

<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

Chrome

1+

Edge

All

Firefox

1+

IE

All

Opera

All

Safari

1+

Mobile browser support

Chrome

18+

Firefox

4+

Opera

All

Safari

All