Атрибут coords
Синтаксис
<img src="..." alt="..." usemap="#Name"> <map name="Name"> <p><a href="..." coords="[координаты]" shape="..."> ... </a></p> </map>
Описание
Атрибут coords
(от англ. "coordinates" ‒ «координаты») задаёт координаты активной области карты-изображения. Точкой отсчёта координат выступает левый верхний угол карты-изображения.
Примечание
Вместо элемента a
с атрибутом «coords
» лучше использовать элемент area
с этим же атрибутом.
Условия использования
В зависимости от типа фигуры (задаётся атрибутом «shape
») активной области задаются определённые координаты и параметры области. (Расчёт координат ведётся в пикселях.)
Поддержка браузерами
Спецификация
Верс. | Раздел |
---|---|
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>
Пример использования
<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>