wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Тег area: Тег | htmlbook.ru

alexxlab
No Comments

Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+2.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.

Синтаксис

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

Атрибуты

accesskey
Переход к области с помощью комбинации клавиш.
alt
Альтернативный текст для области изображения.
coords
Координаты активной области.
href
Задает адрес документа, на который следует перейти.
hreflang
Указывает язык документа, на который ведет ссылка.
nohref
Область без ссылки на другой документ.
shape
Форма области.
tabindex
Задает последовательность перехода между элементами с помощью клавиши Tab.
target
Имя окна или фрейма, куда браузер будет загружать документ.
type
Устанавливает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

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

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

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA</title>
  <style type="text/css">
   #title {
    line-height: 0; /* Изменяем межстрочное расстояние */
   }
   #title img {
    border: none; /* Убираем рамку вокруг изображения */
   }
  </style>
 </head>
 <body> 
 <div><img src="images/ecctitle.png" 
                alt="Детский образовательный центр"><br>
  <img src="images/navigate.png" 
                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>

Тег | HTML справочник

HTML теги

Значение и применение

Тег <area> определяет интерактивную область в изображении-карте (элемент <map>), т.е. при клике на определённую область изображения происходят определённые действия, например, открывается отдельная страница с описанием данного участка изображения.

Поддержка браузерами

Атрибуты

Атрибутами тега <area> мы указываем как координаты области (атрибут coords), так и тип необходимой нам фигуры (атрибут shape):

Значение атрибутаОпределение
defaultВесь регион.
rectПрямоугольная область (x1,y1,x2,y2).
circleКруглая область (x,y,r- радиус).
polyМногоугольную область (x1,y1,x2,y2,…,xn,yn).

Создание активной области с использованием системы координат.

Пример использования

Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):

