HTML тег <area> Описание HTML тег <area> определяет активные области на изображении, которые являются ссылками, эти области могут отличаться формой и размером. Картинка
HTML тег <area>
Описание
HTML тег <area> определяет активные области на изображении, которые являются ссылками, эти области могут отличаться формой и размером. Картинка (изображение) с активными областями, называется картой-изображением. Такая картинка ничем не отличается от обычной, за исключением того, что содержит активные области (ссылки). Области могут перекрывать друг друга, сверху окажется та, которая в коде располагается первее (выше).
Элемент <area> используется только совместно с тегом <map> в качестве его дочернего элемента.
Атрибуты
alt: Определяет альтернативный текст, который будет виден вместо изображения, если оно не может быть отображено (из-за медленной связи, ошибки в атрибуте src и тд). coords: Атрибут coords указывает координаты активной области на карте-изображения. Он используется вместе с атрибутом shape для указания размера, формы и размещения активной области. Возможные значения атрибута:
- x1,y1,x2,y2 - указывает координаты верхнего левого и правого нижнего угла прямоугольника (shape="rect").
Определение координат для прямоугольника (shape="rect"):

x,y,радиус - определяет координаты центра окружности и радиус (shape="circle").
Определение координат для окружности (shape="circle"):

x1,y1,x2,y2. xn,yn - определяет координаты вершин полигона (многоугольника) (shape="poly").
Определение координат для многоугольника (shape="poly"):

Примечание: координаты верхнего левого угла области - 0,0.
Пример » href: Атрибут href указывает адрес страницы, на которую ведет ссылка с активной области изображения, если он не указан или пропущен, то тег <area> не будет являться гиперссылкой. (адрес может быть либо абсолютным либо относительным ) hreflang: Указывает двухбуквенный код языка, определяющий язык страницы, доступной по ссылке. Используется только совместно с атрибутом href и имеет исключительно информативный характер. Пример » media: Атрибут media определяет тип документа, на который ведет ссылка или указывает, тип устройства, для которого предназначается ссылка (пример: мобильный телефон, принтер и тд.).
Атрибут может принимать несколько значений и используется только совместно с атрибутом href. rel: Атрибут rel определяет отношение между текущим документом и связанным. Возможные значения атрибута:
- alternate - ссылка на альтернативную версию документа (страница для печати, страница на другом языке и тд.).
- author - ссылка на автора документа.
- bookmark - постоянный URL-адрес, используемый для закладок.
- help - ссылка на документ-справку.
- license - ссылки на сведения об авторских правах для документа.
- next - следующий документ в выделенной области.
- nofollow - ссылка на неиндексируемый документ («nofollow» используется в Google, чтобы указать, что поисковый бот не должен переходить по этой ссылке).
- noreferrer - указание браузеру не посылать HTTP-заголовок если пользователь перешел по ссылке.
- prefetch - указывает, что следует кэшировать целевой документ.
- prev - предыдущий документ в выделенной области.
- search - ссылка на поиск для документа.
- tag - тег (ключевое слово) для текущего документа.
Атрибут rel используется только совместно с атрибутом href. Пример » shape: Атрибут shape указывает форму области. Он используется совместно с атрибутом coords для указания размера, формы и размещения активной области. Возможные значения атрибута:
- default - определяет весь регион.
- rect - определяет прямоугольную область.
- circle - определяет круглую область.
- poly - определяет многоугольную область.
target: Атрибут target определяет, где будет открыт документ, при переходе по ссылке. Используется только вместе с атрибутом href. Возможные значения атрибута:
- _blank - открывает документ в новом окне или вкладке.
- _parent - открывает документ в родительском фрейме.
- _self - открывает документ в той же директории, где располагается ссылка (значение по умолчанию).
- _top - открывает документ во всю ширину окна.
- имя_фрейма - открывает документ в iframe, имя которого было указано в качестве значения.
Пример » type: Атрибут type указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) документа, на который ведет ссылка. Используется только совместно с атрибутом href. Пример »
Примечание: атрибут usemap в теге <img> связан с атрибутом name элемента <map>, и создает связь между картинкой и картой.
Стиль по умолчанию
Пример
Результат данного примера в окне браузера:

|