HTML-атрибут coords
Атрибут coords в HTML задаёт координаты области карты изображения. Узнайте об этом атрибуте и посмотрите пример его применения с элементом <area>.
HTML-атрибут coords определяет координаты интерактивной области («горячей точки») в клиентской карте изображения. Он используется на элементе <area> внутри элемента <map>.
Значение coords само по себе лишено смысла — оно всегда интерпретируется в соответствии с атрибутом shape того же элемента <area>. Одни и те же числа означают разные вещи для прямоугольника, окружности или многоугольника, поэтому coords и shape должны задаваться всегда вместе.
Как работает система координат
Координаты измеряются в CSS-пикселях относительно отображаемого изображения:
- Начало координат
0,0находится в верхнем левом углу изображения. xувеличивается вправо,yувеличивается вниз.- Нижний правый угол изображения находится в точке
width,height— так, для изображения 250×150 наибольшая допустимая координата составляет примерно250,150.
Поскольку координаты привязаны к размеру отображаемого изображения, карта изображения остаётся точной только при том размере, при котором измерялись координаты. Если масштабировать изображение с помощью CSS (изменить width/height, использовать адаптивную вёрстку или масштабирование страницы), горячие точки перестанут совпадать с рисунком. Поэтому карты изображений лучше всего работают с изображением фиксированного размера.
Значения
Формат coords полностью определяется атрибутом shape:
Значение shape | Формат coords | Смысл |
|---|---|---|
rect | x1,y1,x2,y2 | Верхний левый угол (x1, y1) и нижний правый угол (x2, y2). Необходимо соблюдать условия x1 < x2 и y1 < y2. |
circle | x,y,radius | Центр (x, y) и radius (радиус) в пикселях. |
poly | x1,y1,x2,y2,...,xn,yn | Список угловых точек. Браузер автоматически замыкает фигуру, соединяя последнюю точку с первой. |
default | (нет) | Всё изображение целиком. default — значение атрибута shape, а не coords; элемент <area shape="default"> не требует coords. |
Распространённая ошибка — задавать углы прямоугольника для rect в неправильном порядке. Запись coords="90,90,35,55" некорректна, так как x1 > x2 и y1 > y2; правильно этот прямоугольник записывается как coords="35,55,90,90".
Синтаксис
<area shape="rect" coords="x1,y1,x2,y2">Примеры HTML-атрибута coords
В приведённом ниже примере на одном изображении используются одна область rect, две области circle и одна область poly:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Click on the logo or on one of the logo item to watch it closer:</p>
<img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="block" usemap="#blockmap" />
<map name="blockmap">
<!-- circle: center x,y and radius -->
<area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
<area shape="circle" coords="195,32,28" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
<!-- rect: top-left x1,y1 then bottom-right x2,y2 (x1<x2, y1<y2) -->
<area shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
<!-- poly: a triangle joining three points -->
<area shape="poly" coords="150,80,230,80,190,140" alt="js" href="https://www.w3docs.com/" />
</map>
</body>
</html>Примечание: Всегда указывайте осмысленное значение атрибута
altдля каждого элемента<area>— это единственный текст, который программа чтения с экрана имеет для данной горячей точки.
Заметка о доступности
Клиентские карты изображений — устаревшая технология с реальными ограничениями. Горячие точки не всегда доступны с клавиатуры, их смысл зависит от точного значения alt каждого элемента <area>, а координаты перестают работать при изменении размера или масштаба отображения изображения. В большинстве современных интерфейсов лучше размещать отдельно оформленные, фокусируемые ссылки или кнопки поверх (или рядом с) изображения — они остаются доступными и адаптивными. Обращайтесь к coords и картам изображений только тогда, когда действительно необходимы области произвольной формы на растровом изображении фиксированного размера.
Связанные атрибуты и теги
<map>— определяет карту изображения, объединяющую элементы<area>.<area>— элемент, для которого задаётсяcoords.- Атрибут
alt— доступный текст для каждой области.