Дорогой друг!

Справочник HTML переехал на новый сайт с коротким и простым адресом webref.ru. Там справочник регулярно обновляется и пополняется. Он актуальнее, лучше, полнее и содержит ряд интересных возможностей. На htmlbook.ru справочник HTML больше обновляться не будет и со временем закроется. Переходи на сайт webref.ru и пользуйся им на здоровье.

Атрибут coords


Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 2.1+ 1.0+ 1.0+ 1.0+ 1.0+

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

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

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

Синтаксис

HTML
<area coords="координата 1, координата 2, координата 3, ...">
XHTML
<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. Координаты для полигона

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

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta 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>

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.