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

Описание

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

Прямоугольная область (rect):
<img src="navigation.png" usemap="#navmap"> <map name="navmap"> <a shape="rect" coords="0,0,50,50" href="#home">Home</a> </map>
Круглая область (circle):
<img src="target.png" usemap="#targetmap"> <map name="targetmap"> <a shape="circle" coords="100,100,50" href="#center">Center</a> </map>
Многоугольная область (poly):
<img src="states.png" usemap="#statemap"> <map name="statemap"> <a shape="poly" coords="10,20,30,40,50,60" href="#texas">Texas</a> </map>

Значения атрибута:

Значение Описание Формат координат
rect Прямоугольная область left,top,right,bottom
circle Круглая область centerX,centerY,radius
poly Многоугольная область x1,y1,x2,y2,...,xn,yn
default Вся область изображения Не требует координат

В HTML5 рекомендуется использовать тег <area> вместо <a> с атрибутом shape внутри карт изображений:

<img src="menu.png" usemap="#menumap"> <map name="menumap"> <area shape="rect" coords="0,0,100,50" href="#file" alt="File"> <area shape="rect" coords="100,0,200,50" href="#edit" alt="Edit"> </map>

Причины устаревания:

  • Нарушение семантики - <a> предназначен для текстовых ссылок
  • Тег <area> предоставляет более чистую реализацию
  • Лучшая поддержка специальных возможностей с <area>
  • Более логичная структура документа

Для современных проектов всегда используйте тег <area> внутри <map> вместо устаревшей конструкции с <a shape="...">.