Добавление интерактивной карты поверх изображения

В HTML можно создать кликабельную карту изображения с помощью элементов <area> и <map>. В этой статье описано, как создать карту изображения, а также рассмотрены некоторые недостатки, которые следует учитывать.

Карты изображений и их недостатки

Если поместить изображение внутрь элемента <a>, на одну веб-страницу будет ссылаться всё изображение. Карта изображения, напротив, содержит несколько активных областей (так называемых «горячих областей»), каждая из которых ведёт к отдельному ресурсу.

Раньше карты изображений были популярным средством навигации, но важно тщательно обдумать последствия их использования для производительности и доступности.

Текстовые ссылки (возможно, оформленные с помощью CSS) предпочтительнее карт изображений по нескольким причинам: текстовые ссылки мало весят, их легко поддерживать, они часто лучше подходят для SEO и поддерживают потребности в доступности (например, для программ экранного доступа, текстовых браузеров и сервисов перевода).

Как правильно добавить карту изображения

Шаг 1: изображение

Подойдёт не любое изображение.

• Изображение должно ясно показывать, что произойдёт, если перейти по ссылкам на нём. Конечно, текст alt обязателен, но многие люди его никогда не увидят.
• На изображении должно быть чётко видно, где начинаются и заканчиваются горячие области.
• Горячие области должны быть достаточно большими, чтобы по ним было удобно нажимать при любом размере области просмотра. Насколько большими? 72 × 72 CSS-пикселя — хороший минимальный размер, а между целями касания следует оставлять достаточно большие промежутки. Карта мира на сайте 50languages.com (на момент написания статьи) прекрасно иллюстрирует эту проблему. Нажать на Россию или Северную Америку гораздо проще, чем на Албанию или Эстонию.

Добавьте изображение обычным способом (с помощью элемента <img> и текста alt). Если изображение используется только для навигации, можно написать alt="", при условии, что вы добавите подходящий текст alt в элементы <area> далее.

Вам понадобится специальный атрибут usemap. Придумайте уникальное имя карты изображения без пробелов. Затем задайте это имя (с символом решётки перед ним) в качестве значения атрибута usemap:

<img src="image-map.png" alt="" usemap="#example-map-1" />

Шаг 2: активируйте горячие области

На этом шаге поместите весь код внутрь элемента <map>. Для <map> нужен только один атрибут — то же имя карты name, которое вы использовали выше в атрибуте usemap:

<map name="example-map-1"> </map>

Внутри элемента <map> нам понадобятся элементы <area>. Один элемент <area> соответствует одной горячей области. Чтобы навигация с клавиатуры была интуитивно понятной, расположите элементы <area> в исходном порядке, соответствующем визуальному порядку горячих областей.

Элементы <area> являются пустыми элементами, но для них нужны четыре атрибута:

shape

Атрибут shape принимает одно из четырёх значений: circle, rect, poly и default. Элемент <area>, у которого shape равно default, занимает всё изображение за исключением других заданных вами горячих областей. Если заданные области перекрываются, приоритет определяется исходным порядком. Выбранная вами форма определяет, какие координаты потребуется указать в coords.

coords

Координаты задаются в CSS-пикселях, а их значения зависят от выбранного shape.

• Для круга укажите координаты центра по осям x и y, а затем длину радиуса.
• Для прямоугольника укажите координаты верхнего левого и нижнего правого углов по осям x и y.
• Для многоугольника укажите координаты x и y каждой вершины (то есть не менее шести значений).

href

URL ресурса, на который ведёт ссылка. Если вы не хотите, чтобы текущая область куда-либо вела (например, если вы создаёте полый круг), этот атрибут можно оставить пустым.

alt

Обязательный атрибут, который сообщает пользователям, куда ведёт ссылка или что она делает. Текст alt отображается, только когда изображение недоступно. См. наши рекомендации по написанию доступного текста ссылок.

Можно написать alt="", если атрибут href пуст и у всего изображения уже есть атрибут alt.

<map name="example-map-1">
  <area
    shape="circle"
    coords="200,250,25"
    href="page-2.html"
    alt="circle example" />

  <area
    shape="rect"
    coords="10, 5, 20, 15"
    href="page-3.html"
    alt="rectangle example" />
</map>

Шаг 3: убедитесь, что всё работает для всех

Не считайте работу завершённой, пока тщательно не протестируете карты изображений в разных браузерах и на разных устройствах. Попробуйте переходить по ссылкам только с помощью клавиатуры. Попробуйте отключить изображения.

Если ширина карты изображения превышает примерно 240 пикселей, для адаптации сайта потребуется внести дополнительные изменения. Недостаточно просто изменить размер изображения для маленьких экранов: координаты останутся прежними и больше не будут соответствовать изображению.

Подробнее

• <img>
• <map>
• <area>
• Онлайн-редактор карт изображений