Набор авторов в комманду!!!




Пожертвовать на развитие сайта. Пожертвовать

Элемент area в html 5

Главная » Справочники » Справочник HTML5 » Элемент area в html 5
Элемент area в HTML5 применяется внутри контейнера map для создания карты-изображения.
applet
area

Отображение элемента area в HTML 5

Правильное отображение в chrome Отображение в вашем браузере
Подведите указатель к окружности

Описание элемента area в HTML5

Элемент area создает карту-изображние. Или просто определяет на изображении активные области, которые являются ссылками. Элемент area всегда расположен внутри элемента map, который связывает изображение с его активными зонами. По сути map является контейнером для area. Зоны могу перекрывать друг друга, но сверху будет расположенная выше в коде.

Отличие элемента area HTML4.1 от HTML5

Элемент area больше не поддерживает атрибут nohref.

Атрибуты элемента area в HTML5

Атрибут Описание
alt

Атрибут alt назначает альтернативный текст для области. Который отображается всплывающей подсказкой. Аналогично примененному к элементу img.

Пример кода: 
<area shape="circle" coords="73,75, 43" alt="Нажмите">
coords

Атрибут coords определяет значения координат активной области. Количество координат зависит от формы области, которая определяется элементом shape. Отсчитываются в пикселях с левого верхнего угла изображения.

Если форма области - прямоугольник (shape="rect"), тогда определяются четыре координаты x1, y1, x2, y2.

Пример кода: 
<img src="/public/html5/area-rect_example.png" usemap="#rect_example">
<map name="rect_example">
	<area shape="rect" coords="50,100, 250,200"
		alt="Нажмите" href="http://ramech.net" target="_blank">
</map>
Отображение в Вашем браузере

Если форма области - окружность (shape="circle"), тогда определяются три координаты - координаты центра x, y и радиус r.

Пример кода: 
<img src="/public/html5/area-circle_example.png" usemap="#circle_example">
<map name="circle_example">
	<area shape="circle" coords="150,150, 100"
		title="Нажмите" href="http://ramech.net" target="_blank">
</map>
Отображение в Вашем браузере

Если форма области - многоугольник (shape="poly"), тогда последовательно определяется каждая его координата. Можно по часовой стрелке или же против, но важно что бы первая точка совпадала с последней, таким образом будет замкнута форма. В итоге мы получим в коде на одну точку больше, т.к. первая точка дублируется в конце.

Пример кода: 
<img src="/public/html5/area-poly_example.png" usemap="#poly_example">
<map name="poly_example">
	<area shape="poly" coords="50,100,100,200,250,150,50,100"
		title="Нажмите" href="http://ramech.net" target="_blank">
</map>
Отображение в Вашем браузере
href

Атрибут href определяет адрес документа для перехода.

Пример кода: 
<area shape="circle" coords="150,150, 100" href="http://ramech.net">
hreflang

Атрибут hreflang указывает язык целевого документа.

Пример кода: 
<area shape="circle" coords="150,150, 100" href="http://ramech.net" hreflang="ru">
nohref

Атрибут nohref указывает что активная область не будет ссылкой. Полезен когда требуется сделать неактивную область внутри активной. В HTML5 не используется.

Пример кода: 
<img src="/public/html5/area-circle_example.png" usemap="#circle_nohref">
<map name="circle_nohref">
	<area shape="circle" coords="150,150,50" nohref title="Неактивная область">
	<area shape="circle" coords="150,150,100"
		title="Нажмите" href="http://ramech.net" target="_blank">
</map>
Отображение в Вашем браузере
shape

Атрибут shape определяет форму области, координаты которой указываются через атрибут coords.

Значение:Пояснение:
circleокружность.
polyмногоугольник.
rectпрямоугольник.
defaultуказывает все изображение целиком.
Пример кода: 
<area shape="circle">
<area shape="poly">
<area shape="rect">
<area shape="default">
tabindex

Атрибут tabindex назначает последовательность переходов при нажатии на клавишу Tab. Значением может быть любое положительное число начиная с нуля.

Пример кода: 
<area tabindex="2">
target

Атрибут target определяет где браузер будет открывать документ по ссылке. По-умолчанию он делает это в том же окне, но применив значения можно открывать, например, в новой вкладке.

Значение:Пояснение:
_blankОткрывает страницу в новой вкладке или окне.
_selfОткрывает страницу в той же вкладке.
_parentОткрывает страницу во фрейме-родителе, если фреймов нет, то работает как _self.
_topОтменяет фреймы и загружает страницу в полном окне. Если фреймов нет, то работает как _self.
framenameОткрывает во фрейме с именем заданным через атрибут name.
Пример кода: 
<area href="http://ramech.net" target="_blank">
type

Атрибут type устанавливает MIME-тип документа, на который ведет ссылка.

Пример кода: 
<area type="audio/mpeg3" href="адрес документа.mp3">

Примеры использования элемента area в HTML5

Пример определения элемента area

<img src="/public/html5/area-primer.jpg" usemap="#primer">
<map name="primer">
	<area shape="rect" coords="448,11,571,119" href="/public/html5/primer_lemon.jpg" title="Лимон" >
	<area shape="circle" coords="323,64, 57" href="/public/html5/primer_orange.jpg" title="Апельсин" >
	<area shape="poly" coords="57,53,106,7,161,13,164,44,199,44,217,69,213,98,201,122,112,121,55,125,31,103,30,66,57,53" href="/public/html5/primer_pomegranate.jpg" title="Гранат" >
</map>

Результат отображения элемента area в вашем браузере:

applet