Построение изображения-карты

Чтение — около 5 минут· без учёта практики

В предыдущем уроке мы встроили на сайт Тони видео с YouTube. В этом уроке мы рассмотрим, как составить клиентское изображение-карту: при нажатии на определённую область изображения выполняется переход по ссылке. Изображения-карты редко встречаются на сайтах, так как их составление довольно трудоёмко, но они пригодятся, если ссылки должны иметь необычную форму: например, части схемы или районы на карте города. Это дополнительный урок: на сайт Тони мы карту добавлять не будем.

Элементы map и area

Элемент <map> используется для определения изображения-карты. Изображение-карта представляет собой изображение с определёнными активными областями. Элемент <map> содержит ряд элементов <area>, которые определяют интерактивные области: при нажатии на область происходит действие, например открывается отдельная страница с описанием этого участка изображения. Элемент <area> — пустой, он записывается одним тегом.

Атрибут name элемента <map> является обязательным. Он связан с атрибутом usemap элемента <img> и создаёт связь между изображением и картой. Если у элемента <map> указан глобальный атрибут id, он должен иметь то же значение, что и атрибут name.

Атрибутами элемента <area> мы указываем тип фигуры (атрибут shape) и координаты области (атрибут coords). Координаты отсчитываются в пикселях от левого верхнего угла изображения: x — вправо, y — вниз.

Пример использования

Рассмотрим пример, в котором при нажатии на фигуру на одном рисунке происходит переход на разные страницы, которые описывают эти фигуры:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Голубой треугольник</title>
  </head>
  <body>
    <h1>Голубой треугольник</h1>
    <p><a href="index.html">Вернуться к фигурам</a></p>
  </body>
</html>

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Зелёный круг</title>
  </head>
  <body>
    <h1>Зелёный круг</h1>
    <p><a href="index.html">Вернуться к фигурам</a></p>
  </body>
</html>

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Изображение-карта</title>
  </head>
  <body>
    <p>Выбери фигуру:</p>
    <img src="assets/map.png" usemap="#figuri" alt="Четыре фигуры: квадрат, круг, треугольник и звезда" width="520" height="150">
    <map name="figuri">
      <area shape="rect" coords="25,25,125,125" href="red.html" alt="Красный квадрат">
      <area shape="circle" coords="200,75,50" href="green.html" alt="Зелёный круг">
      <area shape="poly" coords="325,25,262,125,388,125" href="blue.html" alt="Голубой треугольник">
      <area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html" alt="Жёлтая звезда">
    </map>
  </body>
</html>

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Красный квадрат</title>
  </head>
  <body>
    <h1>Красный квадрат</h1>
    <p><a href="index.html">Вернуться к фигурам</a></p>
  </body>
</html>

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Жёлтая звезда</title>
  </head>
  <body>
    <h1>Жёлтая звезда</h1>
    <p><a href="index.html">Вернуться к фигурам</a></p>
  </body>
</html>

По порядку, что мы сделали в этом примере:

• Разместили изображение элементом <img>, которое используем при составлении изображения-карты. В атрибуте usemap обязательно указывается имя изображения-карты, заданное в элементе <map>, и перед именем — решётка: usemap="#figuri".
• Разместили изображение-карту элементом <map> и задали ему обязательный атрибут name. В отличие от атрибута usemap, имя задаётся без решётки; в остальном значения должны совпадать.
• Разместили четыре элемента <area>, которые определяют интерактивные области:
  • Первой задали прямоугольную область (shape="rect") для квадрата: первые два значения — координаты левого верхнего угла, следующие два — правого нижнего угла.
  • Второй указали круглую область (shape="circle"): первое значение — координата центра по оси x, второе — по оси y, третье определяет радиус.
  • Третья и четвёртая области составлены как многоугольные (shape="poly"). Вы определяете нужное количество точек на изображении, находите их координаты (например, в графическом редакторе) и указываете их в таком порядке, чтобы браузер мог соединить их одной линией. Для треугольника это вершина, левый нижний угол и правый нижний угол. Последнюю точку соединять с первой не нужно — браузер замыкает фигуру сам.

Координаты задаются в пикселях, поэтому области не масштабируются вместе с изображением: если показать картинку в другом размере, области сместятся. Указывайте у изображения width и height такие же, как при измерении координат. Если ссылки можно разместить обычным списком, это проще и надёжнее изображения-карты.

Проверьте себя

Выберите ответ — объяснение появится сразу. Ответ можно менять.

1. 1
2. 2
3. 3
4. 4
5. 5

1. У карты <map name="plan">. Как связать с ней изображение?

<img src="plan.png" usemap="plan" alt="…">

<img src="plan.png" usemap="#plan" alt="…">

<img src="plan.png" map="#plan" alt="…">

Показать ответ

<img src="plan.png" usemap="#plan" alt="…"> — В usemap указывается имя карты с решёткой, в name — без неё.

2. Что означает <area shape="circle" coords="200,75,50">?

Круг с центром в точке 200, 75 и радиусом 50 пикселей

Круг диаметром 200 пикселей

Прямоугольник от точки 200, 75 шириной 50

Показать ответ

Круг с центром в точке 200, 75 и радиусом 50 пикселей — Для circle указываются координаты центра и радиус.

3. Какие координаты у прямоугольной области coords="25,25,125,125"?

Левый верхний угол 25, 25 и правый нижний угол 125, 125

Левый верхний угол 25, 25, ширина и высота по 125 пикселей

Центр 25, 25 и радиусы 125

Показать ответ

Левый верхний угол 25, 25 и правый нижний угол 125, 125 — Для rect указываются два противоположных угла.

4. Почему у <area href="…"> обязателен атрибут alt?

Без него область не будет нажиматься

Он сообщает назначение ссылки программам экранного доступа

Он задаёт подсказку при наведении

Показать ответ

Он сообщает назначение ссылки программам экранного доступа — Область не видна как текст ссылки, поэтому её название берётся из alt.

5. Изображение-карту уменьшили в два раза атрибутами width и height. Что произойдёт с областями?

Уменьшатся вместе с изображением

Останутся прежнего размера и сместятся относительно фигур

Перестанут работать

Показать ответ

Останутся прежнего размера и сместятся относительно фигур — Поэтому измеряйте координаты на изображении того размера, в котором оно показывается.

← Назад Далее →

Задание

Сделайте звезду на изображении ссылкой на страницу star.html. Нажатие рядом со звездой, на белом фоне, не должно выполнять переход. Это отдельное упражнение: файлы этого примера не заменяют сайт Тони в папке my-site. В следующем уроке мы продолжим сайт из задания о видео с YouTube.

• Свяжите изображение с картой с именем star.
• Добавьте многоугольную область. Для чистоты задания в качестве первой точки используйте верхнюю вершину звезды и двигайтесь по часовой стрелке.
• Задайте области понятный альтернативный текст.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Звезда-ссылка</title>
  </head>
  <body>
    <img src="assets/star.svg" alt="Красная пятиконечная звезда" width="400" height="300">
  </body>
</html>

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Звезда</title>
  </head>
  <body>
    <h1>Вы нажали на звезду</h1>
    <p><a href="index.html">Вернуться</a></p>
  </body>
</html>

Ожидаемый результат: при нажатии на звезду открывается страница «Вы нажали на звезду», а при нажатии на фон ничего не происходит. Клавиша Tab переводит фокус на область звезды. Если переход не работает, сравните значение usemap с атрибутом name карты и проверьте решётку.