html image map

1the map defines what url will be assigned to that shape over the the image
2
3<style>
4img {
5    display: block;
6    margin: 0 auto;
7    width: 260px;
8    height: 248px;
9}
10  </style>
11  <map name="infographic">
12    <area shape="rect" coords="184,6,253,27"
13          href="https://mozilla.org"
14          target="_blank" alt="Mozilla" />
15    <area shape="circle" coords="130,136,60"
16          href="https://developer.mozilla.org/"
17          target="_blank" alt="MDN" />
18    <area shape="poly" coords="130,6,253,96,223,106,130,39"
19          href="https://developer.mozilla.org/docs/Web/Guide/Graphics"
20          target="_blank" alt="Graphics" />
21    <area shape="poly" coords="253,96,207,241,189,217,223,103"
22          href="https://developer.mozilla.org/docs/Web/HTML"
23          target="_blank" alt="HTML" />
24    <area shape="poly" coords="207,241,54,241,72,217,189,217"
25          href="https://developer.mozilla.org/docs/Web/JavaScript"
26          target="_blank" alt="JavaScript" />
27    <area shape="poly" coords="54,241,6,97,36,107,72,217"
28          href="https://developer.mozilla.org/docs/Web/API"
29          target="_blank" alt="Web APIs" />
30    <area shape="poly" coords="6,97,130,6,130,39,36,107"
31          href="https://developer.mozilla.org/docs/Web/CSS"
32          target="_blank" alt="CSS" />
33</map>
34<img usemap="#infographic" src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info.png" alt="MDN infographic" />	  
35