coords 🗑

Описание

Атрибут coords (от англ. "coordinates" ‒ «координаты») используется вместе с атрибутом shape для определения размера, формы и точки назначения (адреса) в объекте или изображении. Атрибут coords применяется к ссылкам, которые располагаются внутри контейнера <map>, который расположен внутри элемента <object>.

Данный атрибут устарел, рекомендуется вместо него использовать элемент <area>.

Синтаксис

<a href="ссылка" coords="значение" shape="тип_фигуры">текст ссылки</a>

Например

<a href="ссылка" coords="10,10,20,30" shape="rect">текст ссылки</a>

Значения

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

shape="rect"

Задает правильный четырёхугольник. Значение coords будет в виде:

х1,y1,x2,y2

Где «x» и «y» координаты левой верхней и правой нижней вершины прямоугольника. Пример

<img src="..." alt="..." usemap="#Menu">
<map name="Menu">
 <p><a shape="rect" coords="7,23, 129,163" href="...">...</a></p>
</map>

shape="circle"

Задает окружность. Значение coords будет в виде:

х,y,r

Где задаются «x» и «y» координаты центра окружности и значение радиуса («r»). Значение радиуса может быть выражено в процентах. В этом случае вычисление радиуса происходит по координате центра окружности с наименьшим значение (то есть за основу берётся либо значение «x», либо значение «y»). Пример

<img src="..." alt="..." usemap="#Menu">
<map name="Menu">
 <!-- Радиус в пикселях -->
 <p><a shape="circle" coords="120,100, 50" href="...">...</a></p>
 <!-- Радиус в процентах -->
 <p><a shape="circle" coords="120,100, 60%" href="...">...</a></p>
</map>

shape="poly"

Задает многоугольник. Значение coords будет в виде:

x1,y1,х2,y2,х3,y3...,хn,yn

Где задаются «x» и «y» координаты всех вершин многоугольника. Первая и последняя пара «x» и «y» координат должна быть одинаковой, для того чтобы образовать многоугольник. В случае, когда эти значения координат не совпадают браузер должен самостоятельно создать дополнительную пару координат совпадающую с первой парой координат, для того чтобы образовался многоугольник. Пример

<img src="..." alt="..." usemap="#Menu">
<map name="Menu">
 <!-- Допустимое написание -->
 <p><a shape="poly" coords="35,150, 80,63, 172,63, 217,150" href="...">...</a></p>
 <!-- Рекоммендованное написание -->
 <p><a shape="poly" coords="35,150,80,63, 172,63, 217,150, 35,150" href="...">...</a></p>
</map>