Тег <area> | Справочник HTML
http://belarusweb.net
Основы создания сайтов

Тег <area>

Описание

Тег <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-типов можно на сайте Мозилы здесь или на Википедии здесь.
  • Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Примеры

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
	Это изображение &ndash; клиентская графическая карта. <br>
	
	<!--  Привязываем к изображению карту map_3 (не забываем про знак решетки)  -->
	<img src="images/html_images/example_4_5a.png" alt="map_3" usemap="#map_3">
	
	<map name="map_3">
		<!--  Указываем активные области карты  -->
		<area href="page_1.html" shape="circle" coords="70,75,50">
		
		<!--  Эта ссылка откроется в новом окне  -->
		<area href="page_2.html" target="_blank" shape="poly" 
		coords="130,125, 150,125, 140,25, 130,125">
		
		<area href="page_3.html" shape="rect" coords="170,125, 240,25">
	</map>
	
	<p>
		Кликните по нужной фигуре, чтобы перейти <br>
		на страницу ее описания.
	</p>
</body>
</html>

Пример №1

Пример карты-изображения можно также посмотреть на странице нашего учебного сайта №1: здесь.