HTML Атрибут coords
Атрибут coords (от англ. "coordinates" ‒ «координаты») задаёт координаты активной области карты-изображения. Точкой отсчёта координат выступает левый верхний угол карты-изображения.
В зависимости от типа фигуры (задаётся атрибутом shape) активной области задаются определённые координаты и параметры области. (Расчёт координат ведётся в пикселях.)
Синтаксис
<area coords="координата 1, координата 2, координата 3, ...">Значения
В качестве значения указываются координаты активной области карты-изображения:
| Значение | Условия использования |
|---|---|
| x1,y1,x2,y2 | Для прямоугольника (shape="rect") определяется четыре координаты — координаты левого верхнего и правого нижнего углов |
| x,y,R | Для окружности (shape="circle") определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R) |
| x1,y1,x2,y2,..,xn,yn | Для полигона (многоугольника) (shape="poly") последовательно указываются координаты каждой вершины |
Примечание: Значение радиуса может быть выражено в процентах. В этом случае вычисление радиуса происходит по координате центра окружности с наименьшим значением (то есть за основу берётся либо значение x, либо значение y).
Значение по умолчанию
Нет.
Применяется к тегам
| <area> |
Пример использования:
Карта изображений (Image Map) позволяет привязывать ссылки к разным областям одного изображения. Щелкая мышью по отдельным фрагментам изображения, пользователь может переходить по той или иной ссылке на разные веб-страницы. Карты в HTML создаются с помощью тэга <map>, а области-ссылки в них с помощью тэга <area>. Атрибут name тэга <map> связан с атрибутом usemap и создает связь между изображением и картой.
<img src="images/foto_elem.jpg" alt="Карта изображений" style="width:450px;height:292px;" usemap="#mykarta">
<map name="mykarta">
<!-- прямоугольник с координатами в верхнем левом углу изображения (133,163)-->
<area shape="rect" coords="133,163,414,252"
title="Зажигалка" href="javascript:alert('Это прямоугольная ссылка');">
<!-- круг с радиусом в 40 пикселей и центром, расположенном в точке (58, 158) -->
<area shape="circle"" coords="58,158,40"
title="Монета" href="javascript:alert('Вы выбрали круг');">
<!-- многоугольник с координатами вершин (133,62), (278,59) и т.д. -->
<area shape="poly" coords="133,62,278,59,284,24,407,22,410,130,285,134,278,96,133,95"
title="Ключ от авто" href="images/auto500.jpg" target=_blank>
</map>
Пример: Атрибут coords (Элемент area)
Спецификации
| Спецификация | Статус |
|---|---|
| HTML 4.01(W3C) | Рекомендация |
| HTML 4.01(W3C) | Перевод |
| HTML5 (W3C) | Рекомендация |
| HTML 5.1(W3C) | Рекомендация |
Поддержка браузерами
| 1+ | 1+ | 3+ | 1+ | 1+ | 1+ |
Учебник HTML
HTML уроки: HTML Атрибуты
