Атрибут coords тега <a> — координати ділянки карти

<object data="missing.gif" type="image/gif" usemap="#Map1" width="300" height="60">
    <map name="Map1">
        <a href="#sun" shape="rect" coords="0,0,82,126">Сонце</a>
        <a href="#mercury" shape="circle" coords="90,58,3">Меркурій</a>
        <a href="#venus" shape="circle" coords="124,58,8">Венера</a>
    </map>
</object>

HTML

<p>1. Карта в натуральну величину. Помаранчева смуга — область <b>rect</b>,
    синє коло — область <b>circle</b>; обидві клікабельні.</p>
<img class="pic" width="300" height="150" usemap="#demo" 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='%23eef1f5'/%3E%3Crect%20width='100'%20height='150'%20fill='%23f2b134'/%3E%3Ccircle%20cx='200'%20cy='75'%20r='45'%20fill='%232f6fd0'/%3E%3C/svg%3E">
<map name="demo">
    <area shape="rect" coords="0,0,100,150" href="#rect" alt="Прямокутна область">
    <area shape="circle" coords="200,75,45" href="#circle" alt="Кругла область">
</map>

<p>2. Та сама карта, розтягнута стилями до 600 пікселів. Червоним пунктиром —
    де насправді лишилися області: координати рахуються від оригінальних
    пікселів і за картинкою не поїхали. Помаранчева смуга тепер удвічі ширша
    за свою область, коло взагалі роз'їхалося з нею, а більша частина
    зображення стала мертвою зоною.</p>
<div class="wide">
    <img class="pic stretched" width="300" height="150" usemap="#demo" 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='%23eef1f5'/%3E%3Crect%20width='100'%20height='150'%20fill='%23f2b134'/%3E%3Ccircle%20cx='200'%20cy='75'%20r='45'%20fill='%232f6fd0'/%3E%3C/svg%3E">
    <span class="zone zone-rect"></span>
    <span class="zone zone-circle"></span>
    <span class="zone zone-dead">від 245-го пікселя й далі областей немає взагалі</span>
</div>

<p>3. Сучасна заміна: контейнер із <b>position: relative</b> і посилання,
    задані у відсотках. Наведіть — вони підсвічуються; при будь-якій ширині
    вони лишаються рівно на своїх місцях.</p>
<div class="overlay">
    <img 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='%23eef1f5'/%3E%3Crect%20width='100'%20height='150'%20fill='%23f2b134'/%3E%3Ccircle%20cx='200'%20cy='75'%20r='45'%20fill='%232f6fd0'/%3E%3C/svg%3E">
    <a class="hot hot-rect" href="#a">ліва зона</a>
    <a class="hot hot-circle" href="#b">кругла зона</a>
</div>

CSS

p {
    margin: 18px 0 6px;
    max-width: 560px;
}

.pic {
    display: block;
    border: 1px solid #b9c6d8;
}

.wide {
    position: relative;
    width: 600px;
    max-width: 100%;
}

.stretched {
    width: 600px;
    max-width: 100%;
    height: 150px;
}

.zone {
    position: absolute;
    top: 0;
    border: 2px dashed #d64545;
    box-sizing: border-box;
}

.zone-rect {
    left: 0;
    width: 100px;
    height: 150px;
}

.zone-circle {
    left: 155px;
    top: 30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
}

.zone-dead {
    left: 245px;
    width: 355px;
    height: 150px;
    padding: 4px 8px;
    border-style: dotted;
    color: #c0392b;
    font-size: .85em;
}

.overlay {
    position: relative;
    width: 600px;
    max-width: 100%;
}

.overlay img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #b9c6d8;
}

.hot {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: .85em;
    text-decoration: none;
    border: 2px solid transparent;
}

.hot:hover,
.hot:focus {
    color: #12203a;
    background: rgba(255, 255, 255, .55);
    border-color: #12203a;
}

.hot-rect {
    left: 0;
    top: 0;
    width: 33.33%;
    height: 100%;
}

.hot-circle {
    left: 51.6%;
    top: 20%;
    width: 30%;
    height: 60%;
    border-radius: 50%;
}