Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

html:tags:area [21/04/2010 18:57] (текущий)
dnaumov создано
Строка 1: Строка 1:
 +===== Тег AREA =====
  
 +==== Описание ====
 +
 +Каждый элемент <​AREA>​ определяет активные области изображения,​ которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения,​ но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Тег <​AREA>​ задает форму области,​ ее координаты,​ устанавливает адрес документа,​ на который следует сделать ссылку,​ а также имя окна или фрейма,​ куда браузер будет загружать документ. Этот тег всегда располагается в контейнере [[map|<​MAP>​]],​ который связывает координаты областей с изображением.
 +
 +==== Синтаксис ====
 +<​file>​
 +<map>
 + <​area href="​URL">​
 +</​map>​
 +</​file>​
 +
 +==== Параметры ====
 +
 +|[[#​parametr_alt|alt]] |Альтернативный текст для области изображения. |
 +|[[#​parametr_coords|coords]] |Координаты активной области. ​ |
 +|[[#​parametr_href|href]] |Задает адрес документа,​ на который следует перейти. |
 +|[[#​parametr_nohref|nohref]] ​ |Область без ссылки на другой документ. ​ |
 +|[[#​parametr_shape|shape]] ​ |Форма области. ​ |
 +|[[#​parametr_target|target]] ​ |Имя окна или фрейма,​ куда браузер будет загружать документ. ​ |
 +
 +==== Закрывающий тег ====
 +
 +Не требуется.
 +
 +==== Пример ==== 
 +<code html|Использование тега AREA>
 +<​!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=windows-1251">​
 +  <​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.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>​
 +</​code>​
 +
 +===== Описание параметров тега <​AREA>​ =====
 +
 +==== Параметр ALT ====
 +
 +=== Описание ===
 +
 +Параметр alt устанавливает альтернативный текст для области изображения. Такой текст отображается в виде всплывающей подсказки при наведении курсора мыши на область. Не все браузеры поддерживают параметр alt.
 +
 +=== Синтаксис ===
 +<​file>​
 +<area alt="​текст">​
 +</​file>​
 +
 +=== Обязательный параметр ===
 +
 +Да.
 +
 +=== Аргументы ===
 +
 +Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
 +
 +=== Значение по умолчанию ===
 +
 +Нет.
 +
 +=== Пример ===
 +
 +<code html|Добавление альтернативного текста>​
 +<​!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="/​html/​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.html"​ 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.html"​ 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.html"​ alt="​Польша">​
 +</​map></​p>​
 +</​body>​
 +</​html>​
 +</​code>​
 +
 +==== Параметр COORDS ====
 +
 +=== Описание ===
 +
 +Устанавливает координаты области,​ она также называется «горячая область». Такая область может быть ссылкой на файл или связана с действием,​ определяемым скриптом.
 +
 +Значения координат представляют собой набор чисел, разделенных запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде HTML выше.
 +
 +=== Синтаксис ===
 +<​file>​
 +<area coords="​координата 1, координата 2, координата 3, ...">​
 +</​file>​
 +
 +=== Обязательный параметр ===
 +
 +Нет.
 +
 +=== Аргументы ===
 +
 +Набор координат определяется формой «горячей области»,​ которая задается параметром shape. Отсчет координат обычно ведется от левого верхнего угла изображения и указывается в пикселах.
 +
 +Для прямоугольника (shape="​rect"​) определяется четыре координаты — X1, Y1, X2, Y2, как показано на рисунке.
 +
 +{{:​html:​tags:​tag_area_rect.png|Координаты для прямоугольника}}
 +
 +Для окружности (shape="​circle"​) определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рисунке.
 +
 +{{:​html:​tags:​tag_area_circle.png|Координаты для окружности}}
 +
 +Для полигона (многоугольника) (shape="​poly"​) последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рисунке.
 +
 +{{:​html:​tags:​tag_area_poly.png|Координаты для полигона}}
 +
 +
 +=== Значение по умолчанию ===
 +
 +Нет.
 +
 +=== Пример ===
 +<code html|Координаты «горячей области»>​
 +<​!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.html"​ alt="​Координаты для червяка">​
 +  </​map></​p>​
 +  <​p><​img src="/​images/​bigworm.gif"​ usemap="#​worm"​ width="​623"​ height="​511"​ alt="​Червяк"></​p>​
 + </​body>​
 +</​html>​
 +</​code>​
 +
 +==== Параметр HREF ====
 +
 +=== Описание ===
 +
 +Задает адрес документа,​ на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера,​ однако это свойство можно изменить с помощью параметра target.
 +
 +=== Синтаксис ===
 +<​file>​
 +<area href="​URL">​
 +</​file>​
 +
 +=== Обязательный параметр ===
 +
 +Да.
 +
 +=== Аргументы ===
 +
 +В качестве значения принимается полный или относительный путь к файлу, а также указатель на функцию JavaScript.
 +
 +=== Значение по умолчанию ===
 +
 +Нет.
 +
 +=== Пример ===
 +<code html|Создание ссылки>​
 +<​!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.html"​ alt="​Координаты для червяка">​
 +  </​map></​p>​
 +  <​p><​img src="/​images/​bigworm.gif"​ usemap="#​worm"​ width="​623"​ height="​511"​ alt="​Червяк"></​p>​
 + </​body>​
 +</​html>​
 +</​code>​
 +
 +==== Параметр NOHREF ====
 +
 +=== Описание ===
 +
 +Этот параметр сообщает браузеру,​ что «горячая область» не является ссылкой. При этом параметр href не должен включаться.
 +
 +=== Синтаксис ===
 +<​file>​
 +<area nohref>
 +</​file>​
 +
 +=== Аргументы ===
 +
 +Нет.
 +
 +=== Значение по умолчанию ===
 +
 +По умолчанию параметр nohref не установлен.
 +
 +=== Пример ===
 +<code html|Использование параметра nohref>
 +<​!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>​
 +</​code>​
 +
 +==== Параметр SHAPE ====
 +
 +=== Описание ===
 +
 +Определяет форму «горячей области»,​ координаты которой задаются с помощью параметра coords.
 +
 +=== Синтаксис ===
 +<​file>​
 +<area shape="​circle | poly | rect">​
 +</​file>​
 +
 +=== Аргументы ===
 +
 +|circle |Область в виде окружности. |
 +|poly |Область в виде полигона (многоугольника). |
 +|rect |Прямоугольная область. |
 +
 +=== Значение по умолчанию ===
 +
 +rect
 +
 +==== Параметр TARGET ====
 +
 +=== Описание ===
 +
 +По умолчанию,​ при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости,​ это условие может быть изменено параметром target тега <​AREA>​.
 +
 +=== Синтаксис ===
 +<​file>​
 +<area target="​имя окна">​
 +</​file>​
 +
 +=== Аргументы ===
 +
 +В качестве аргумента используется имя окна или фрейма,​ заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.
 +
 +|_blank |Загружает страницу в новое окно браузера. |
 +|_self |Загружает страницу в текущее окно. |
 +|_parent |Загружает страницу во фрейм-родитель,​ если фреймов нет, то этот параметр работает как _self. |
 +|_top |Отменяет все фреймы и загружает страницу в полном окне браузера,​ если фреймов нет, то этот параметр работает как _self. |
 +
 +=== Значение по умолчанию ===
 +
 +_self
 +
 +=== Пример === 
 +<code html|Открытие ссылки в новом окне>​
 +<​!DOCTYPE HTML PUBLIC "​-//​W3C//​DTD HTML 4.01 Transitional//​EN"​ "​http://​www.w3.org/​TR/​html4/​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.html" ​
 +  target="​_blank"​ alt="​Откроется в новом окне">​
 +  </​map></​p> ​
 +  <​p><​img src="/​images/​piter.gif"​ usemap="#​nortland"​ width="​200" ​
 +  height="​200"​ alt="​Питер Нортон"></​p>​
 + </​body>​
 +</​html>​
 +</​code>​
 +
 +Обратите внимание,​ что в данном примере используется переходный <​!DOCTYPE>​. При использовании строгого <​!DOCTYPE>​ пример не пройдет валидацию.
html/tags/area.txt · Последние изменения: 21/04/2010 18:57 — dnaumov
CC Attribution-Noncommercial 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0