Атрибут coords
(от англ. "coordinates" ‒ «координаты») используется вместе с атрибутом shape для определения размера, формы и точки назначения (адреса) в объекте или изображении.
Атрибут coords
применяется к ссылкам, которые располагаются внутри контейнера <map>
, который расположен внутри элемента <object>
.
Данный атрибут устарел, рекомендуется вместо него использовать элемент <area>
.
<a href="ссылка" coords="значение" shape="тип_фигуры">текст ссылки</a>
Например
<a href="ссылка" coords="10,10,20,30" shape="rect">текст ссылки</a>
Набор координат определяется формой «активной области», которая задаётся атрибутом shape
. Отсчёт координат обычно ведётся от левого верхнего угла объекта или изображения и указывается в пикселях.
Задает правильный четырёхугольник. Значение 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>
Задает окружность. Значение 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>
Задает многоугольник. Значение 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>