Тег <area> Атрибут <coords>

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

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

поддержка браузерами:
IExplorer 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	
<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. Координаты для полигона

пример кода:
<!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>