Главная / Верстка / Теги html / area тег html

area тег html


12.07.2013 16:493147

Описание

Тег area в html определяет невидимую область внутри изображения карты (изображение-карта с активной областью) и всегда является вложенным в тег <map>.Для связки карты с изображением применяется атрибут usemap в теге <img>. 

 

Представьте себе изображение на котором присутствует несколько различных фигур , и вы хотите чтобы каждая из них была частью меню навигации , отдельной ссылкой на html-документ , либо симпатичной кнопочкой для вызова функций js-сценариев.

 

Именно такие задачи и выполняет связка map+area , создавая пространство из невидимых областей являющихся ссылками. Это помогает сократить объем используемой графики на сайте , что сказывается положительно на скорости загрузки страниц. 



Помимо этого при помощи тега area можно создавать не просто активные ссылки , а именно различной формы ссылки. Без проблем можно выделить хоть треугольник хоть ромб , круг , и тд.

 

И здесь очень важен тот момент , что ссылка будет активна именно в этой области , потому что если сделать ссылкой обычное изображение , допустим круг на прозрачном фоне , то этот самый фон тоже будет активной ссылкой а значит все изображение , и строго прямоугольной формы. А у тега area для этого есть свой атрибут , который задает форму. Это атрибут shape. Для позиционирования и обозначения координат , есть атрибут coords.

 

Атрибуты

АТРИБУТ ЗНАЧЕНИЕ ОПИСАНИЕ
alt text альтернативный текст для активной области изображения
coords coordinates координаты для активной области
download filename указывает что при клике документ должен скачиваться
href url адрес документа, на который будет переход в случае нажатия
hreflang language_code язык документа
media media query определяет устройства под которые оптимизирован документ
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
определяет связь между текущим и целевым документом
shape default
rect
circle
poly
определяет форму области
target _blank
_parent
_self
_top
framename
определяет где открывать документ
type media_type тип целевого урл

 

Пример

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Тег area</title>
</head>

<body>
<div class="mymap">
<img src="map.gif" alt="Активное изображение" usemap="#my_map" />
</div>
<map id="my_map" name="my_map">
<area title="Это окружность . Нажимай скорей !" onclick="alert('Окружность')" shape="circle" coords="63,67,55"
href="#" alt="Это окружность" />
<area title="Это квадрат . Нажимай скорей !" onclick="alert('Квадрат')" shape="rect" coords="215,133,274,190"
href="#" alt="Это квадрат" />
<area title="Это ромб . Нажимай скорей !" onclick="alert('Ромб')" shape="poly" coords="246,14,290,58,244,106,198,60"
href="#" alt="Это ромб" />
<area onclick="alert('Правый треугольник')" title="Это правая часть треугольника . Нажимай скорей !"
shape="poly" coords="59,215,119,300,59,300" href="#" alt="Это правая часть треугольника" />
<area onclick="alert('Левый треугольник')" title="Это левая часть треугольника . Нажимай скорей !" shape="poly"
coords="60,215,0,300,58,300" href="#" alt="Это левая часть треугольника" />
<area title="Это свободная область . Нажимай скорей !" shape="default" href="#" onclick="alert('Это свободная область изображения , на которой можно разместить еще фигуры , либо сделать открытие какой-нибудь страницы по клику , или же как вы видите в данном случае , вывод на экран сообщения по клику .')"
alt="Это свободная область" />
</map>
</body>

</html>


   Ниже можно посмотреть как это работает в интерактивном редакторе , а также можно ознакомиться с более глубоким изучением связки map+area+img в уроке, где более подробно все описано , рассказано , подкреплено html-примерами , демонстрацией и возможностью скачать исходники урока !

 


Синтаксис html и наличие закрывающего тега

Синтаксис Закрывающий тег
<map><area></map> не требуется

Браузеры поддерживающие <area>

Element
<area> Yes Yes Yes Yes Yes


Area , Html , Тег , Тег Area





«area тег html» - Похожие страницы

Нет записей


Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям