Справочники

HTML Элементы HTML Атрибуты Глобальные Атрибуты HTML События HTML MIME-типы HTML Коды языков HTMLТаблица цветов HTML ASCII HTML ISO-8859-1 HTML Windows-1251 HTML UTF-8 кирилица HTML URL для UTF-8 HTML URL для ISO-8859


 


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) Рекомендация

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


Учебник HTML

HTML уроки: HTML Атрибуты

HTML Изображения