HTML :: Тег <area>
В HTML тег <area> (от англ. area – область, регион) служит для определения активной области на изображении, при необходимости связывая ее с гипертекстовой ссылкой. Этот тег используется только внутри элемента <map>. При чем таких <area> внутри <map> может быть столько, сколько потребуется активных зон на изображении, которое называют картой-изображением. Каждый элемент <area> задает форму и размеры своей активной области, а также устанавливает адрес документа, на который будет вести гипертекстовая ссылка, связанная с ней. При этом активные области могут пересекаться, тогда в районе пересечения будет активной та область, которая идет в исходном коде выше.
Синтаксис
<map>
<area href="Адрес"> (закрывающий тег отсутствует)
</map>
Атрибуты
- alt – задает альтернативный текст для активной зоны изображения, который указывается в качестве его значения. И хотя альтернативный текст не отображается в браузере, поисковые роботы его видят и учитывают при анализе страницы.
- coords – задает координаты активной области в пикселях, которые отсчитываются от верхнего левого угла изображения, где считается, что x=0px и y=0px.
- href – задает путь, по которому будет совершен переход при клике по данной активной области. В качестве адреса ссылки могут использоваться как абсолютные, так и относительные адреса (подробнее здесь). При этом следует помнить, что целевой документ может быть любого типа, поэтому и результат перехода по ссылке также может быть разным. Например, если по указанному адресу окажется файл с расширением zip, то браузер попытается загрузить его на локальный диск.
- hreflang – сообщает язык документа страницы, на которую ведет гиперссылка, связанная с данной активной областью изображения. Ознакомиться с полным списком кодов языков можно на нашей странице здесь.
-
shape – определяет форму данной активной области изображения, принимая в качестве значений следующие
ключевые слова:
- "circle" – область в виде окружности; через запятую указываются координаты x и y центра окружности, а также ее радиус, например, coords="150, 200, 120";
- "default" – вся область изображения;
- "poly" (от англ. polygon – многоугольник) – область в виде произвольного многоугольника; через запятую указываются координаты x, y его вершин, начиная с любой и заканчивая обход в стартовой точке, например, coords="50,70, 64,82, 85,82, 130,60, 50,70";
- "rect" (от англ. rectangle – прямоугольник) – область в виде прямоугольника; через запятую указываются координаты x, y левого верхнего и правого нижнего углов, например, coords="50,70, 154,213".
-
target – сообщает имя целевого окна или фрейма, на которую ведет гиперссылка, связанная с данной активной
областью изображения. В качестве значений может принимать:
- _self – документ будет открываться в текущем окне или фрейме (используется по умолчанию);
- _blank – документ будет открываться в новом окне или фрейме;
- _parent – документ будет открываться в родительском фрейме, а в случае отсутствия такового, в текущем окне;
- _top – документ будет открываться в главном (текущем) окне, в котором находится данный фрейм, содержащий ссылку, а в случае отсутствия фреймов в окне, данное значение сработает, как _self;
- name – имя фрейма, в котором будет открываться документ; если указать несуществующее имя окна или фрейма, то браузер откроет документ в новом окне.
- type – сообщает mime-тип целевого документа, на который ведет гиперссылка, связанная с данной активной областью изображения. Ознакомиться с полным списком mime-типов можно на сайте Мозилы здесь или на Википедии здесь.
- Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/image-maps.html#the-area-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/area
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="https://site.name/"> <title>Пример №1</title> </head> <body> Это изображение – клиентская графическая карта. <br> Она ведет на три страницы с описаниями и обратными ссылками. <!-- Привязываем к изображению карту map_1 (не забываем про знак решетки) --> <img src="example_1.png" alt="map_1" usemap="#map_1" width="300px"> <map name="map_1"> <!-- Указываем активные области карты --> <area href="page_1.html" shape="rect" coords="25,44, 83,85"> <area href="page_2.html" shape="circle" coords="134,65,25"> <area href="page_3.html" shape="poly" coords="186,85, 215,38, 247,84, 186,85"> </map> <p> Кликните по нужной фигуре, чтобы перейти <br> на страницу ее описания. </p> </body> </html>
Пример №1
Пример карты-изображения можно также посмотреть на странице нашего учебного сайта №1 здесь.