<map name="infographic">
    <area
        shape="poly"
        coords="129,0,260,95,129,138"
        href="https://webdoky.org/uk/docs/Web/HTTP"
        target="_blank"
        alt="HTTP"
    />
    <area
        shape="poly"
        coords="260,96,209,249,130,138"
        href="https://webdoky.org/uk/docs/Web/HTML"
        target="_blank"
        alt="HTML"
    />
    <area
        shape="poly"
        coords="209,249,49,249,130,139"
        href="https://webdoky.org/uk/docs/Web/JavaScript"
        target="_blank"
        alt="JavaScript"
    />
    <area
        shape="poly"
        coords="48,249,0,96,129,138"
        href="https://webdoky.org/uk/docs/Web/API"
        target="_blank"
        alt="API Вебу"
    />
    <area
        shape="poly"
        coords="0,95,128,0,128,137"
        href="https://webdoky.org/uk/docs/Web/CSS"
        target="_blank"
        alt="CSS"
    />
</map>
<img usemap="#infographic" src="/media/examples/mdn-info.png" alt="Інфографіка WebDoky" />

img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 260px;
}