Атрибут ismap тега <img> — серверна карта зображень

<a href="/sandbox"><img src="/img/logo.svg" width="120" alt="Лого" ismap></a>

HTML

<p class="head">1. Серверна карта: картинка всередині посилання</p>
<a href="/karta">
  <img ismap width="300" height="150" alt="Сітка координат"
       src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='150'%3E%3Crect%20width='300'%20height='150'%20fill='%23eef3fb'/%3E%3Cg%20stroke='%23b9c6d8'%3E%3Cpath%20d='M50,0V150M100,0V150M150,0V150M200,0V150M250,0V150M0,50H300M0,100H300'/%3E%3C/g%3E%3Ccircle%20cx='150'%20cy='75'%20r='28'%20fill='%232f6fd0'%20opacity='.45'/%3E%3Ctext%20x='8'%20y='18'%20font-size='13'%20fill='%235a6472'%3E0,0%3C/text%3E%3Ctext%20x='106'%20y='80'%20font-size='13'%20fill='%23123a6b'%3E150,75%3C/text%3E%3C/svg%3E">
</a>
<p class="note">Наведіть курсор: він став «пальцем» — картинка є посиланням. Клац
   по центрі відправив би на /karta?150,75, клац у лівому верхньому куті — на
   /karta?3,4. Сторінки, яка це прочитає, тут немає, та й переходи в рамці
   прикладу заблоковано.</p>

<p class="head">2. Та сама картинка з ismap, але без посилання навколо</p>
<img ismap width="300" height="150" alt="Сітка координат"
     src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='150'%3E%3Crect%20width='300'%20height='150'%20fill='%23f4f5f7'/%3E%3Cg%20stroke='%23cfd6e0'%3E%3Cpath%20d='M50,0V150M100,0V150M150,0V150M200,0V150M250,0V150M0,50H300M0,100H300'/%3E%3C/g%3E%3Ctext%20x='8'%20y='18'%20font-size='13'%20fill='%235a6472'%3E0,0%3C/text%3E%3C/svg%3E">
<p class="note">Курсор лишився звичайною стрілкою, клацати нема куди: без
   теґу a навколо атрибут не робить нічого.</p>

<p class="head">3. Пастка масштабу: та сама картинка, показана вдвічі більшою</p>
<img ismap width="600" height="300" class="velyka" alt="Сітка координат"
     src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='150'%3E%3Crect%20width='300'%20height='150'%20fill='%23fff8f8'/%3E%3Cg%20stroke='%23e3b4b4'%3E%3Cpath%20d='M50,0V150M100,0V150M150,0V150M200,0V150M250,0V150M0,50H300M0,100H300'/%3E%3C/g%3E%3Ctext%20x='8'%20y='18'%20font-size='13'%20fill='%23c0392b'%3E0,0%3C/text%3E%3C/svg%3E">
<p class="note bad">Клац у центрі цієї картинки дасть уже 300,150, а не 150,75:
   координати рахуються в тих пікселях, у яких зображення показано на екрані.
   Карта, накреслена під один розмір, на іншому розмірі бреше.</p>

<p class="head">4. Заміна: звичайні посилання поверх картинки</p>
<div class="poverh">
  <img width="300" height="150" alt="Сітка координат"
       src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='150'%3E%3Crect%20width='300'%20height='150'%20fill='%23f3fbf4'/%3E%3Cg%20stroke='%23bcd9c2'%3E%3Cpath%20d='M50,0V150M100,0V150M150,0V150M200,0V150M250,0V150M0,50H300M0,100H300'/%3E%3C/g%3E%3C/svg%3E">
  <a class="zona z1" href="#pivnich"><span>Північ</span></a>
  <a class="zona z2" href="#pivden"><span>Південь</span></a>
</div>
<p class="note">Ці зони видно, вони підписані, підсвічуються під курсором,
   ловляться клавішею Tab і задані у відсотках — тож переживають будь-який розмір
   картинки. Сервер про координати нічого не знає й не мусить.</p>

CSS

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

img {
    display: block;
    outline: 2px solid #b9c6d8;
}

.velyka {
    outline-color: #d64545;
}

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

.bad {
    color: #c0392b;
}

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

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

.zona span {
    position: absolute;
    left: 6px;
    top: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #ffffff;
    color: #1b5e20;
    font: 13px/1.6 system-ui, sans-serif;
}

.zona:hover,
.zona:focus {
    background: rgba(58, 154, 79, .28);
    outline: 3px solid #3a9a4f;
}

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

.z2 {
    left: 0;
    top: 50%;
    width: 100%;
    height: 50%;
}