HTML Изображение карта
С помощью карты изображений, можно добавлять интерактивные области на изображение.
Карта изображений
Тег <map> определяет изображение-карту. Изображение-карта - это изображение с кликабельными областями.
Нажмите на компьютер, телефон или чашку кофе на изображении ниже:
Вот исходный код 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>
Попробуйте сами »
Как это работает?
Идея карты изображений заключается в том, что вы должны иметь возможность выполнять различные действия в зависимости от того, где в изображении вы нажимаете.
Для создания карты изображений вам понадобится изображение и карта, содержащая некоторые правила, описывающие кликабельные области.
Создание изображения
Изображение вставляется с помощью тега <img>. Единственное отличие от других изображений заключается в том, что вы должны добавить атрибут usemap:
<img src="workplace.jpg" alt="Рабочее место" usemap="#workmap">
Значение usemap начинается с хэштега # затем следует имя карты изображений, и используется для создания связи между изображением и картой изображений.
Совет: Вы можете использовать любое изображение в качестве карты изображений.
Создание карты изображений
Затем добавить элемент <map>.
Элемент <map> используется для создания карты изображений и связан с изображением с помощью атрибута name:
<map name="workmap">
Атрибут name должен иметь то же значение, что и атрибута usemap.
Примечание: Вы можете вставить элемент <map> в любом месте, где вам нравится, он не должен быть вставлен сразу после изображения.
Создание области
Затем добавьте кликабельные области.
Кликабельная область определяется с помощью элемента <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.
Добавить событие click элемент <area> для выполнения функции JavaScript:
Вы можете использовать атрибут onclick для выполнения функции JavaScript при щелчке области.
<area shape="circle" coords="337,300,44"
onclick="myFunction()">
Попробуйте сами »
Краткое содержание
- Используйте HTML элемент
<map>для определения карты изображений - Используйте HTML элемент
<area>для определения кликабельных областей на карте изображений - Используйте HTML атрибут
usemapсамого элемента<img>для указания на карту изображений
HTML Теги изображений
| Тег | Описание |
|---|---|
| <img> | Определяет изображение |
| <map> | Определяет изображение-карта |
| <area> | Определяет активную область внутри изображении-карты |
| <picture> | Определяет контейнер для нескольких ресурсов изображений |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.