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

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

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

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

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

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

Резюме

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

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