<!DOCTYPE html>
<html>
<head>
<title>Пример использование тега <map></title>
</head>
	<body>
		<p>Выбери фигуру:</p>
		<img src = "map.png" usemap = "#figuri" alt = "Доступны 4 фигуры для выбора" >
		<map name = "figuri" >
			<area shape = "rect" coords = "25,25,125,125" href = "red.html" alt = "Красный квадрат" >
			<area shape = "circle" coords = "200,75,50" href = "green.html" alt = "Зелёный круг." >
			<area shape = "poly" coords = "325,25,262,125,388,125" href = "blue.html" alt = "Голубой треугольник" >
			<area shape = "poly" coords = "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"  href = "yellow.html" alt = "Желтая звезда" >
		</map>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:

  • Разместили изображение (тег <img>), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе <map> (необходимо обязательно перед именем указать решетку).
  • Размещаем изображение-карту (тег <map>), задаем единственный и обязательный атрибут элемента name (имя). Обратите внимание, что в отличие от тега <img> мы задаем имя без решетки, в остальном они должны совпадать.
  • Размещаем четыре тега <area>, которые определяют интерактивные области в изображении-карте:
    • Первой мы задаем прямоугольную область (атрибут shape со значением «rect» ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
    • Второй указываем круглую область (атрибут shape со значением «circle» ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x, а второе по оси y, третее определяет радиус).
    • Что касается третей и четвертой фигуры, то они составлены по принципу многоугольной области (атрибут shape со значением «poly» ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).

Обращаю Ваше внимание на то, что если у тега <area> используется атрибут href, который определяет гиперссылку на площади, то необходимо обязательно указывать атрибут alt (альтернативный текст для области).

В HTML5, если у элемента <map> указан глобальный атрибут id, то он должен иметь то же значение, что и атрибут name.

Результат нашего примера в браузере (кликабельно) и на изображении:

Пример построения изображения-карты в HTML.

Отличия HTML 4.01 от HTML 5

В HTML5, добавлено 5 новых атрибутов, атрибут nohref был удалён.

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

area {
display: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

Тег | HTML справочник

Поддержка браузерами

Описание

HTML тег <area> определяет активные области на изображении, которые являются ссылками, эти области могут отличаться формой и размером. Картинка (изображение) с активными областями, называется картой-изображением. Такая картинка ничем не отличается от обычной, за исключением того, что содержит активные области (ссылки). Области могут перекрывать друг друга, сверху окажется та, которая в коде располагается первее (выше).

Элемент <area> используется только совместно с тегом <map> в качестве его дочернего элемента.

Атрибуты

alt:

Определяет альтернативный текст, который будет виден вместо изображения, если оно не может быть отображено (из-за медленной связи, ошибки в атрибуте src и тд).


coords:

Атрибут coords указывает координаты активной области на карте-изображения. Он используется вместе с атрибутом shape для указания размера, формы и размещения активной области. Возможные значения атрибута:

  • x1,y1,x2,y2 — указывает координаты верхнего левого и правого нижнего угла прямоугольника (shape=»rect»).

    Определение координат для прямоугольника (shape=»rect»):


  • x,y,радиус — определяет координаты центра окружности и радиус (shape=»circle»).

    Определение координат для окружности (shape=»circle»):


  • x1,y1,x2,y2,…,xn,yn — определяет координаты вершин полигона (многоугольника) (shape=»poly»).

    Определение координат для многоугольника (shape=»poly»):

Примечание: координаты верхнего левого угла области — 0,0.



Пример »


href:

Атрибут href указывает адрес страницы, на которую ведет ссылка с активной области изображения, если он не указан или пропущен, то тег <area> не будет являться гиперссылкой. (адрес может быть либо абсолютным либо относительным)


hreflang:

Указывает двухбуквенный код языка, определяющий язык страницы, доступной по ссылке. Используется только совместно с атрибутом href и имеет исключительно информативный характер.
Пример »


media:

Атрибут media определяет тип документа, на который ведет ссылка или указывает, тип устройства, для которого предназначается ссылка (пример: мобильный телефон, принтер и тд.).

Атрибут может принимать несколько значений и используется только совместно с атрибутом href.


rel:

Атрибут rel определяет отношение между текущим документом и связанным. Возможные значения атрибута:

  • alternate — ссылка на альтернативную версию документа (страница для печати, страница на другом языке и тд.).

  • author — ссылка на автора документа.

  • bookmark — постоянный URL-адрес, используемый для закладок.

  • help — ссылка на документ-справку.

  • license — ссылки на сведения об авторских правах для документа.

  • next — следующий документ в выделенной области.

  • nofollow — ссылка на неиндексируемый документ («nofollow» используется в Google, чтобы указать, что поисковый бот не должен переходить по этой ссылке).

  • noreferrer — указание браузеру не посылать HTTP-заголовок если пользователь перешел по ссылке.

  • prefetch — указывает, что следует кэшировать целевой документ.

  • prev — предыдущий документ в выделенной области.

  • search — ссылка на поиск для документа.

  • tag — тег (ключевое слово) для текущего документа.


Атрибут rel используется только совместно с атрибутом href.
Пример »


shape:

Атрибут shape указывает форму области. Он используется совместно с атрибутом coords для указания размера, формы и размещения активной области. Возможные значения атрибута:

  • default — определяет весь регион.

  • rect — определяет прямоугольную область.

  • circle — определяет круглую область.

  • poly — определяет многоугольную область.


target:

Атрибут target определяет, где будет открыт документ, при переходе по ссылке. Используется только вместе с атрибутом href. Возможные значения атрибута:

  • _blank — открывает документ в новом окне или вкладке.

  • _parent — открывает документ в родительском фрейме.

  • _self — открывает документ в той же директории, где располагается ссылка (значение по умолчанию).

  • _top — открывает документ во всю ширину окна.

  • имя_фрейма — открывает документ в iframe, имя которого было указано в качестве значения.

Пример »


type:

Атрибут type указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) документа, на который ведет ссылка. Используется только совместно с атрибутом href.
Пример »

Примечание: атрибут usemap в теге <img> связан с атрибутом name элемента <map>, и создает связь между картинкой и картой.

Тег <area> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию


area {
    display: none;
}

Пример


<img src="image.png" alt="numbers" usemap="#num1">
<map name="num1">
  <area shape="rect" coords="3,2,55,47" href="#" alt="kubik1">
</map>
<p>Ссылка расположена на кубике 1, наведите курсор, чтобы убедиться</p>

Результат данного примера в окне браузера:

Тег — Портал программирования

Описание

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

Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.

Синтаксис

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

 

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

 

Атрибуты

accesskey — Переход к области с помощью комбинации клавиш.
alt — Альтернативный текст для области изображения.
coords — Координаты активной области.
href — Задает адрес документа, на который следует перейти.
hreflang — Указывает язык документа, на который ведет ссылка.
nohref — Область без ссылки на другой документ.
shape — Форма области.
tabindex — Задает последовательность перехода между элементами с помощью клавиши Tab.
target — Имя окна или фрейма, куда браузер будет загружать документ.
type — Устанавливает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

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

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

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA</title>
  <style type="text/css">
   #title {
    line-height: 0; /* Изменяем межстрочное расстояние */
   }
   #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>

 

Тег | HTML Справочник

Изображение-карта, с кликабельными областями:

Пример

usemap=»#planetmap»>

<map name=»planetmap»>
 <area shape=»rect» coords=»0,0,82,126″ href=»sun.htm» alt=»Солнце»>
 <area shape=»circle» coords=»90,58,3″ href=»mercur.htm» alt=» Меркурий»>
 <area shape=»circle» coords=»124,58,8″ href=»venus.htm» alt=»Венера»>
</map>

Попробуйте сами »

Определение и использование

Тег <area> определяет область внутри изображения-карты (изображение-карта — это изображение с интерактивными областями).

Тег <area> всегда является вложенным в тег <map>.

Совет: Использовать карты в теге <img> связывать с
элементом <map> атрибутом name, создает связь между изображением и картой.

Поддержка браузеров

Элемент
<area>ДаДаДаДаДа

Различий между HTML 4.01 и HTML5

HTML5 имеет новые атрибуты, а некоторые атрибуты HTML 4.01 больше не поддерживаются.

Различия между HTML и XHTML

В HTML тег <area> не имеет закрывающего тега.

В XHTML тег <area> должен быть закрыт.

Warning: include(../includes/advertising2.php): failed to open stream: No such file or directory in /var/www/u0396568/data/www/schoolsw3.com/tags/tag_area.php on line 71

Warning: include(../includes/advertising2.php): failed to open stream: No such file or directory in /var/www/u0396568/data/www/schoolsw3.com/tags/tag_area.php on line 71

Warning: include(): Failed opening ‘../includes/advertising2.php’ for inclusion (include_path=’.:’) in /var/www/u0396568/data/www/schoolsw3.com/tags/tag_area.php on line 71

Атрибуты

= Новое в HTML5.

АтрибутЗначениеОписание
alttextЗадает альтернативный текст для области. Требуется, если присутствует атрибут href
coordscoordinatesЗадает координаты области
downloadfilenameУказывает, что целевой объект будет загружен, когда пользователь нажимает на гиперссылку
hrefURLЗадает ссылку на область
hreflanglanguage_codeЗадает язык целевого URL-адреса
mediamedia queryУказывает, что медиа/устройства целевого URL, оптимизированные для
nohrefvalueНе поддерживается в HTML5.
Указывает, что область не имеет связанной ссылки
relalternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag		Задает связь между текущим документом и целевым URL
shape default
rect
circle
poly		Задает форму области
target_blank
_parent
_self
_top
framename		Указывает, где открывать целевой URL
typemedia_typeЗадает тип носителя целевого URL

Глобальный атрибуты

Тег <area> также поддерживает Глобальный атрибуты в HTML.

Атрибуты событий

Тег <area> также поддерживает Атрибуты событий в HTML.

Связанные страницы

Справочник HTML DOM: Объект area

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент <area> со следующими значениями по умолчанию:

area {
    display: none;
}

Тег :: полный справочник HTML тегов

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

Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.

IExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+2.0+1.0+1.0+1.0+1.0+
HTML:3.24.015.0
XHTML:1.01.1
<!--HTML-->	
<map>
  <area href="URL">
</map>

<!--XHTML-->	
<map>
  <area href="URL" />
</map>

accesskey — Атрибут accesskey позволяет перейти к активной области изображения с помощью некоторого сочетания клавиш с заданной в атрибуте буквой или цифрой.
alt — Атрибут alt устанавливает альтернативный текст для области изображения.
coords — Устанавливает координаты области, она также называется «горячая область».
href — Задает адрес документа, на который следует перейти.
hreflang — Указывает язык документа, на который ведёт ссылка активной области изображения.
nohref — Этот атрибут сообщает браузеру, что «горячая область» не является ссылкой.
shape — Определяет форму «горячей области», координаты которой задаются с помощью атрибута coords.
tabindex — Атрибут tabindex определяет последовательность перехода между элементами при нажатии на клавишу Tab.
target — По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме.
type — Устанавливает MIME-тип документа, на который ведёт ссылка.

Не требуется

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA</title>
  <style type="text/css">
   #title {
    line-height: 0; /* Изменяем межстрочное расстояние */
   }
   #title img {
    border: none; /* Убираем рамку вокруг изображения */
   }
  </style>
 </head>
 <body> 
 <div><img src="images/ecctitle.png" 
                alt="Детский образовательный центр"><br>
  <img src="images/navigate.png" 
                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>

HTML тег area

Тег <area> определяет активные области в карте-изображении.

Тег <area> всегда должен располагаться внутри тега map.

Разница между HTML 4.01 и HTML5

В HTML5 появились новые атрибуты, а некоторые атрибуты HTML 4.01 больше не поддерживаются.

Различия между HTML и XHTML

В HTML тег <area> — одиночный элемент без закрывающего тега. В XHTML тег <area> должен закрываться должным образом, а именно — <area />.

Атрибуты тега <area>

АтрибутОписание
altОпределяет альтернативный текст, если элемент не удается отобразить
coordsОпределяет координаты ссылки в карте изображений
downloadОпределяет, что документ, на который указывает ссылка, будет загружаться
hrefОпределяет URL, на которую ведет ссылка активной области изображения
hreflangОпределяет язык документа, на который указывает ссылка активной области изображения
mediaОпределяет устройство вывода, для которого оптимизирован документ, на который ведет ссылка области карты-изображения
nohrefОпределяет, что у ссылочного региона нет ассоциированной с ним ссылки
relОпределяет отношение с документом, на который ведет участок-ссылка карты-изображения
shapeОпределяет форму ссылки в карте изображений
targetОпределяет, где открывать документ, на который ведет участок-сс

HTML-тег области

Пример

Карта изображений с интерактивными областями:

Компьютер
<область shape = "rect" coords = "290 172 333 250" alt = "Телефон" href = "phone.htm">
<область shape = "circle" coords = "337,300,44" alt = "Чашка кофе" href = "coffee.htm">

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Тег

определяет область внутри карты изображений (карта изображений — это изображение с интерактивными областями).

Элементы

всегда вложены в тег

.

Примечание: Атрибут usemap в связан с
атрибут name элемента

и создает связь между изображением и картой.

Поддержка браузера

Элемент
<зона> Есть Есть Есть Есть Есть

Атрибуты

Атрибут Значение Описание
альтернативный текст Задает альтернативный текст для области.Обязательно, если присутствует атрибут href
координаты координаты Задает координаты области
загрузить имя файла Указывает, что цель будет загружена, когда пользователь щелкнет гиперссылку.
href URL Указывает цель гиперссылки для области
hreflang language_code Задает язык целевого URL-адреса
СМИ медиа-запрос Указывает, для какого носителя / устройства оптимизирован целевой URL.
отн. альтернативный
автор
закладка
помощь
лицензия
следующие
nofollow
noreferrer
предварительная выборка
предыдущая
поиск
тег		 Определяет связь между текущим документом и целевым URL-адресом
форма по умолчанию
прямой
круг
поли		 Определяет форму области
цель _ пустой
_parent
_self
_top
имя кадра 		Указывает, где открыть целевой URL
тип media_type Определяет тип носителя для целевого URL.

Глобальные атрибуты

Тег

также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML.

Другие примеры

Пример

Другое изображение карты, с интерактивными областями:

usemap = «# planetmap»>

<карта name = "planetmap">

Солнце

Меркурий

Venus

Попробуй сам »

связанные страницы

Ссылка

HTML DOM:
Площадь объекта

Настройки CSS по умолчанию

Большинство браузеров отображают элемент

со следующими значениями по умолчанию:

область {
дисплей: нет;
}

.

HTML: тег

Документ HTML5

Если вы создали новую веб-страницу в HTML5, ваш тег

может выглядеть так:

  




 Пример HTML5 от www.techonthenet.com 




 Элементы химии 


Элементы
  

   Водород 
  Литий

В этом примере документа HTML5 мы создали карту изображений, используя файл изображения с именем chem.png , в котором есть две области, которые могут быть изменены с помощью тега

. Первая интерактивная область представляет собой прямоугольную форму, которая ведет на страницу Hydrogen с именем h.php . Вторая интерактивная область представляет собой круговую форму, которая ведет на страницу Lithium под названием li.php .

