Атрибут coords
Синтаксис
HTML
XHTML
<img src="..." alt="..." usemap="#Name">
...
<map name="Name">
<area coords="[значение]" (href="..." | nohref) alt="...">
...
</map>
Описание
Атрибут / параметр coords (от англ. "coordinates" ‒ «координаты») задаёт координаты активной области карты-изображения. Точкой отсчёта координат выступает левый верхний угол карты-изображения.
Условия использования
В зависимости от типа фигуры (задаётся атрибутом «shape») активной области задаются определённые координаты и параметры области. (Расчёт координат ведётся в пикселях.)
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел | |
|---|---|---|
| HTML | ||
| 2.0 | ||
| 3.2 | MAP | |
| 4.01 | 13.6.1 Client-side image maps: the MAP and AREA elements coords = coordinates [CN]... DTD: Transitional
Strict
Frameset
|
Перевод |
| 5.0 | 4.7.12 The area element The coords attribute... |
|
| 5.1 | 4.7.16. The area element The coords attribute... |
|
| 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"> <area shape="rect" coords="27,62, 229,161" href=..."> </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"> <!-- Радиус в пикселях --> <area shape="circle" coords="120,99, 71" href=..."> <!-- Радиус в процентах --> <area shape="circle" coords="120,99, 71.72%" href=..."> </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"> <!-- Допустимое написание --> <area shape="poly" coords="60,162, 130,31, 200,162" href=..."> <!-- Рекоммендованное написание --> <area shape="poly" coords="60,162, 130,31, 200,162, 60,162" href=..."> </map>
1 2 3 4 x 35 80 172 217 y 150 63 63 150 <img src="..." alt="..." usemap="#Menu"> <map name="Menu"> <!-- Допустимое написание --> <area shape="poly" coords="35,150, 80,63, 172,63, 217,150" href=..."> <!-- Рекоммендованное написание --> <area shape="poly" coords="35,150,80,63, 172,63, 217,150, 35,150" href=..."> </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"> <!-- Допустимое написание --> <area shape="poly" coords="19,130, 68,21, 156,59, 220,155, 109,170" href=..."> <!-- Рекоммендованное написание --> <area shape="poly" coords="19,130, 68,21, 156,59, 220,155, 109,170, 19,130" href=..."> </map>
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр coords (Элемент area)</title>
</head>
<body>
<h1>Координаты активной области кары-изображения</h1>
<img src="/examples/images/figures.png" style="width: 450px; height: 360px; background: #ededed;" alt="Фигуры" usemap="#Menu">
<map name="Menu">
<area shape="rect" coords="68,42,290,123" href="https://ru.wikipedia.org/wiki/%CF%F0%FF%EC%EE%F3%E3%EE%EB%FC%ED%E8%EA" alt="Прямоугольник" title="Прямоугольник">
<area shape="circle" coords="112,256,77" href="https://ru.wikipedia.org/wiki/%CE%EA%F0%F3%E6%ED%EE%F1%F2%FC" alt="Окружность" title="Окружность">
<area shape="poly" coords="195,197,281,197,307,108,334,197,420,197,351,249,377,337,307,283,236,337,264,249,195,197" href="https://ru.wikipedia.org/wiki/%CC%ED%EE%E3%EE%F3%E3%EE%EB%FC%ED%E8%EA" alt="Многоугольник" title="Многоугольник">
</map>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр coords (Элемент area)</title>
</head>
<body>
<h1>Координаты активной области кары-изображения</h1>
<img src="/examples/images/figures.png" style="width: 450px; height: 360px; background: #ededed;" alt="Фигуры" usemap="#Menu">
<map name="Menu">
<area shape="rect" coords="68,42,290,123" href="https://ru.wikipedia.org/wiki/%CF%F0%FF%EC%EE%F3%E3%EE%EB%FC%ED%E8%EA" alt="Прямоугольник" title="Прямоугольник">
<area shape="circle" coords="112,256,77" href="https://ru.wikipedia.org/wiki/%CE%EA%F0%F3%E6%ED%EE%F1%F2%FC" alt="Окружность" title="Окружность">
<area shape="poly" coords="195,197,281,197,307,108,334,197,420,197,351,249,377,337,307,283,236,337,264,249,195,197" href="https://ru.wikipedia.org/wiki/%CC%ED%EE%E3%EE%F3%E3%EE%EB%FC%ED%E8%EA" alt="Многоугольник" title="Многоугольник">
</map>
</body>
</html>
Параметр coords (Элемент area)