Area тег – HTML тег area | назначение, синтаксис, атрибуты, примеры

Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+2.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Каждый элемент <area> определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Тег <area> задает форму области, ее размеры, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ. Этот тег всегда располагается в контейнере <map>, который связывает координаты областей с изображением.

Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.

Синтаксис

HTML
<map>
  <area href="URL">
</map>
XHTML
<map>
  <area href="URL" />
</map>

Атрибуты

accesskey
Переход к области с помощью комбинации клавиш.
alt
Альтернативный текст для области изображения.
coords
Координаты активной области.
href
Задает адрес документа, на который следует перейти.
hreflang
Указывает язык документа, на который ведет ссылка.
nohref
Область без ссылки на другой документ.
shape
Форма области.
tabindex
Задает последовательность перехода между элементами с помощью клавиши Tab.
target
Имя окна или фрейма, куда браузер будет загружать документ.
type
Устанавливает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA</title>
  <style type="text/css">
   #title {
    line-height: 0; /* Изменяем межстрочное расстояние */
   }
   #title img {
    border: none; /* Убираем рамку вокруг изображения */
   }
  </style>
 </head>
 <body> 
 <div><img src="images/ecctitle.png" 
                alt="Детский образовательный центр"><br>
  <img src="images/navigate.png" 
                alt="Навигация по сайту" usemap="#Navigation"></div>
  <p><map name="Navigation">
  <area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Информация">
  <area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.html" alt="Мероприятия">
  <area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.html" alt="Отделения">
  <area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.html" alt="Техническая информация">
  <area shape="poly" coords="449,24,501,24,525,0,473,0" href="study.html" alt="Обучение">
  <area shape="poly" coords="501,24,560,24,583,0,525,0" href="work.html" alt="Работа">
  <area shape="poly" coords="560,24,615,24,639,0,585,0" href="misk.html" alt="Разное">
  </map></p>
 </body>
</html>

Тег | HTML справочник

HTML теги

Значение и применение

Тег <area> определяет интерактивную область в изображении-карте (элемент <map>), т.е. при клике на определённую область изображения происходят определённые действия, например, открывается отдельная страница с описанием данного участка изображения.

Поддержка браузерами

Атрибуты

Атрибутами тега <area> мы указываем как координаты области (атрибут coords), так и тип необходимой нам фигуры (атрибут shape):

Значение атрибутаОпределение
defaultВесь регион.
rectПрямоугольная область (x1,y1,x2,y2).
circleКруглая область (x,y,r- радиус).
polyМногоугольную область (x1,y1,x2,y2,…,xn,yn).

Создание активной области с использованием системы координат.

Пример использования

Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):

<!DOCTYPE html>
<html>
<head>
<title>Пример использование тега <map></title>
</head>
	<body>
		<p>Выбери фигуру:</p>
		<img src = "map.png" usemap = "#figuri" alt = "Доступны 4 фигуры для выбора" >
		<map name = "figuri" >
			<area shape = "rect" coords = "25,25,125,125" href = "red.html" alt = "Красный квадрат" >
			<area shape = "circle" coords = "200,75,50" href = "green.html" alt = "Зелёный круг." >
			<area shape = "poly" coords = "325,25,262,125,388,125" href = "blue.html" alt = "Голубой треугольник" >
			<area shape = "poly" coords = "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"  href = "yellow.html" alt = "Желтая звезда" >
		</map>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:

  • Разместили изображение (тег <img>), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе <map> (необходимо обязательно перед именем указать решетку).
  • Размещаем изображение-карту (тег <map>), задаем единственный и обязательный атрибут элемента name (имя). Обратите внимание, что в отличие от тега <img> мы задаем имя без решетки, в остальном они должны совпадать.
  • Размещаем четыре тега <area>, которые определяют интерактивные области в изображении-карте:
    • Первой мы задаем прямоугольную область (атрибут shape со значением «rect» ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
    • Второй указываем круглую область (атрибут shape со значением «circle» ), она соответствует нашему
      второму
      изображению (первое значение соответствует координатам по оси x, а второе по оси y, третее определяет радиус).
    • Что касается третей и четвертой фигуры, то они составлены по принципу многоугольной области (атрибут shape со значением «poly» ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).

Обращаю Ваше внимание на то, что если у тега <area> используется атрибут href, который определяет гиперссылку на площади, то необходимо обязательно указывать атрибут alt (альтернативный текст для области).

В HTML5, если у элемента <map> указан глобальный атрибут id, то он должен иметь то же значение, что и атрибут name.


Результат нашего примера в браузере (кликабельно) и на изображении:

Пример построения изображения-карты в HTML.

Отличия HTML 4.01 от HTML 5

В HTML5, добавлено 5 новых атрибутов, атрибут nohref был удалён.

Значение CSS по умолчанию

area {
display: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

Тег | HTML справочник

Поддержка браузерами

Описание

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>, и создает связь между картинкой и картой.

Тег <area> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию


area {
    display: none;
} 

Пример


<img src="image.png" alt="numbers" usemap="#num1">
<map name="num1">
  <area shape="rect" coords="3,2,55,47" href="#" alt="kubik1">
</map>
<p>Ссылка расположена на кубике 1, наведите курсор, чтобы убедиться</p>

Результат данного примера в окне браузера:

Пример использования тега <area>


Изображение-карта, с кликабельными областями:

Пример


usemap=»#planetmap»>

<map name=»planetmap»>
 <area shape=»rect» coords=»0,0,82,126″ href=»sun.htm» alt=»Солнце»>
 <area shape=»circle» coords=»90,58,3″ href=»mercur.htm» alt=» Меркурий»>
 <area shape=»circle» coords=»124,58,8″ href=»venus.htm» alt=»Венера»>
</map>

Попробуйте сами »

Определение и использование

Тег <area> определяет область внутри изображения-карты (изображение-карта — это изображение с интерактивными областями).

Тег <area> всегда является вложенным в тег <map>.

Совет: Использовать карты в теге <img> связывать с элементом <map> атрибутом name, создает связь между изображением и картой.


Поддержка браузеров

Элемент
<area>ДаДаДаДаДа

Различий между HTML 4.01 и HTML5

HTML5 имеет новые атрибуты, а некоторые атрибуты HTML 4.01 больше не поддерживаются.


Различия между HTML и XHTML

В HTML тег <area> не имеет закрывающего тега.

В XHTML тег <area> должен быть закрыт.


Атрибуты

= Новое в HTML5.

АтрибутЗначениеОписание
alttextЗадает альтернативный текст для области. Требуется, если присутствует атрибут href
coordscoordinatesЗадает координаты области
downloadfilenameУказывает, что целевой объект будет загружен, когда пользователь нажимает на гиперссылку
hrefURLЗадает ссылку на область
hreflanglanguage_codeЗадает язык целевого URL-адреса
mediamedia queryУказывает, что медиа/устройства целевого URL, оптимизированные для
nohrefvalueНе поддерживается в HTML5.
Указывает, что область не имеет связанной ссылки
relalternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Задает связь между текущим документом и целевым URL
shape default
rect
circle
poly
Задает форму области
target_blank
_parent
_self
_top
framename
Указывает, где открывать целевой URL
typemedia_typeЗадает тип носителя целевого URL

Глобальный атрибуты

Тег <area> также поддерживает Глобальный атрибуты в HTML.


Атрибуты событий

Тег <area> также поддерживает Атрибуты событий в HTML.


Связанные страницы

Справочник HTML DOM: Объект area


Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент <area> со следующими значениями по умолчанию:

area {
    display: none;
}


HTML тег area

Тег <area> определяет активные области в карте-изображении.

Тег <area> всегда должен располагаться внутри тега map.

Разница между HTML 4.01 и HTML5

В HTML5 появились новые атрибуты, а некоторые атрибуты HTML 4.01 больше не поддерживаются.

Различия между HTML и XHTML

В HTML тег <area> — одиночный элемент без закрывающего тега. В XHTML тег <area> должен закрываться должным образом, а именно — <area />.

Атрибуты тега <area>

Атрибут Описание
alt Определяет альтернативный текст, если элемент не удается отобразить
coords Определяет координаты ссылки в карте изображений
download Определяет, что документ, на который указывает ссылка, будет загружаться
href Определяет URL, на которую ведет ссылка активной области изображения
hreflang Определяет язык документа, на который указывает ссылка активной области изображения
media Определяет устройство вывода, для которого оптимизирован документ, на который ведет ссылка области карты-изображения
nohref Определяет, что у ссылочного региона нет ассоциированной с ним ссылки
rel Определяет отношение с документом, на который ведет участок-ссылка карты-изображения
shape Определяет форму ссылки в карте изображений
target Определяет, где открывать документ, на который ведет участок-ссылка карты-изображения
type Определяет медиа-тип документа, на который указывает участок-ссылка карты-изображения

Общие атрибуты

Тег <area> поддерживает общие атрибуты и атрибуты-события.

HTML пример

Карта-изображение с участками-ссылками:


<img src='planets.gif' alt="Planets" usemap="#planetmap">

<map name="planetmap">
   <area shape="rect" coords="0,0,82,126" href='sun.htm' alt="Sun">
   <area shape="circle" coords="90,58,3" href='mercur.htm' alt="Mercury">
   <area shape="circle" coords="124,58,8" href='venus.htm' alt="Venus">
</map>

CSS стили по умолчанию

Большинство браузеров будут отображать тег <area> со следующими стилями


area { 
    display: none;
}

Тег // Вебшкола онлайн



Пример

<img src =»planets.gif» alt=»Planets» usemap =»#planetmap» />
<map name=»planetmap»>
<area shape=»rect» coords=»0,0,82,126″ href=»sun.htm» alt=»Sun» />
<area shape=»circle» coords=»90,58,3″ href=»mercur.htm» alt=»Mercury» />
<area shape=»circle» coords=»124,58,8″ href=»venus.htm» alt=»Venus» />
</map>

Описание и использование

Тег <area> используется для создания области в карте-изображении (карта-изображение — это изображение с кликабельными областями (области, на которых можно кликнуть мышью)).

Элемент <area> всегда вложен в тег <map>.

Совет: атрибут usemap тега <img> ассоциируется с атрибутом name элемента <map> и создает связь между изображением и и картой изображения.


Браузерная поддержка


Тег <area> поддерживается всеми основными браузерами.


Отличия между HTML и XHTML

В HTML тег <area> не имеет закрывающего тега.

В XHTML тег <area> обязательно должен быть закрыт.


Обязательные атрибуты

DTD показывает в какой версии DTD использование атрибута разрешено. S=Strict, T=Transitional и F=Frameset.

Атрибут Значение Описание DTD
alt текст Указывает альтернативный текст кликабельной области STF

Альтернативные атрибуты

Атрибут Значение Описание DTD
coords координаты Указывает координаты кликабельной области STF
href URL Указывает пункт назначения (адрес) ссылки STF
nohref nohref Указывает на то, что к области не привязаны ссылки STF
shape default
rect
circle
poly
Указывает тип области ссылки (по умолчанию, прямоугольник, круг, многоугольник) STF
target _blank
_parent
_self
_top
framename
Указывает на окно, в котором будет открыта ссылка TF

Стандартные атрибуты

Тег <area> поддерживает следующие стандартные атрибуты:

Атрибут Значение Описание DTD
accesskey символ (клавиша) Определяет клавишу (сочетание клавиш) для быстрого доступа к элементу STF
class название класса Указывает название класса для элемента STF
dir rtl
ltr
Указывает направление вывода текста для элемента STF
id id Указывает id для элемента STF
lang код_языка Указывает код языка содержимого элемента STF
style описание_элемента Указывает строчный стиль элемента STF
tabindex порядковый номер Указывает порядковый номер элемента при переключении с помощью клавиши Tab STF
title текст Указывает дополнительную информацию об элементе STF
xml:lang код_языка Указывает код языка содержимого элемента в XHTML документах STF

Дополнительная информация о стандартных атрибутах.


События

Тег <area> поддерживает следующие атрибуты событий:

Атрибут Значение Описание DTD
onblur скрипт Скрипт, который должен быть выполнен, когда элемент теряет фокус (т.е. курсор мыши уходит с элемента) STF
onclick скрипт Скрипт, который должен быть выполнен при одинарном щелчке мышью STF
ondblclick скрипт Скрипт, который должен быть выполнен при двойном щелчке мышью STF
onfocus скрипт Скрипт, который должен быть выполнен, когда элемент попадает в фокус (т.е. курсор мыши попадает на элемент) STF
onmousedown скрипт Скрипт, который должен быть выполнен, если пользователь зажал кнопку мыши STF
onmousemove скрипт Скрипт, который должен быть выполнен при движении курсора мыши STF
onmouseout скрипт Скрипт, который должен быть выполнен, если пользователь передвинул курсор мыши за пределы элемента STF
onmouseover скрипт Скрипт, который должен быть выполнен, когда пользователь двигает курсор мыши над элементом STF
onmouseup скрипт Скрипт, который должен быть выполнен, когда пользователь отпускает кнопку мыши STF
onkeydown скрипт Скрипт, который должен быть выполнен при нажатии клавиши пользователем STF
onkeypress скрипт Скрипт, который должен быть выполнен при нажатии и отпускании клавиши пользователем STF
onkeyup скрипт Скрипт, который должен быть выполнен при отпускании клавиши пользователем STF

Дополнительная информация о cобытиях HTML.

Тег AREA

Этот одинарный тег <area> служит для создания ссылок на определенных областях изображения. Часто используется несколько таких тегов <area> для создание изображения-карты. Обязательное условие — расположение внутри контейнера <map>

Запись тега area

<map> <area href=URL> </map>

Параметры тега area

alt — альтернативный текст для области изображения.

coords — указывает координаты активной области.

href — указывает адрес, куда следует перейти.

nohref — область без ссылки на другой документ.

shape — форма области.

target — имя окна или фрейма, куда браузер будет загружать документ.

Пример — использование тега AREA

<html>
 <head>
  <title>Тег AEA</title>
 </head>
 <body>
  <map name=Navigation>
   <area shape=rect coords=113,0,211,24 href=/about>
   <area shape=rect coords=210,0,233,24 href=/product>
   <area shape=rect coords=304,0,385,24 href=/contacts>
  </map>
  <img height=30 width=400 border=0 alt="Навигация по сайту" 
   src=/images/menu.gif usemap=#Navigation>
 </body>
</html>

Описание параметра coords

Этот параметр необходим для создания активной области на изображении (такую область еще называют «горячей» областью). Вершины области задаются координатами X (по горизонтали) и Y (по вертикали) от верхнего левого угла изображения.

Запись параметра coords

<area coords="координата1","координата2","координата3",...>

Описание параметра shape

Этот параметр указывает в каком виде задается активная область изображения.

circle — активная область задается в виде окружности. Для такого задания области используется только три значения X, Y, R. Где X — координата по горизонтали, Y — координата по вертикали, R — радиус.

Пример 

<area sape=circle coords="10,20,50" href="/url">

Параметр shape=circle тега Area

poly — задается в виде многоугольника. Каждая вершина задается двумя координатами X, Y. В этом случае вершин должно быть минимум 3

Пример

<area sape=circle coords="10,20,30,40,50,60" href="/url">

 Параметр shape=poly тега Area

rect — задается в виде прямоугольника. Для задания вершин прямоугольника нужно указать всего две вершины — X1,Y1,X2,Y2

Пример

 <area sape=circle coords="10,10,30,50" href="/url" >

Параметр shape=rect тега Area

 Описание параметра nohref

Параметр nohref указывает что активная область не является ссылкой. В этом случае параметр href не указывают

<area nohref>

НазадСписок теговДалее

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *