Тег <area>

Область карты изображения
  • Категории: Потоковое содержимое, Фразовое содержимое
  • Контекст:

    Где ожидается фазовое содержимое, но только при наличии родительского <map> или <template>.

  • Модель:

    Без содержимого.

Тег <area> (от англ. "area" - область) предназначен для создания активных областей на карте изображения. Каждая активная область представляет собой невидимую ссылку произвольной формы. Значения координат задаются в пикселях от левого верхнего угла изображения и очень сильно зависят от выбранной фигуры области. Всего у нас есть три варианта:

  • circle - окружность
  • rect - прямоугольник
  • poly - полигон

Вручную узнавать и прописывать координаты всех элементов - не самая простая задача. Для этого лучше воспользоваться одним из специализированных сервисов по генерации карт изображений, например, https://imagemap.org. Там вы сможете загрузить свое изображение, выбрать одну из трех фигур и пометить контуры нужных областей. В сети можно найти и другие варианты подобных сервисов.

Атрибуты

  • Глобальные атрибуты
  • alt - альтернативный текст для изображения
  • coords - координаты активной области, которая будет создана на карте изображения
  • download - следует ли загружать ресурс вместо перехода по нему, и имя файла, если да
  • href - адрес гиперссылки
  • hreflang - язык связанного ресурса
  • rel - тип связи этого документа с целевым ресурсом
  • shape - тип формы, создаваемой на карте изображения
  • target - контекст открытия гиперссылки
  • type - подсказка для типа ссылочного ресурса

  • Круглые области

    Для создания области в форме окружности используется атрибут shape в значении circle. При этом нам необходимо задать три параметры. Первые два определяют координату центра окружности, а третий - ее радиус.

    Используем круглые области, чтобы выполнить разметку всех планет и Солнца нашей Солнечной системы.

  • Прямоугольные области

    Прямоугольная область создается при помощи атрибута shape в значении rect. В качестве координат фигуры необходимо задать две пары:

    • координаты x,y левого верхнего угла
    • координаты x,y правого нижнего угла

    Используем прямоугольные области, чтобы разметить книги на книжной полке.

  • Полигон

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

    Используем полигон, чтобы выделить на карте контуры России.

Поделитесь данной записью с друзьями