www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту
Главная страница > Теги ШТМЛ > Тег AREA
Теги ШТМЛ
Все теги
!DOCTYPE
A
ABBR
ACRONYM
ADDRESS
AREA
B
BASE
BASEFONT
BDO
BGSOUND
BIG
BLOCKQUOTE
BODY
BR
BUTTON
CAPTION
CENTER
CITE
CODE
COL
COLGROUP
DD
DEL
DFN
DIV
DL
DT
EM
EMBED
FIELDSET
FONT
FORM
FRAME
FRAMESET
H1...H6
HEAD
HR
ШТМЛ
I
IFRAME
IMG
INPUT
INS
KBD
LABEL
LEGEND
LI
LINK
MAP
MARQUEE
META
NOBR
NOEMBED
NOFRAMES
NOSCRIPT
OBJECT
OL
OPTGROUP
OPTION
P
PARAM
PRE
Q
SAMP
SCRIPT
SELECT
SMALL
SPAN
STRIKE
STRONG
STYLE
SUB
SUP
TABLE
TBODY
TD
TEXTAREA
TFOOT
TH
THEAD
TITLE
TR
TT
UL
VAR
WBR
XMP
Теги по типам
файл
Звук
Имаги
Объекты
Скрипты
Списки
Ссылки
Таблица
контент
Форматирование
Формы
Фреймы

Тег AREA

Браузер Internet ExplorerInternet Explorer NetscapeNetтscape OperaОпера SafariSafari Файер фохMozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да
ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

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

Параметры

alt
Альтернативный контент для области Имаги.
coords
Координаты активной области.
href
Задает адрес объекта, на который следует перейти.
nohref
Область без ссылки на другой файл.
shape
Форма области.
target
Имя окна или фрейма, куда браузер будет загружать файл.

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

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

Пример 1. Использование тега <AREA>

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег AREA</title>
  <style type="text/CSS (ЦСС)">
   DIV#title {
    line-height: 0; /* Изменяем межстрочное расстояние */
   }
   DIV#title IMG {
    border: none; /* Убираем рамку вокруг Имаги */
   }
  </style>
 </head>
 <body> 
 <div id="title"><img src="images/ecctitle.png" width="640" height="158" alt="Детский образовательный центр"><br>
  <img src="images/navigate.png" width="640" height="30" alt="Навигация по сайту" usemap="#Navigation"></div>
  <p><map name="Navigation">
  <area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.ШТМЛ" alt="Информация">
  <area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.ШТМЛ" alt="Мероприятия">
  <area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.ШТМЛ" alt="Отделения">
  <area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.ШТМЛ" alt="Техническая информация">
  <area shape="poly" coords="449,24,501,24,525,0,473,0" href="study.ШТМЛ" alt="Обучение">
  <area shape="poly" coords="501,24,560,24,583,0,525,0" href="work.ШТМЛ" alt="Работа">
  <area shape="poly" coords="560,24,615,24,639,0,585,0" href="misk.ШТМЛ" alt="Разное">
  </map></p>
 </body>
</html>

Описание параметров тега <AREA>

Параметр ALT

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Параметр alt устанавливает альтернативный контент для области Имаги. Такой контент отображается в виде всплывающей подсказки при наведении курсора мыши на область. Не все браузеры поддерживают параметр alt.

Синтаксис

<area alt="контент">

Обязательный параметр

Да.

Аргументы

Любая подходящяя контентовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

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

Нет.

Пример 2. Добавление альтернативного контента

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег AREA, параметр alt</title>
</head>
<body>
 <p><img src="/ШТМЛ/example/images/europe.png" alt="Европа" width="422" 
   height="387" border="0" usemap="#Map">
<map name="Map">
 <area shape="poly" coords="34,83,42,90,52,87,64,85,71,81,79,87,84,95,
  75,110,61,120,42,116,37,110,25,94,32,82" href="is.ШТМЛ" alt="Исландия">
 <area shape="poly" coords="168,262,173,254,180,254,207,272,201,290,206,309,
  197,318,182,316,182,323,165,320,152,317,154,292,138,276,168,263" href="fr.ШТМЛ" alt="Франция">
 <area shape="poly" coords="250,223,264,217,274,222,295,221,298,235,301,257,
  290,269,274,268,247,254,243,241,243,241" href="pl.ШТМЛ" alt="Польша">
