Тег <map> в HTML — карта-зображення з областями <area>

HTML

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='140'%3E%3Crect width='300' height='140' fill='%23eef3fb'/%3E%3Ccircle cx='70' cy='70' r='45' fill='%23f2b134'/%3E%3Crect x='170' y='25' width='90' height='90' fill='%2372b043'/%3E%3C/svg%3E"
     width="300" height="140" alt="Жовте коло ліворуч і зелений квадрат праворуч"
     usemap="#shapes">

<map name="shapes">
    <area shape="circle" coords="70,70,45" href="#kolo" alt="Жовте коло">
    <area shape="rect" coords="170,25,260,115" href="#kvadrat" alt="Зелений квадрат">
</map>

<p class="hint" id="kolo">Ви клацнули по колу.</p>
<p class="hint" id="kvadrat">Ви клацнули по квадрату.</p>

CSS

img {
    border: 1px solid #cbd5e1;
}

.hint {
    display: none;
    margin-top: 10px;
    padding: 6px 10px;
    background: #eef3fb;
    border-left: 3px solid #7aa7e9;
}

.hint:target {
    display: block;
}

HTML

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='145' height='126'%3E%3Crect width='50' height='126' fill='%23e63946'/%3E%3Crect x='50' width='50' height='126' fill='%232a9d8f'/%3E%3Crect x='100' width='45' height='126' fill='%23457b9d'/%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