Атрибут shape тега <area>

Описание

Атрибут shape для тега <area> определяет форму кликабельной области на изображении-карте (image map). Это обязательный атрибут, который работает в сочетании с атрибутом coords.

Пример использования:
<img src="navigation.png" usemap="#navmap" alt="Навигационная карта"> <map name="navmap"> <area shape="rect" coords="0,0,100,50" href="/home" alt="Главная"> <area shape="circle" coords="150,75,25" href="/search" alt="Поиск"> <area shape="poly" coords="200,50,250,75,225,100" href="/contact" alt="Контакты"> <area shape="default" href="/fallback" alt="Область по умолчанию"> </map>

Допустимые значения:

Значение Описание Формат координат Пример
rect Прямоугольная область x1,y1,x2,y2 coords="0,0,100,50"
circle Круглая область x,y,radius coords="150,75,25"
poly Многоугольная область x1,y1,x2,y2,...,xn,yn coords="200,50,250,75,225,100"
default Вся оставшаяся область Не требует координат -

Рекомендации по использованию:

  • Всегда указывайте атрибут shape (обязательный)
  • Используйте rect для простых прямоугольных областей
  • circle лучше всего подходит для круглых элементов
  • poly позволяет создавать сложные многоугольные формы
  • default должен быть только один на карте
  • Проверяйте области в разных браузерах

Пример сложной формы:

<area shape="poly" coords="100,50,150,75,125,125,75,125,50,75" href="/complex-shape" alt="Сложная форма">

Инструменты для создания:

  • Adobe Photoshop - инструмент "Image Map"
  • Онлайн-генераторы (например, image-map.net)
  • Графические редакторы с возможностью просмотра координат

Ограничения и лучшие практики:

  • Координаты чувствительны к изменению размеров изображения
  • Сложные полигоны могут быть трудны в поддержке
  • Рекомендуется создавать резервные текстовые ссылки
  • Тестируйте на touch-устройствах

Примечание: Хотя технология image maps устаревает для сложных интерфейсов, она остается полезной для простых интерактивных изображений при правильном использовании атрибутов shape и coords.