Карта изображения в HTML или что такое Image Map

С помощью карт изображений 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="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

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

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

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

Изображение

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

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

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

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

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

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

<map name="workmap">

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

Области клика

Затем добавьте кликабельные области.

Кликабельная область определяется с помощью элемента <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.htm">

Именно эта область становится кликабельной и направляет пользователя на страницу "computer.htm":

Окружность shape="circle"

Чтобы добавить область круга, сначала найдем координаты центра круга: 337,300.

Затем указываем радиус круга: 44 пикселя.

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

Пример

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

Именно эта область становится кликабельной и направляет пользователя на страницу "coffee.htm":

Многоугольник shape="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.

Добавьте событие щелчка для элемента <area>, чтобы выполнить функцию JavaScript.

Пример

Здесь мы используем атрибут onclick для выполнения функции JavaScript при нажатии на область:

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

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

Короткое заключение

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