Атрибут coords
Синтаксис
HTML
XHTML
<img src="..." alt="..." usemap="#Name"> <map name="Name"> <p><a href="..." coords="[координаты]" shape="..."> ... </a></p> </map>
Описание
Атрибут coords (от англ. "coordinates" ‒ «координаты») задаёт координаты активной области карты-изображения. Точкой отсчёта координат выступает левый верхний угол карты-изображения.
Примечание
Вместо элемента a с атрибутом «coords» лучше использовать элемент area с этим же атрибутом.
Условия использования
В зависимости от типа фигуры (задаётся атрибутом «shape») активной области задаются определённые координаты и параметры области. (Расчёт координат ведётся в пикселях.)
Поддержка браузерами
Chrome
Firefox
Поддерж.
Opera
Maxthon
IExplorer
Safari
iOS
Android
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | |
| 4.01 | 13.6.1 Client-side image maps: the MAP and AREA elements coords = coordinates... DTD: Transitional
Strict
Frameset
|
| 5.0 | |
| 5.1 | |
| XHTML | |
| 1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset
|
| 1.1 | Extensible HyperText Markup Language |
Значения
В качестве значения указываются координаты активной области карты-изображения:
Правильный четырёхугольник [shape="rect"]
- х1,y1,x2,y2
- Задаются «
x» и «y» координаты левой верхней и правой нижней вершины прямоугольника.
1 2 x 27 229 y 62 161 <img src="..." alt="..." usemap="#Menu"> <map name="Menu"> <p><a shape="rect" coords="27,62, 229,161" href=...">...</a></p> </map>
Окружность [shape="circle"]
- х,y,r
- Задаются «
x» и «y» координаты центра окружности и значение радиуса («r»).Значение радиуса может быть выражено в процентах. В этом случае вычисление радиуса происходит по координате центра окружности с наименьшим значение (то есть за основу берётся либо значение «
x», либо значение «y»).
x y r (px) r (%) 120 99 71 71.72 <img src="..." alt="..." usemap="#Menu"> <map name="Menu"> <!-- Радиус в пикселях --> <p><a shape="circle" coords="120,99, 71" href=...">...</a></p> <!-- Радиус в процентах --> <p><a shape="circle" coords="120,99, 71.72%" href=...">...</a></p> </map>
Многоугольник [shape="poly"]
- х1,y1,х2,y2,х3,y3...,хn,yn
- Задаются «
x» и «y» координаты всех вершин многоугольника. Первая и последняя пара «x» и «y» координат должна быть одинаковой, для того чтобы образовать многоугольник. В случае, когда эти значения координат не совпадают браузер должен самостоятельно создать дополнительную пару координат совпадающую с первой парой координат, для того чтобы образовался многоугольник.
1 2 3 x 60 130 200 y 162 31 162 <img src="..." alt="..." usemap="#Menu"> <map name="Menu"> <!-- Допустимое написание --> <p><a shape="poly" coords="60,162, 130,31, 200,162" href=...">...</a></p> <!-- Рекоммендованное написание --> <p><a shape="poly" coords="60,162, 130,31, 200,162, 60,162" href=...">...</a></p> </map>
1 2 3 4 x 35 80 172 217 y 150 63 63 150 <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>
1 2 3 4 5 x 19 68 156 220 109 y 130 21 59 155 170 <img src="..." alt="..." usemap="#Menu"> <map name="Menu"> <!-- Допустимое написание --> <p><a shape="poly" coords="19,130, 68,21, 156,59, 220,155, 109,170" href=...">...</a></p> <!-- Рекоммендованное написание --> <p><a shape="poly" coords="19,130, 68,21, 156,59, 220,155, 109,170, 19,130" href=...">...</a></p> </map>
Пример использования
Листинг кода
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Атрибут coords (Элемент a)</title>
</head>
<body>
<h1>Активные области кары-изображения</h1>
<div>
<img src="/html/html-images/map_area.jpg" style="width: 100px; height: 79px;" alt="Часть меню сайта" usemap="#Menu" />
<map id="Menu">
<!-- Задаём активные области -->
<p><a shape="rect" coords="0,1, 100,26" href="/html/abbr/" style="display: none;" title="Аббревиатура">abbr</a></p>
<p><a shape="rect" coords="0,27, 100,52" href="/html/acronym/" style="display: none;" title="Акроним">acronym</a></p>
<p><a shape="rect" coords="0,53, 100,78" href="/html/address/" style="display: none;" title="Адрес">address</a></p>
</map>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Атрибут coords (Элемент a)</title>
</head>
<body>
<h1>Активные области кары-изображения</h1>
<div>
<img src="/html/html-images/map_area.jpg" style="width: 100px; height: 79px;" alt="Часть меню сайта" usemap="#Menu" />
<map id="Menu">
<!-- Задаём активные области -->
<p><a shape="rect" coords="0,1, 100,26" href="/html/abbr/" style="display: none;" title="Аббревиатура">abbr</a></p>
<p><a shape="rect" coords="0,27, 100,52" href="/html/acronym/" style="display: none;" title="Акроним">acronym</a></p>
<p><a shape="rect" coords="0,53, 100,78" href="/html/address/" style="display: none;" title="Адрес">address</a></p>
</map>
</div>
</body>
</html>
Атрибут coords (Элемент a)