Атрибут usemap тега <object> — карта зображень об'єкта
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<object usemap="#mapname">Атрибут usemap може отримувати єдине значення:
-
#mapname -
Хеш-символ ("#") плюс назва елемента карти для використання
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
usemap на object мав чіпляти карту до вбудованого зображення, як у img. Сучасні браузери це підтримують нестабільно — клац по областях може не працювати; надійний шлях — <img> з usemap.
<object data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Crect width='300' height='120' fill='%23001b33'/%3E%3Ccircle cx='40' cy='60' r='55' fill='gold'/%3E%3Ccircle cx='180' cy='60' r='14' fill='%23b3b3b3'/%3E%3Ccircle cx='255' cy='60' r='22' fill='%23e0a96d'/%3E%3C/svg%3E" type="image/svg+xml" width="300" height="120" usemap="#planetmap"></object>
<map name="planetmap">
<area shape="rect" coords="0,0,100,120" href="#sun" alt="Сонце">
</map>Три однакові за задумом блоки. У першому карта висить на <object> — зони мертві, клац не робить нічого (перевірено в переглядачі). У другому та сама карта на <img> — там вона працює, хоч і невидима. У третьому те, що варто робити сьогодні: звичайні посилання поверх картинки, задані у відсотках; їх видно, вони підписані й підсвічуються під курсором.
HTML
<p class="head bad">1. object + usemap — розмітка є, зон немає</p>
<object width="300" height="120" usemap="#karta"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='120'%3E%3Crect%20width='300'%20height='120'%20fill='%23eef3fb'/%3E%3Crect%20width='150'%20height='120'%20fill='%232f6fd0'%20opacity='.35'/%3E%3C/svg%3E"></object>
<p class="head">2. img + та сама карта — тут вона працює, але зон не видно</p>
<img width="300" height="120" usemap="#karta" alt="Схема з двома ділянками"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='120'%3E%3Crect%20width='300'%20height='120'%20fill='%23eef3fb'/%3E%3Crect%20width='150'%20height='120'%20fill='%2372b043'%20opacity='.45'/%3E%3C/svg%3E">
<map name="karta">
<area shape="rect" coords="0,0,150,120" href="#liva" alt="Ліва ділянка">
<area shape="rect" coords="150,0,300,120" href="#prava" alt="Права ділянка">
</map>
<p class="head good">3. Сучасно: посилання поверх картинки, задані у відсотках</p>
<div class="poverh">
<img width="300" height="120" alt="Схема з двома ділянками"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='120'%3E%3Crect%20width='300'%20height='120'%20fill='%23eef3fb'/%3E%3Crect%20width='150'%20height='120'%20fill='%233a9a4f'%20opacity='.45'/%3E%3C/svg%3E">
<a class="zona z1" href="#liva"><span>Ліва</span></a>
<a class="zona z2" href="#prava"><span>Права</span></a>
</div>
<p class="note">Порівняйте курсор: над картинкою з картою він стає «пальцем», над
об'єктом — ні, хоча атрибут у них однаковий.</p>CSS
.head {
margin: 20px 0 6px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
.bad {
color: #c0392b;
}
.good {
color: #1b5e20;
}
object,
img {
outline: 2px dashed #b9c6d8;
outline-offset: 3px;
}
.poverh {
position: relative;
display: inline-block;
line-height: 0;
}
.zona {
position: absolute;
top: 0;
display: block;
height: 100%;
width: 50%;
border-radius: 4px;
outline: 2px dashed #1b4f9c;
outline-offset: -2px;
text-decoration: none;
}
.z1 {
left: 0;
}
.z2 {
left: 50%;
}
.zona span {
position: absolute;
left: 6px;
bottom: 6px;
padding: 1px 6px;
border-radius: 3px;
background: #ffffff;
color: #1b4f9c;
font: 12px/1.6 system-ui, sans-serif;
}
.zona:hover {
background: rgba(47, 111, 208, .3);
outline: 3px solid #2f6fd0;
}
.note {
max-width: 420px;
margin-top: 14px;
color: #5a6472;
font-size: .9em;
}Коментарі
Коментарів ще немає — будьте першим!