Атрибут usemap тега <img> — карта-зображення
Атрибут usemap пов'язує між собою картинку і карту-зображення, що задається за допомогою контейнера <map> (карта -зображення являє собою зображення з інтерактивними областями).
Як такого зв'язку виступає ім'я ідентифікатора, яке вказується в значенні атрибута usemap, і те ж ім'я, задане у атрибута name елемента <map>.
При цьому в <img> ідентифікатор повинен починатися з символу решітки (#).
Загальний опис
автор: NagarD
- Нотатка
-
Атрибут usemap не може бути використаний, якщо елемент
автор: с3с<map>є нащадком елементів<a>або<map>.
Синтаксис
<img usemap=”#mapname”>Атрибут usemap може отримувати єдине значення:
-
#mapname -
Хеш-символ ("#") і ім’я елемента
автор: с3с<map>.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
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
<p>1. Малюнок 200×100 у натуральну величину — зони збігаються з фігурами:</p>
<span class="wrap">
<img width="200" height="100" alt="План: синій прямокутник і зелене коло"
usemap="#plan"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='100'%3E%3Crect%20width='200'%20height='100'%20fill='%23eef3fb'/%3E%3Crect%20width='100'%20height='100'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='150'%20cy='50'%20r='40'%20fill='%2372b043'/%3E%3C/svg%3E">
<span class="zone rect"></span>
<span class="zone circ"></span>
</span>
<p>2. Той самий файл і та сама карта, але показані як 400×200. Фігури виросли,
зони — ні:</p>
<span class="wrap">
<img width="400" height="200" alt="Той самий план, розтягнутий удвічі"
usemap="#plan"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='100'%3E%3Crect%20width='200'%20height='100'%20fill='%23eef3fb'/%3E%3Crect%20width='100'%20height='100'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='150'%20cy='50'%20r='40'%20fill='%2372b043'/%3E%3C/svg%3E">
<span class="zone rect"></span>
<span class="zone circ"></span>
</span>
<map name="plan" id="plan">
<area shape="rect" coords="0,0,100,100" href="#left" alt="Ліва половина">
<area shape="circle" coords="150,50,40" href="#right" alt="Праве коло">
<area shape="default" href="#rest" alt="Решта малюнка">
</map>
<p id="left" class="msg">Ви натиснули ЛІВУ прямокутну зону: coords="0,0,100,100".</p>
<p id="right" class="msg">Ви натиснули ПРАВЕ коло: coords="150,50,40".</p>
<p id="rest" class="msg">Ви натиснули поза зонами — спрацювала область
shape="default", яка ловить усе решту.</p>CSS
p {
max-width: 520px;
margin: 14px 0 6px;
}
.wrap {
position: relative;
display: inline-block;
line-height: 0;
}
.zone {
position: absolute;
border: 2px dashed #d64545;
pointer-events: none;
}
.rect {
left: 0;
top: 0;
width: 96px;
height: 96px;
}
.circ {
left: 106px;
top: 6px;
width: 84px;
height: 84px;
border-radius: 50%;
}
.msg {
display: none;
padding: 8px 12px;
border-left: 6px solid #2f6fd0;
background: #f6f9ff;
color: #1b4f9c;
font-weight: 600;
}
.msg:target {
display: block;
}Коментарі
Коментарів ще немає — будьте першим!