Тег area определяет активные области на изображении, которые являются ссылками, эти области могут отличаться формой и размером. Картинка (изображение) с активными областями, называется картой-изображением. Такая картинка ничем не отличается от обычной, за исключением того, что содержит активные области (ссылки). Области могут перекрывать друг друга, сверху окажется та, которая в коде располагается первее (выше).
Элемент area используется только совместно с тегом в качестве его дочернего элемента.
Атрибуты
- 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 в теге связан с атрибутом name элемента map, и создает связь между картинкой и картой.
Тег area так же поддерживает и
Пример
img src="image.png" width="104" height="96" alt="numbers" usemap="#num1"
map name="num1"
area shape="rect" coords="3,2,55,47" href="#" alt="kubik1"
/map
pСсылка расположена на кубике 1, наведите курсор, чтобы убедиться/p
|