HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python Contents
Image Map HTML: Main Tips
- Using HTML
maptags, 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.
- 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
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified 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:
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
Edge
Firefox
IE
Opera
Safari
Mobile browser support
Chrome
Firefox
Opera