</map></p>
</body>
</html>

Параметр COORDS

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Устанавливает координаты области, она также имеется ввиду «горячая область». Такая область может быть ссылкой на файл или связана с действием, определяемым скриптом.

Значения координат представляют собой набор чисел, разделенных запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде ШТМЛ выше.

Синтаксис

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

Обязательный параметр

Нет.

Аргументы

Набор координат определяется формой «горячей области», которая задается параметром shape. Отсчет координат обычно ведется от левого верхнего угла Имаги и указывается в пикселах.

Для прямоугольника (shape="rect") определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.

Рис. 1

Рис. 1. Координаты для прямоугольника

Для окружности (shape="circle") определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.

Рис. 2

Рис. 2. Координаты для окружности

Для полигона (многоугольника) (shape="poly") последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рис. 3.

Рис. 3. Координаты для полигона

Рис. 3. Координаты для полигона

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

Нет.

Пример 3. Координаты «горячей области»

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег AREA, параметр coords</title>
 </head>
 <body>
  <p><map name="worm">
   <area coords="321, 245, 100" shape="circle" href="../wormik/knob.ШТМЛ" alt="Координаты для червяка">
  </map></p>
  <p><img src="/images/bigworm.gif" usemap="#worm" width="623" height="511" alt="Червяк"></p>
 </body>
</html>

Параметр HREF

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Задает адрес объекта, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться файл любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый файл загружается в текущее окно браузера, однако это свойство можно изменить с помощью параметра target.

Синтаксис

<area href="URL">

Обязательный параметр

Да.

Аргументы

В качестве значения принимается полный или относительный путь к файлу, а также указатель на функцию JavaScript.

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

Нет.

Пример 4. Создание ссылки

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег AREA, параметр href</title>
 </head>
 <body>
  <p><map name="worm">
  <area coords="321, 245, 100" shape="circle" href="../wormik/knob.ШТМЛ" alt="Координаты для червяка">
  </map></p>
  <p><img src="/images/bigworm.gif" usemap="#worm" width="623" height="511" alt="Червяк"></p>
 </body>
</html>

Параметр NOHREF

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Этот параметр сообщает браузеру, что «горячая область» не является ссылкой. При этом параметр href не должен включаться.

Синтаксис

<area nohref>

Аргументы

Нет.

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

По умолчанию параметр nohref не установлен.

Пример 5. Использование параметра nohref

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег AREA, параметр nohref</title>
 </head>
 <body>
  <p><map name="nortland">
   <area coords="21, 24, 121, 124" shape="rect" nohref alt="Вход на сайт">
  </map></p> 
  <p><img src="/images/piter.gif" usemap="#nortland" width="200" height="200" alt="Питер Нортон"></p>
 </body>
</html>

Параметр SHAPE

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Определяет форму «горячей области», координаты которой задаются с помощью параметра coords.

Синтаксис

<area shape="circle | poly | rect">

Аргументы

circle
Область в виде окружности.
poly
Область в виде полигона (многоугольника).
rect
Прямоугольная область.

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

rect

Параметр TARGET

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

По умолчанию, при переходе по ссылке файл открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено параметром target тега <AREA>.

Синтаксис

<area target="имя окна">

Аргументы

В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent

Загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.

_top

Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

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

_self

Пример 6. Открытие ссылки в новом окне

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег AREA, параметр target</title>
 </head>
 <body>
  <p><map name="nortland">
  <area coords="21, 24, 121, 124" shape="rect" href="/sch/images/new.ШТМЛ" 
  target="_blank" alt="Откроется в новом окне">
  </map></p> 
  <p><img src="/images/piter.gif" usemap="#nortland" width="200" 
  height="200" alt="Питер Нортон"></p>
 </body>
</html>

Обратите внимание, что в данном примере используется переходный <!DOCTYPE>. При использовании строгого <!DOCTYPE> пример не пройдет валидацию.

Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект