🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <area>
определяет область, которая является частью изображения-карты, и связанную с ней гиперссылку. Область может быть прямоугольной, круглой или многоугольной формы. Тег <area>
не может использоваться самостоятельно и должен всегда находиться внутри контейнера <map>
.
<map name="mapname">
<area shape="rect" coords="x1,y1,x2,y2" href="url">
<area shape="circle" coords="x,y,r" href="url">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="url">
</map>
Атрибуты тега <area>
:
shape
— форма области. Может быть rect (прямоугольник), circle (круг) или poly (многоугольник).coords
— координаты области. Зависят от значенияshape
. Для прямоугольника указываются координаты левого верхнего угла и правого нижнего угла (x1,y1,x2,y2
). Для круга указывается координаты центра и радиус (x,y,r
). Для многоугольника указываются координаты всех точек (x1,y1,x2,y2,x3,y3,...
).alt
— описание области для пользователей, которые не могут визуально увидеть карту изображения.download
— предлагает скачать по ссылке целевой ресурс, указанный вhref
, вместо его отображения в браузере.href
— адрес, на который будет переходить пользователь при клике на область.hreflang
— язык, на котором написана целевая страница.media
— условия, которые должны быть выполнены для применения стиля к целевой странице.referrerpolicy
— политика отправки referrer при переходе по ссылке. Это влияет на то, как информация о странице-источнике передается на страницу-назначение.rel
— определяет отношение между текущей страницей и целевой страницей.target
— указывает, как будет открыта целевая страница. Значения:_self
(в текущем окне),_blank
(в новом окне),_parent
(в родительском фрейме) или_top
(во всем окне браузера).
⚠️ Если необходимо задать несколько ссылок на одну и ту же страницу, можно использовать несколько областей с разными координатами на одной картинке, либо использовать атрибуты rel
и hreflang
для каждой ссылки.