HTML -карты изображений
С картами изображений 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>тега. Единственное отличие от других изображений в том, что вы должны добавить usemapатрибут:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Значение usemapначинается с хэш-тега
#, за которым следует имя карты изображения, и используется для создания связи между изображением и картой изображения.
Совет: Вы можете использовать любое изображение в качестве карты изображения!
Создать карту изображения
Затем добавьте <map>элемент.
Элемент <map>используется для создания карты изображения и связан с изображением с помощью обязательного name
атрибута:
<map name="workmap">
Атрибут nameдолжен иметь то же значение, что
и атрибут <img>'s .usemap
Области
Затем добавьте кликабельные области.
Щелчковая область определяется с помощью <area>элемента.
Форма
Вы должны определить форму кликабельной области, и вы можете выбрать одно из следующих значений:
rect- определяет прямоугольную областьcircle- определяет круговую областьpoly- определяет полигональную областьdefault- определяет весь регион
Вы также должны определить некоторые координаты, чтобы иметь возможность поместить кликабельную область на изображение.
Форма = "прямая"
Координаты для 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»:
Форма = "круг"
Чтобы добавить область круга, сначала найдите координаты центра круга:
337,300
Затем укажите радиус круга:
44 пикселей
Теперь у вас достаточно данных для создания кликабельной круглой области:
Пример
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Это область, которая становится кликабельной и перенаправляет пользователя на страницу «coffee.htm»:
Форма = "поли"
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 при нажатии на область:
<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>для определения карты изображения - Используйте
<area>элемент HTML для определения интерактивных областей на карте изображения. - Используйте
usemapатрибут HTML<img>элемента, чтобы указать на карту изображения
HTML-теги изображений
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .