HTML Карти зображень
За допомогою карт зображень HTML можна створювати зони, на які можна натискати.
Карти зображень
HTML тег <map> визначає карту зображення. Карта зображень - це зображення із клікабельними областями. Області визначаються одним або кількома тегами <area>.
Спробуйте натиснути на комп’ютері, телефоні або чашці кави на зображенні нижче:
Приклад
Ось вихідний код HTML для карти зображень вище:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Комп’ютер" href="computer.html">
<area shape="rect" coords="290,172,333,250" alt="Телефон" href="phone.html">
<area shape="circle" coords="337,300,44" alt="Кава" href="coffee.html">
</map>
Спробуйте самі »
Як це працює?
Ідея карти зображення полягає в тому, що ви повинні мати можливість виконувати різні дії залежно від того, де на зображенні ви клацаєте.
Для створення карти зображень вам потрібно зображення та деякий HTML-код, який описує області, на які можна натиснути.
Зображення
Зображення вставляється за допомогою тегу <img> Єдина відмінність від інших зображень полягає в тому, що ви повинні додати атрибут usemap:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Значення usemap починається з хеш-тегу # за яким слідує ім'я карти зображення і використовується створити взаємозв'язок між зображенням та картою зображень.
Примітка: Ви можете використовувати будь-яке зображення як карту зображення!
Створіть карту зображень
Потім додайте елемент <map>.
Елемент <map> використовується для створення карти зображення та пов’язується із зображенням за допомогою необхідного атрибуту name:
<map name="workmap">
Атрибут name повинен мати те саме значення, що і атрибут <img> usemap.
Клікабельні області
Потім додайте клікабельні області.
Область, на яку можна натиснути, визначається за допомогою елемента <area>.
Форма клікабельної області
Ви повинні визначити форму області, на яку можна клікнути, і ви можете вибрати одне з цих значень:
rect- визначає прямокутну областьcircle- визначає кругову областьpoly- визначає полігональну областьdefault- визначає всю область
Ви також повинні визначити деякі координати, щоб можна було розмістити область, на яку можна натиснути, на зображенні.
Shape="rect"
Координати для shape="rect" складаються попарно, одна для осі x, і одна для осі y.
Отже, координати 34,44 розташовані на 34 пікселі від лівого поля та 44 пікселі від верхнього:
Координати 270,350 розташовані за 270 пікселів від лівого поля та 350 пікселів від верхнього:
Тепер у нас є достатньо даних, щоб створити прямокутну область, на яку можна натиснути:
Це область, яка стає інтерактивною і спрямовує користувача на сторінку "computer.html":
Shape="circle"
Щоб додати область кола, спершу знайдіть координати центру кола:
337,300
Потім вкажіть радіус кола:
44 pixels
Тепер у вас є достатньо даних для створення інтерактивної кругової області:
Це область, яка стає інтерактивною і спрямовує користувача на сторінку "coffee.html":
Shape="poly"
shape="poly" містить кілька координатних точок, що створює фігуру, утворену прямими лініями (багатокутник).
Це можна використовувати для створення будь-якої фігури.
Як, можливо, форма круасана!
Як ми можемо зробити так, щоб круасан на зображенні нижче став посиланням, яке можна натиснути?
Ми маємо знайти координати x та y для всіх країв круасана:
Координати подаються попарно, одна для осі х та одна для осі у:
Приклад
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.html">
Спробуйте самі »
Це область, яка стає інтерактивною та спрямовує користувача на сторінку "croissant.html":
Карта зображень та JavaScript
Інтерактивна область може також викликати функцію JavaScript.
Додайте подію click до елемента <area> для виконання функції JavaScript:
Приклад
Тут ми використовуємо атрибут onclick для виконання функції JavaScript при натисканні на область:
<map name="workmap">
<area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("Ви клацнули чашкою кави!");
}
</script>
Спробуйте самі »
Підсумок
- Використовуйте HTML елемент
<map>щоб визначити карту зображення - Використовуйте HTML елемент
<area>щоб визначити клікабельні області на карті зображення - Використовуйте HTML атрибут
usemapелемента<img>для вказівки на карту зображення
HTML Теги зображення
| Тег | Опис |
|---|---|
| <img> | Визначає зображення |
| <map> | Визначає карту зображення |
| <area> | Визначає клікабельну область всередині карти зображення |
| <picture> | Визначає контейнер для декількох ресурсів зображень |
Для ознайомлення з повним списком усіх доступних HTML тегів відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.
Запитання для самоконтролю
- Що таке карта зображень на вебсторінці?
- Для чого потрібні карти зображень на HTML-сторінці?
- Який тег визначає карту зображення?
- За допомогою якого тега визначаються клікабельні області на зображенні?
- Який атрибут потрібно додати до зображення, щоб встановити взаємозв'язок між зображенням та картою зображень?
- Який тег визначає карту зображення на стороні клієнта?
- За допомогою якого атрибуту карта зображення пов’язується із зображенням?
- Який тег визначає клікабельну область всередині карти зображень?
- Яке значення визначає прямокутну клікабельну область на зображенні?
- Яке значення визначає кругову клікабельну область на зображенні?
- Яке значення визначає полігональну клікабельну область на зображенні?
- Яке значення робить клікабельним все зображення?
- Який атрибут використовується для виконання JavaScript-функції onclick при натисканні на клікабельній області зображення?
- До якого елемента необхідно додати подію click для виконання JavaScript-функції onclick?
