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

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

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

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

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

Пример

Карта изображения с кликабельными областями компьютера, телефона и кофе.

Страница с картой изображения поверх workplace.jpg, использующей карту с именем workmap и три кликабельные области: прямоугольник над компьютером (computer.htm), прямоугольник над телефоном (phone.htm) и круг над чашкой кофе (coffee.htm).

> Вывод: полная HTML-страница

Prompt

Страница с картой изображения поверх workplace.jpg, использующей карту с именем workmap и три кликабельные области: прямоугольник над компьютером (computer.htm), прямоугольник над телефоном (phone.htm) и круг над чашкой кофе (coffee.htm).

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Полная карта изображения</title>
</head>
<body>

<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>

</body>
</html>

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

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

Изображение

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

Совет: В качестве карты изображения можно использовать любое изображение.

Изображение с usemap

Изображение, связанное с картой с помощью атрибута usemap.

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

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

Далее добавьте элемент <map>. Он связан с изображением через обязательный атрибут name, который должен совпадать со значением usemap изображения.

Элемент map

Открывающий тег <map> с его name.

<map name="workmap">

Области

Затем добавьте кликабельные области, каждая с элементом <area>. Вы задаёте форму: rect для прямоугольника, circle для круга, poly для многоугольника или default для всего изображения. Также вы задаёте координаты, чтобы разместить область на изображении.

Shape="rect"

Для shape="rect" координаты идут парами x (от левого края) и y (от верхнего края). Например, 34,44 — это 34 пикселя слева и 44 сверху, а 270,350 — противоположный угол. Вместе они образуют кликабельный прямоугольник.

Пример

Прямоугольная кликабельная область, ссылающаяся на computer.htm.

Страница с картой изображения поверх workplace.jpg с одной прямоугольной кликабельной областью с координатами 34,44,270,350, ведущей на computer.htm.

> Вывод: полная HTML-страница

Prompt

Страница с картой изображения поверх workplace.jpg с одной прямоугольной кликабельной областью с координатами 34,44,270,350, ведущей на computer.htm.

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Прямоугольная область</title>
</head>
<body>

<img src="workplace.jpg" alt="Рабочее место" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34, 44, 270, 350" alt="Компьютер" href="computer.htm">
</map>

</body>
</html>

Shape="circle"

Для shape="circle" укажите координаты центра, а затем радиус. Например, центр 337,300 и радиус 44 пикселя образуют кликабельный круг.

Пример

Круглая кликабельная область, ссылающаяся на coffee.htm.

Страница с картой изображения поверх workplace.jpg с одной круглой кликабельной областью с центром в точке 337,300 и радиусом 44, ведущей на coffee.htm.

> Вывод: полная HTML-страница

Prompt

Страница с картой изображения поверх workplace.jpg с одной круглой кликабельной областью с центром в точке 337,300 и радиусом 44, ведущей на coffee.htm.

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Круглая область</title>
</head>
<body>

<img src="workplace.jpg" alt="Рабочее место" usemap="#workmap">

<map name="workmap">
  <area shape="circle" coords="337, 300, 44" alt="Кофе" href="coffee.htm">
</map>

</body>
</html>

Shape="poly"

Для shape="poly" укажите несколько пар координат, чтобы образовать форму из прямых линий. Так можно построить любую форму, например круассан, найдя координаты x и y для всех его краёв.

Пример

Многоугольная кликабельная область, повторяющая контур круассана.

Страница с картой изображения поверх картинки с круассаном, использующей многоугольную кликабельную область, повторяющую края круассана, со ссылкой на croissant.htm.

> Вывод: полная HTML-страница

Prompt

Страница с картой изображения поверх картинки с круассаном, использующей многоугольную кликабельную область, повторяющую края круассана, со ссылкой на croissant.htm.

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Многоугольная область</title>
</head>
<body>

<img src="croissant.jpg" alt="Круассан" usemap="#croissantmap">

<map name="croissantmap">
  <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" alt="Круассан" href="croissant.htm">
</map>

</body>
</html>

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

Кликабельная область также может запускать функцию JavaScript. Добавьте событие клика к элементу <area> с помощью атрибута onclick.

Пример

Область, показывающая оповещение при клике.

Страница с картой изображения, где круглая область над чашкой кофе при клике запускает функцию JavaScript, показывающую предупреждение «You clicked the coffee cup!»

> Вывод: полная HTML-страница

Prompt

Страница с картой изображения, где круглая область над чашкой кофе при клике запускает функцию JavaScript, показывающую предупреждение «You clicked the coffee cup!»

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Область с JS</title>
</head>
<body>

<img src="workplace.jpg" alt="Рабочее место" usemap="#workmap">

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

<script>
function myFunction() {
  alert("Вы нажали на чашку кофе!");
}
</script>

</body>
</html>

Итоги главы

Подведём итог: используйте элемент <map>, чтобы определить карту изображения, элемент <area>, чтобы определить каждую кликабельную область, и атрибут usemap у элемента <img>, чтобы указать на карту.

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

Теги, связанные с изображениями: <img> (определяет изображение), <map> (определяет карту изображения), <area> (определяет кликабельную область внутри карты изображения) и <picture> (определяет контейнер для нескольких ресурсов изображений).