HTML Карта изображения

Карты изображений позволяют создавать интерактивные изображения, где разные области изображения могут быть связаны с различными ссылками или действиями. Это особенно полезно для создания навигационных меню, карт и других элементов, где требуется взаимодействие с пользователем.

Что такое карты изображений?

Карты изображений — это способ создания кликабельных областей на изображении. В HTML для этого используется тег <map>, который определяет карту изображения. Внутри тега <map> находятся теги <area>, которые определяют активные области на изображении.

Пример использования карты изображений

Кликните на компьютер, смартфон или чашку кофе на следующем изображении:

Вот исходный HTML код для приведенной карты изображения:

<img src="workplace.jpg" alt="Рабочее место" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Компьютер" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Телефон" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Кофе" href="coffee.htm">
</map>

Как это работает?

Основная идея карт изображений заключается в том, что вы можете выполнять разные действия в зависимости от того, где на изображении вы кликаете.

Для создания карты изображения вам нужно изображение и HTML-код, который описывает кликабельные области.

Изображение

Изображение вставляется с помощью тега <img>. Единственное отличие от других изображений заключается в том, что вы должны добавить атрибут usemap:

<img src="workplace.jpg" alt="Рабочее место" usemap="#workmap">

Атрибут usemap указывает на имя карты изображения, которое используется для создания связи между изображением и картой.

Примечание: Для карты изображения можно использовать любое изображение!

Создание карты изображения

Затем добавьте тег <map>. Тег <map> используется для создания карты изображения и связывается с изображением с помощью обязательного атрибута name:

<map name="workmap">

Атрибут name должен иметь то же значение, что и атрибут usemap тега <img>.

Активные области

Затем следует добавить активные области. Активная область определяется с помощью тега <area>.

Тег <area> принимает несколько важных атрибутов:

shape: Определяет форму области. Возможные значения: rect (прямоугольник), circle (круг), poly (многоугольник).
coords: Определяет координаты области. Координаты зависят от формы:
- Для rect: x1,y1,x2,y2 (верхний левый и нижний правый углы).
- Для circle: x,y,r (центр и радиус).
- Для poly: x1,y1,x2,y2,... (координаты вершин многоугольника).
href: Определяет URL, на который ведет ссылка.
alt: Определяет альтернативный текст для области.

shape со значением rect (Прямоугольник)

Координаты активной области при атрибуте shape="rect" представлены парами, одна для оси x и одна для оси y.

Таким образом, координаты 34,44 расположены в 34 пикселях от левого отступа и в 44 пикселях от верхнего:

Координаты 270,350 находятся на расстоянии 270 пикселей от левого края и 350 пикселей от верхнего края:

Теперь у нас достаточно данных, чтобы создать активную прямоугольную область, на которую можно нажимать:

Пример:

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

Мы получаем такую активную область, по которой можно кликнуть, чтобы перейти на страницу «computer.htm»:

shape co значением circle (Круг)

Чтобы добавить область в форме круга, сначала определите координаты центра круга:

337,300

Затем укажите радиус окружности:

44 пикселей

Теперь у вас достаточно данных, чтобы создать интерактивную область в форме круга:

Пример:

<area форма="круг" координаты="337, 300, 44" ссылка="coffee.htm">

Мы получаем такую активную область, по которой можно кликнуть, чтобы перейти на страницу «coffee.htm»:

shape co значением poly (Многоугольник)

Значение shape="poly" требует определения нескольких точек координат, которые образуют фигуру, состоящую из прямых линий (многоугольник).

С его помощью можно создать любую форму.

Например, круассана!

Как сделать так, чтобы круассан на изображении ниже стал кликабельной ссылкой?

Нам нужно найти координаты x и y для всех углов круассана:

Координаты указываются парами: одна для оси 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.htm">

Мы получаем такую активную область, по которой можно кликнуть, чтобы перейти на страницу «croissant.htm»:

Карты изображений и JavaScript

Активная область карты изображения также может запускать функцию JavaScript. Добавьте событие onclick к тегу <area>, чтобы выполнить функцию JavaScript:

Пример:

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("Вы кликнули на кружку с кофе!");
}
</script>

Заключение

Карты изображений предоставляют мощные инструменты для создания интерактивных и адаптивных изображений в HTML. Они позволяют улучшить пользовательский опыт и сделать веб-страницы более удобными и привлекательными.