Браузер | Internet Explorer | Netтscape | Опера | Safari | 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>
Не требуется.
Пример 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>
ШТМЛ: | 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>
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Устанавливает координаты области, она также имеется ввиду «горячая область». Такая область может быть ссылкой на файл или связана с действием, определяемым скриптом.
Значения координат представляют собой набор чисел, разделенных запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде ШТМЛ выше.
<area coords="координата 1, координата 2, координата 3, ...">
Нет.
Набор координат определяется формой «горячей области», которая задается параметром shape. Отсчет координат обычно ведется от левого верхнего угла Имаги и указывается в пикселах.
Для прямоугольника (shape="rect") определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.
Рис. 1. Координаты для прямоугольника
Для окружности (shape="circle") определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.
Рис. 2. Координаты для окружности
Для полигона (многоугольника) (shape="poly") последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рис. 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>
ШТМЛ: | 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>
ШТМЛ: | 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>
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Определяет форму «горячей области», координаты которой задаются с помощью параметра coords.
<area shape="circle | poly | rect">
rect
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
По умолчанию, при переходе по ссылке файл открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено параметром target тега <AREA>.
<area target="имя окна">
В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.
Загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _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 проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект