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

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<base href="https://site.name/">
	<title>Пример №1</title>
</head>
<body>
	Это изображение &ndash; клиентская графическая карта. <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 здесь.