НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
Place for your advertisement!
HTML5. Уроки для початківців. W3Schools українською

En

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 пікселів від верхнього:

Карта зображень

Тепер у нас є достатньо даних, щоб створити прямокутну область, на яку можна натиснути:

Приклад

<area shape="rect" coords="34, 44, 270, 350" href="computer.html">
Спробуйте самі »

Це область, яка стає інтерактивною і спрямовує користувача на сторінку "computer.html":

Карта зображень

Shape="circle"

Щоб додати область кола, спершу знайдіть координати центру кола:

337,300

Карта зображень

Потім вкажіть радіус кола:

44 pixels

Карта зображень

Тепер у вас є достатньо даних для створення інтерактивної кругової області:

Приклад

<area shape="circle" coords="337, 300, 44" href="coffee.html">
Спробуйте самі »

Це область, яка стає інтерактивною і спрямовує користувача на сторінку "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?

Place for your advertisement!