Атрибут name тега <map> — ім'я карти зображень для usemap

HTML

<p class="head good">1. Імена збігаються — карта працює</p>
<img class="karta" width="300" height="90" usemap="#pravylna" alt="Три ділянки"
     src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='90'%3E%3Crect%20width='300'%20height='90'%20fill='%23eef3fb'/%3E%3Crect%20x='0'%20y='0'%20width='100'%20height='90'%20fill='%232f6fd0'%20opacity='.35'/%3E%3Crect%20x='100'%20y='0'%20width='100'%20height='90'%20fill='%2372b043'%20opacity='.35'/%3E%3Crect%20x='200'%20y='0'%20width='100'%20height='90'%20fill='%23f2b134'%20opacity='.5'/%3E%3C/svg%3E">
<map name="pravylna">
  <area shape="rect" coords="0,0,100,90" href="#a" alt="Ліва">
  <area shape="rect" coords="100,0,200,90" href="#b" alt="Середня">
  <area shape="rect" coords="200,0,300,90" href="#c" alt="Права">
</map>

<p class="head bad">2. usemap="#Pravylna", name="pravylna" — різний регістр</p>
<img class="karta" width="300" height="90" usemap="#Pravylna" alt="Три ділянки"
     src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='90'%3E%3Crect%20width='300'%20height='90'%20fill='%23f7f0f0'/%3E%3C/svg%3E">

<p class="head bad">3. usemap="rehistr" — без решітки</p>
<img class="karta" width="300" height="90" usemap="rehistr" alt="Три ділянки"
     src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='90'%3E%3Crect%20width='300'%20height='90'%20fill='%23f7f0f0'/%3E%3C/svg%3E">
<map name="rehistr"><area shape="rect" coords="0,0,300,90" href="#d" alt="Уся"></map>

<p class="head good">4. Те, чого не чекають: вміст map видно, а area — ні</p>
<img class="karta" width="300" height="90" usemap="#zvmistom" alt="Три ділянки"
     src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='90'%3E%3Crect%20width='300'%20height='90'%20fill='%23eef3fb'/%3E%3C/svg%3E">
<map name="zvmistom" class="vydyma">
  Той самий перехід текстом:
  <a href="#a">Ліва</a>, <a href="#b">Середня</a>, <a href="#c">Права</a>
  <area shape="rect" coords="0,0,300,90" href="#a" alt="Уся">
</map>

<p class="note">Спроба намалювати зону нижче в стилях не дає нічого: в area
   прописано display: none з познакою !important. Видно лише те, що лежить у map
   поруч із зонами — і це найпростіша текстова заміна карти.</p>

CSS

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

.good {
    color: #1b5e20;
}

.bad {
    color: #c0392b;
}

.karta {
    display: block;
    outline: 2px dashed #b9c6d8;
    outline-offset: 3px;
}

/* Не спрацює нізащо: у стилях переглядача в area стоїть display: none !important. */
area {
    display: block !important;
    background: #d64545;
    outline: 3px solid #d64545;
}

/* А оце спрацює: сам map — звичайний рядковий елемент. */
.vydyma {
    display: block;
    max-width: 300px;
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px solid #3a9a4f;
    border-radius: 6px;
    background: #f3fbf4;
    font-size: .9em;
    line-height: 1.9;
}

.note {
    max-width: 460px;
    margin-top: 18px;
    color: #5a6472;
    font-size: .9em;
}

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='%233a86ff'/%3E%3C/svg%3E" width="145" height="126" alt="Три кольорові смуги — карта посилань" 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