HTML 4.01 Переходный документ

Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег

может выглядеть так:

  




 HTML 4.01 Transitional Example by www.techonthenet.com 




 Элементы химии 


 Элементы 
  

  Водород
  Литий

В этом примере HTML 4.01 Transitional Document мы создали карту изображения, используя файл изображения с именем chem.png , в котором с помощью тега

определены две области, которые могут мигать. Первая интерактивная область представляет собой прямоугольную форму, которая ведет на страницу Hydrogen под названием h.php . Вторая интерактивная область представляет собой круговую форму, которая ведет на страницу Lithium под названием li.php .

Переходный документ XHTML 1.0

Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег

может выглядеть так:

  




<название> XHMTL 1.0 Переходный пример от www.techonthenet.com 




 Элементы химии 


Элементы
  

  Водород
  Литий

В этом примере переходного документа XHTML 1.0 мы создали карту изображения, используя файл изображения с именем chem.png , в котором с помощью тега

определены две области, вызывающие мигание. Первая интерактивная область представляет собой прямоугольную форму, которая ведет на страницу Hydrogen с именем h.php . Вторая интерактивная область представляет собой круговую форму, которая ведет на страницу Lithium под названием li.php .

Строгий документ XHTML 1.0

Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег

может выглядеть так:

  




 Строгий пример XHTML 1.0 от www.techonthenet.com 




 Элементы химии 




  Элементы





  
     Водород 
    Литий

В этом примере XHTML 1.0 Strict Document мы создали карту изображения, используя файл изображения с именем chem.png , в котором с помощью тега

определены две области, которые могут мигать. Первая интерактивная область представляет собой прямоугольную форму, которая ведет на страницу Hydrogen с именем h.php . Вторая интерактивная область представляет собой круговую форму, которая ведет на страницу Lithium под названием li.php .

XHTML 1.1 Документ

Если вы создали новую веб-страницу в XHTML 1.1, ваш тег

может выглядеть так:

  




 XHTML 1.1 Пример с сайта www.techonthenet.com 




 Элементы химии 




   Элементы 





  
    Водород
    Литий

В этом примере документа XHTML 1.1 мы создали карту изображения, используя файл изображения с именем chem.png , в котором есть две области, которые могут быть изменены с помощью тега

.Первая интерактивная область представляет собой прямоугольную форму, которая ведет на страницу Hydrogen с именем h.php . Вторая интерактивная область представляет собой круговую форму, которая ведет на страницу Lithium под названием li.php .

.Тег области

HTML — GeeksforGeeks

< HTML >

< голова >

< title > Тег области title >

< стиль >

кузов {

выравнивание текста: по центру;

}

h2 {

цвет: зеленый;

}

стиль >

голова >

< корпус >

< img src =

alt = ""

ширина = "300"

высота = "119"

класс = "aligncenter size-medium wp-image-910965"

usemap = "#shapemap" />

< карта имя = «shapemap» >

< площадь форма = «поли»

координаты = "59,31,28,83,91,83"

href =

alt = «Треугольник» >

< площадь форма = «круг»

координаты = "155,56,26"

href =

alt = «Круг» >

< площадь форма = "прямоугольник"

координаты = "224,30,276,82"

href =

alt = «Квадрат» >

карта >

корпус >

html >

.

HTML-код области Атрибут

❮ HTML тег

Пример

Используйте атрибут coords, чтобы указать координаты каждой области на карте изображения:

<карта name = "planetmap">

Солнце

Меркурий

Venus

Попробуй сам "

Определение и использование

Атрибут coords определяет координаты области на карте изображения.

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

Совет: Координаты верхнего левого угла области 0,0.

Поддержка браузера

Атрибут
координаты Есть Есть Есть Есть Есть

Синтаксис

Значения атрибутов

Значение Описание
x1, y1, x2, y2 Задает координаты левого верхнего и правого нижнего угла прямоугольника (shape = "rect").
x, y, радиус Задает координаты центра круга и радиуса (shape = "circle").
x1, y1, x2, y2 ,.., хн, уп Задает координаты краев многоугольника. Если первая и последняя пары координат не совпадают, браузер добавит последнюю пару координат, чтобы закрыть многоугольник (shape = "poly")

❮
HTML-тег

.

No related posts.

Share :

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *