Атрибут shape тега <area> — форма ділянки на карті

HTML

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='100' viewBox='0 0 360 100'%3E%3Crect width='360' height='100' fill='%23f1faee'/%3E%3Ccircle cx='60' cy='50' r='50' fill='%23e63946'/%3E%3Ccircle cx='180' cy='50' r='50' fill='%232a9d8f'/%3E%3Ccircle cx='300' cy='50' r='50' fill='%230077b6'/%3E%3C/svg%3E" alt="ea72a953742e69be18e53a163038d3e4.png" border="0" width="360" height="100" usemap="#planetmap">
<p id="map"></p>
<map name="planetmap">
  <area nclick="f('Ви нажали на вільне місце')")>
  <area shape="circle" coords="60,50,50" href="#" alt="Sun" onclick="f('Ви нажали на червоний круг')")>
  <area shape="circle" coords="180,50,50" href="#" onclick="f('Ви нажали на зелений круг')")>
  <area shape="circle" coords="300,50,50" href="#" alt="Venus" onclick="f('Ви нажали на синій круг')")>
</map>

JS

function f(argument) {
  document.getElementById("map").innerHTML = argument;
}
//# sourceURL=pen.js

HTML

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 150 150' preserveAspectRatio='none'%3E%3Crect width='50' height='150' fill='%23e63946'/%3E%3Crect x='50' width='50' height='150' fill='%232a9d8f'/%3E%3Crect x='100' width='50' height='150' fill='%230077b6'/%3E%3C/svg%3E" width="145" height="126" usemap="#planetmap">
<p id="map"></p>
<map name="planetmap">
  <area shape="rect" coords="0,0,50,150" href="#" alt="Sun" onclick="f('Ви нажали на червоний світлодіод')")>
  <area shape="rect" coords="50,0,100,150" href="#" onclick="f('Ви нажали на зелений світлодіод')")>
  <area shape="rect" coords="100,0,150,150" href="#" alt="Venus" onclick="f('Ви нажали на синій світлодіод')")>
</map>

JS

function f(argument) {
  document.getElementById("map").innerHTML = argument;
}
//# sourceURL=pen.js

HTML

<div>
    <p class="head">Карта зображення: зони є, але їх не видно</p>
    <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%3E%3Crect%20width='400'%20height='160'%20fill='%23eef3fb'/%3E%3Crect%20x='0'%20y='0'%20width='140'%20height='160'%20fill='%232f6fd0'%20opacity='.35'/%3E%3Ccircle%20cx='230'%20cy='80'%20r='55'%20fill='%2372b043'%20opacity='.5'/%3E%3Cpolygon%20points='310,150%20390,150%20390,20'%20fill='%23f2b134'%20opacity='.7'/%3E%3C/svg%3E" width="400" height="160" usemap="#zony" alt="Схема з трьома ділянками">
    <map name="zony">
      <area shape="rect" coords="0,0,140,160" href="#r" alt="Синя ділянка">
      <area shape="circle" coords="230,80,55" href="#c" alt="Зелене коло">
      <area shape="poly" coords="310,150,390,150,390,20" href="#p" alt="Жовтий трикутник">
    </map>
    <p class="note">Наведіть курсор: він міняється на «палець», але жодного обведення
       домогтися не можна — правило display: block !important нижче не діє.</p>
</div>

<div>
    <p class="head">Те саме звичайними посиланнями</p>
    <div class="overlay">
      <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%3E%3Crect%20width='400'%20height='160'%20fill='%23eef3fb'/%3E%3Crect%20x='0'%20y='0'%20width='140'%20height='160'%20fill='%232f6fd0'%20opacity='.35'/%3E%3Ccircle%20cx='230'%20cy='80'%20r='55'%20fill='%2372b043'%20opacity='.5'/%3E%3Cpolygon%20points='310,150%20390,150%20390,20'%20fill='%23f2b134'%20opacity='.7'/%3E%3C/svg%3E" width="400" height="160" alt="Схема з трьома ділянками">
      <a class="zone z1" href="#r"><span>Синя</span></a>
      <a class="zone z2" href="#c"><span>Коло</span></a>
      <a class="zone z3" href="#p"><span>Кут</span></a>
    </div>
    <p class="note">Ті самі зони видно завжди, вони підписані, підсвічуються
       під курсором і не роз'їжджаються при зміні розміру картинки.</p>
</div>

<p class="head">Пастка: circle із двома числами замість трьох</p>
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%3E%3Crect%20width='400'%20height='160'%20fill='%23eef3fb'/%3E%3Crect%20x='0'%20y='0'%20width='140'%20height='160'%20fill='%232f6fd0'%20opacity='.35'/%3E%3Ccircle%20cx='230'%20cy='80'%20r='55'%20fill='%2372b043'%20opacity='.5'/%3E%3Cpolygon%20points='310,150%20390,150%20390,20'%20fill='%23f2b134'%20opacity='.7'/%3E%3C/svg%3E" width="400" height="160" usemap="#bita" alt="Та сама схема">
<map name="bita">
  <area shape="circle" coords="230,80" href="#c" alt="Зона, якої немає">
</map>
<p class="note">Клацати нема куди: зона мертва, і ні браузер, ні валідатор
   про це не скажуть.</p>

CSS

.head {
    margin: 18px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.note {
    max-width: 400px;
    margin: 6px 0 0;
    color: #5a6472;
    font-size: .9em;
}

/* Спроба намалювати зону карти. Не спрацює: у стилях браузера
   в area прописано display: none з познакою !important. */
area {
    display: block !important;
    background: #d64545;
    outline: 3px solid #d64545;
}

.overlay {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.zone {
    position: absolute;
    display: block;
    border-radius: 4px;
    outline: 2px dashed #1b4f9c;
    outline-offset: -2px;
    text-decoration: none;
}

.zone span {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: 3px;
    background: #ffffff;
    color: #1b4f9c;
    font: 12px/1.6 system-ui, sans-serif;
    white-space: nowrap;
}

.zone:hover {
    background: rgba(47, 111, 208, .3);
    outline: 3px solid #2f6fd0;
}

.z1 {
    left: 0;
    top: 0;
    width: 35%;
    height: 100%;
}

.z2 {
    left: 43.75%;
    top: 15.6%;
    width: 27.5%;
    height: 68.8%;
    border-radius: 50%;
}

.z3 {
    left: 77.5%;
    top: 12.5%;
    width: 20%;
    height: 81.3%;
}