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

С помощью карт изображений HTML можно создавать зоны, на которые можно нажимать.

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

HTML тег <map> определяет карту изображения. Карта изображений – это изображение с кликабельными областями. Области определяются одним или несколькими тегами <area>.

Попытайтесь нажать на компьютере, телефоне или чашке кофе на изображении ниже:

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

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

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

Изображения

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

Значение usemap начинается с хеш-тега #, за которым следует имя карты изображения и используется для создания взаимосвязи между изображением и картой изображений.

Создайте карту изображений

Потом добавьте элемент <map>.

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

Атрибут 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 для всех краев круассана:

Координаты подаются попарно, одна для оси х и одна для оси у:

Это область, которая становится интерактивной и направляет пользователя на страницу "croissant.html":

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

Интерактивная область может также вызвать JavaScript.

Добавьте событие click к элементу <area> для выполнения функции JavaScript:

Выводы

• Используйте HTML элемент <map> чтобы определить карту изображения
• Используйте HTML элемент <area> чтобы определить кликабельные области на карте изображения
• Используйте HTML атрибут usemap элемента <img> для указания на карту изображения

HTML Теги изображения