Атрибут coords (от английского coordinates, «координаты») задаёт место и размер области на картинке, у которой есть клиентская карта: прямоугольник, круг или многоугольник. Закрывающий тег для него не нужен: атрибут пишется внутри открывающего тега <area>, а сам area закрывающего тега не имеет.
Это строка из чисел в пикселях. Сколько чисел нужно и что они значат, зависит от формы области. Все результаты ниже я проверил в браузере, на котором я проверял, кликая по настоящим областям.
<map name="m">
<area shape="rect" coords="50,20,150,80"
href="/room-1" alt="Комната 1">
</map>В этой статье
- Что такое атрибут coords в HTML и зачем он нужен
- Для каких тегов работает coords: area и устаревший a
- Какие числа записывать для rect, circle, poly и default
- Как записывать числа: разделители, дроби и ошибки
- Сколько чисел нужно и что при лишних или нехватке
- Откуда отсчёт, в чём единицы и что с масштабом
- Что при пересечении областей
- Coords в JavaScript: свойство coords
- Частые ошибки в атрибуте coords
- Шпаргалка по атрибуту coords
Что такое атрибут coords в HTML и зачем он нужен
Карта изображения делит картинку на кликабельные части. Каждая часть это <area> внутри <map>, а coords объясняет браузеру, где именно эта часть находится. Без него область есть, но занимать ей нечего. Саму карту к картинке подключает usemap.
Числа отсчитываются от левого верхнего угла картинки: сначала по горизонтали (x), потом по вертикали (y).
Для каких тегов работает coords: area и устаревший a
Всерьёз coords нужен только тегу <area>. Свойство с таким названием есть ещё у ссылки a, но это наследие старых версий HTML, и на поведение страницы оно не влияет. У <img>, <map>, <iframe>, <input>, <object>, <link> и SVG-элемента image свойства нет.
| Тег | Что можно сказать | Пример записи |
|---|---|---|
<area> | Основной случай: описывает область на картинке | <area shape="rect" coords="0,0,50,25" href="/a" alt="A"> |
<a> | Свойство есть, это устаревший вариант | <a href="/a" coords="0,0,50,25"> |
Какие числа записывать для rect, circle, poly и default
Число значений зависит от формы, которую задаёт shape. Ниже то, что я проверил кликами.
| Форма | Что в coords | Пример записи |
|---|---|---|
rect | Четыре числа: левый верхний и правый нижний углы | coords="50,20,150,80" |
circle | Три числа: центр и радиус | coords="100,50,30" |
poly | Пары чисел: вершины по порядку, вершин не меньше трёх | coords="100,10,180,90,20,90" |
default | Не нужен: область занимает всю картинку | <area shape="default" href="/a" alt="A"> |
Две подробности. Если shape не указан, область читается как прямоугольник. В моём замере то же случилось и при неверном значении, например shape="foo". А значение default заняло всю картинку, даже когда я записал для него coords: числа были проигнорированы.
Пример: как выглядят области разных форм
Выберите форму и кликайте по картинке: внутри закрашенной фигуры ссылка открывается, снаружи нет.
Результат показывает ваш браузер через Navigation API. Если он не поддерживается, демонстрация об этом сообщит.
Как записывать числа: разделители, дроби и ошибки
Браузер разбирает строку снисходительно. Я попробовал разные записи одного и того же прямоугольника 50, 20, 150, 80, проверяя клик по десяткам точек картинки.
| Запись | Что получилось | Пример записи |
|---|---|---|
| Через запятую | Область обычная | coords="50,20,150,80" |
| Запятая и пробел | Область обычная | coords="50, 20, 150, 80" |
| Только пробелы | Область обычная | coords="50 20 150 80" |
| Точки с запятой | Область обычная | coords="50;20;150;80" |
| Запятая в конце | Область обычная | coords="50,20,150,80," |
| Дробные числа | Область обычная | coords="50.5,20.5,150.5,80.5" |
| Углы в обратном порядке | Область заняла то же место | coords="150,20,50,80" |
| Отрицательные числа | Область обрезана границей картинки | coords="-50,-20,100,50" |
| Проценты | Знак процента отброшен, числа считались пикселями | coords="25%,20%,75%,80%" |
| Буква вместо числа | Буква считалась нулём | coords="a,20,150,80" |
Это не значит, что так нужно писать. Надёжнее всего числа через запятую без пробелов, как в стандартных примерах: другой браузер может разобрать нестандартную запись иначе. Особенно это касается процентов: в моём замере они не работали как проценты, поэтому полагаться на них нельзя.
Пример: какие записи coords принимает браузер
Выберите запись, кликните в центр картинки, потом у края. Пунктиром показан обычный прямоугольник 50, 20, 150, 80.
Результат показывает ваш браузер, тексты под картинкой описывают мой замер. Они могут отличаться от вашего результата.
Сколько чисел нужно и что при лишних или нехватке
Если чисел меньше нужного, область не создаётся. Лишние числа в конце просто отбрасываются.
| Запись | Что получилось | Пример записи |
|---|---|---|
rect, три числа | Области нет, клик ничего не открывает | coords="50,20,150" |
rect, пять чисел | Пятое число проигнорировано | coords="50,20,150,80,10" |
circle, два числа | Области нет | coords="100,50" |
circle, четыре числа | Использованы первые три | coords="100,50,30,5" |
circle, радиус 0 или отрицательный | Области нет | coords="100,50,0" |
poly, нечётное количество чисел | Последнее число отбрасывается; из пяти чисел остаются две вершины, области нет | coords="100,10,180,90,20" |
poly, две вершины | Области нет | coords="10,10,190,90" |
coords не записан у rect | Области нет | <area shape="rect" href="/a" alt="A"> |
Надёжный вариант для poly: чётное количество чисел и не меньше трёх вершин.
Откуда отсчёт, в чём единицы и что с масштабом
Числа это пиксели CSS, а нулевая точка находится в левом верхнем углу картинки. Я проверил три случая.
| Условие | Что получилось | Пример записи |
|---|---|---|
| Картинка с рамкой и padding | Нулевая точка осталась в наружном углу картинки: область не сдвинулась внутрь | img { padding: 10px; border: 5px solid; } |
| Картинку растянули стилями вдвое | Числа остались прежними, область не растянулась | img { width: 400px; } |
| Область выходит за край картинки | Обрезается границей картинки | coords="-50,-20,100,50" |
Про рамку и padding здесь надо обратить внимание: в статье про ismap координаты клика отсчитывались от внутреннего края, а для области они считаются от наружного. Это два разных механизма, смешивать их не нужно. Что делать с растяжением, описано в статье про usemap: там же пересчёт координат скриптом.
Что при пересечении областей
Области могут перекрываться. Я проверил две пересекающиеся прямоугольные области и кликнул в трёх местах.
| Куда кликнули | Что получилось | Пример записи |
|---|---|---|
| Только в первую область | Открылась первая | <area coords="0,0,100,100" href="/first"> |
| В общую часть | Открылась первая: побеждает та, что записана раньше | <area coords="50,0,150,100" href="/second"> |
| Только во вторую область | Открылась вторая | <area coords="50,0,150,100" href="/second"> |
Практический вывод: самые важные области записывайте выше остальных.
Coords в JavaScript: свойство coords
В скрипте атрибут доступен как свойство coords, это строка. Она возвращается так, как записана: запятые и пробелы не меняются.
| Действие | Что получилось | Пример записи |
|---|---|---|
| Чтение без атрибута | Вернулась пустая строка | area.coords |
| Запись строки | Атрибут изменился, прочитать можно ту же строку | area.coords = '1, 2 ,3' |
| Запись списка чисел | Нужно собрать строку самому | area.coords = [50, 20, 150, 80].join(',') |
const area = document.querySelector('area');
area.coords = [50, 20, 150, 80].join(',');
console.log(area.coords); // "50,20,150,80"Частые ошибки в атрибуте coords
Большинство ошибок связано с количеством чисел и с тем, что координаты не масштабируются.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Три числа у rect | Области нет | Записать четыре: два угла |
Два числа у circle | Области нет | Записать центр и радиус |
Меньше трёх вершин у poly | Области нет | Записать не меньше трёх пар чисел |
Нечётное количество чисел у poly | Последнее число отбрасывается | Записывать только пары |
Проценты в coords | Знак отброшен, числа считаются пикселями | Писать пиксели |
| Буква вместо числа | Считается нулём, область смещается | Проверить запись |
| Пробелы и точки с запятой вместо запятых | Сейчас работает, но другой браузер может не принять | Писать через запятую |
Нулевой радиус у circle | Области нет | Задать положительный радиус |
coords у default | Числа игнорируются | Убрать атрибут |
| Картинку растянули стилями | Области остались прежними | Пересчитать координаты скриптом |
| Важную область записали после большой | При пересечении побеждает первая | Поставить важную выше |
Шпаргалка по атрибуту coords
Всё главное из статьи в одной таблице.
| Задача | Как записать | Пример записи |
|---|---|---|
| Прямоугольник | Левый верхний и правый нижний углы | coords="50,20,150,80" |
| Круг | Центр и радиус | coords="100,50,30" |
| Многоугольник | Пары чисел, не меньше трёх вершин | coords="100,10,180,90,20,90" |
| Вся картинка | Значение default без чисел | <area shape="default" href="/a" alt="A"> |
| Единицы | Пиксели CSS | coords="0,0,100,50" |
| Отсчёт | Левый верхний угол картинки | coords="0,0,100,50" |
| Разделитель | Запятая без пробелов | coords="50,20,150,80" |
| Прочитать из скрипта | Свойство coords | area.coords |
