Справочник HTML

Атрибут coords

3 12 1 15 1 1
4.4 4 14 1

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

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

Синтаксис

<area coords="<координата 1>, <координата 2>, <координата 3>, ...">
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

Набор координат определяется формой «горячей области», которая задаётся атрибутом shape. Отсчёт координат обычно ведётся от левого верхнего угла изображения и указывается в пикселях.

Для прямоугольника (shape="rect") определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.

Координаты для прямоугольника

Рис. 1. Координаты для прямоугольника

Для окружности (shape="circle") определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.

Координаты для окружности

Рис. 2. Координаты для окружности

Для полигона (многоугольника) (shape="poly") последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2,…, Xn, Yn), как показано на рис. 3.

Рис. 3. Координаты для полигона

Рис. 3. Координаты для полигона

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

Нет.

Пример

<!DOCTYPE html> <html lang="ru"> <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>