Атрибут shape (от английского shape, «форма») задаёт форму кликабельной области на картинке с клиентской картой: прямоугольник, круг, многоугольник или вся картинка. Закрывающий тег для него не нужен: атрибут пишется внутри открывающего тега <area>, а сам area закрывающего тега не имеет.
Значений четыре: rect, circle, poly и default. Главное, что нужно знать сразу: ошибка в этом атрибуте не вызывает никаких сообщений, браузер тихо читает значение как rect. Все результаты ниже я проверил кликами по настоящим областям в браузере, на котором я проверял.
<map name="m">
<area shape="circle" coords="100,50,30"
href="/room-1" alt="Комната 1">
</map>В этой статье
- Что такое атрибут shape в HTML и зачем он нужен
- Для каких тегов работает shape: area и устаревший a
- Какие значения принимает shape: rect, circle, poly и default
- Что будет при пропуске, опечатке и лишних пробелах
- Значение default: запасная область на всю картинку
- Какую форму выбрать для области
- Shape в JavaScript: свойство shape
- Частые ошибки в атрибуте shape
- Шпаргалка по атрибуту shape
Что такое атрибут shape в HTML и зачем он нужен
Карта изображения делит картинку на кликабельные части. Каждая часть это <area> внутри <map>. Числа, которые описывают место области, записывает coords, а shape говорит, как эти числа читать: как углы прямоугольника, как центр с радиусом или как вершины. Карту к картинке подключает usemap.
Без shape одни и те же числа означают разное, поэтому эти два атрибута всегда пишут вместе.
Для каких тегов работает shape: area и устаревший a
Всерьёз shape нужен только тегу <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" shape="rect" coords="0,0,50,25"> |
Какие значения принимает shape: rect, circle, poly и default
Каждое значение ждёт своих чисел в coords. Подробно о числах рассказывает статья про coords, а здесь краткая сводка.
| Значение | Что в coords | Пример записи |
|---|---|---|
rect | Четыре числа: левый верхний и правый нижний углы | <area shape="rect" coords="50,20,150,80"> |
circle | Три числа: центр и радиус | <area shape="circle" coords="100,50,30"> |
poly | Пары чисел: вершины по порядку, не меньше трёх | <area shape="poly" coords="100,10,180,90,20,90"> |
default | Ничего: область занимает всю картинку | <area shape="default" href="/a" alt="A"> |
rectangle, circ, polygon | Старые записи: читаются как rect, circle и poly | <area shape="polygon" coords="100,10,180,90,20,90"> |
Регистр не важен: Circle, CIRCLE и POLYGON работают так же, как записи из таблицы.
Пример: одни и те же числа, разные формы
Числа везде одинаковые: 50, 20, 150, 80. Меняется только форма. Кликните по картинке в центре и в углу.
Результат показывает ваш браузер через Navigation API. Если он не поддерживается, демонстрация об этом сообщит.
Что будет при пропуске, опечатке и лишних пробелах
Если значение не распознано, браузер не показывает ошибку, а читает область как прямоугольник. Для четырёх чисел это может сойти за правду, для трёх уже нет.
| Запись | Что получилось | Пример записи |
|---|---|---|
circle | Круг работает | shape="circle" |
Circle, CIRCLE | Круг работает: регистр не важен | shape="CIRCLE" |
circ | Круг работает: старый псевдоним | shape="circ" |
circle с пробелом в начале | Значение неверное, прочитано как rect, области нет | shape=" circle" |
circle с пробелом в конце | То же самое | shape="circle " |
cirle (опечатка) | Прочитано как rect, трёх чисел мало, области нет | shape="cirle" |
| Пустое значение | Прочитано как rect, области нет | shape="" |
| Атрибута нет | Прочитано как rect, области нет | <area coords="100,50,30" href="/a"> |
Тихая ошибка опаснее громкой: страница выглядит нормально, а область просто не нажимается. Поэтому после записи областей их нужно проверить кликом.
Пример: какие записи shape распознаёт браузер
Выберите запись. Кликните в центр круга, потом в угол картинки. Значение area.shape показано как записано.
Результат показывает ваш браузер через Navigation API. Если он не поддерживается, демонстрация об этом сообщит.
Значение default: запасная область на всю картинку
Значение default занимает всю картинку. Его используют как запасную область: везде, где не попала никакая другая, срабатывает она.
| Ситуация | Что получилось | Пример записи |
|---|---|---|
Одна область default | Клик в любом месте открывает ссылку | <area shape="default" href="/a" alt="A"> |
default и rect, клик внутри прямоугольника | Открылась ссылка rect | <area shape="rect" coords="50,20,150,80" href="/rect"> |
default и rect, клик снаружи | Открылась ссылка default | <area shape="default" href="/def"> |
default записан выше rect | Результат тот же: конкретная область побеждает | <area shape="default" href="/def"> |
default с числами в coords | Числа игнорируются, область на всю картинку | <area shape="default" coords="50,20,150,80" href="/a"> |
Порядок записи имеет значение для пересекающихся областей других форм, как описано в статье про coords, но для default он не важен.
Что требует стандарт и что делает браузер
Требования к записи собраны, например, на вики W3C по тегу area. Браузер прощает многое из того, что стандарт запрещает. Это удобно при чтении чужого кода, но писать надёжнее по стандарту.
| Форма | Что требует стандарт | Что я увидел в браузере |
|---|---|---|
default | У такой области не должно быть coords | Числа игнорируются, область на всю картинку |
rect | Левая граница меньше правой, верхняя меньше нижней | Перепутанные углы поменялись местами, область обычная |
circle | Ровно три числа, радиус не отрицательный | Четвёртое число отброшено; радиус 0 или отрицательный даёт пустую область |
poly | Чётное количество чисел, не меньше шести | Нечётное последнее число отброшено; меньше трёх вершин даёт пустую область |
Какую форму выбрать для области
Форма зависит от того, что именно должно нажиматься. Это рекомендации по смыслу, а не результаты замеров.
| Что нужно описать | Какое значение | Пример записи |
|---|---|---|
| Прямоугольник: кнопка, окно, вывеска | rect | <area shape="rect" coords="10,10,60,40" href="/a"> |
| Круглый объект: колесо, точка на карте | circle | <area shape="circle" coords="100,50,20" href="/a"> |
| Сложный контур: страна, этаж с углами | poly | <area shape="poly" coords="10,10,90,10,50,80" href="/a"> |
| Всё остальное на картинке | default | <area shape="default" href="/home" alt="На главную"> |
Если контур очень сложный и области нужно часто менять, подумайте, не лучше ли для него обычные ссылки, расположенные поверх картинки.
Shape в JavaScript: свойство shape
В скрипте атрибут доступен как свойство shape. Оно возвращает значение так, как оно записано, без исправлений: ни регистр, ни пробелы, ни неверное значение браузер не меняет. Этим оно отличается, например, от свойства decoding, которое приводит регистр к нижнему.
| Действие | Что получилось | Пример записи |
|---|---|---|
| Чтение без атрибута | Вернулась пустая строка | area.shape |
| Запись допустимого значения | Прочитать можно ту же строку | area.shape = 'rect' |
| Запись с другим регистром | Вернулось как записано: RECT | area.shape = 'RECT' |
| Запись неверного значения | Вернулось как записано: junk | area.shape = 'junk' |
| Запись с пробелом | Пробел сохранён в свойстве | area.shape = ' circle' |
Значит, по значению свойства нельзя понять, как браузер прочитал форму: junk и rect дадут одинаковую область, а свойство будет разным.
const area = document.querySelector('area');
area.shape = 'circle';
area.coords = '100,50,30';
console.log(area.shape); // "circle"Частые ошибки в атрибуте shape
Большинство ошибок связано с тем, что неверное значение не вызывает сообщений.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
shape="cirle" | Читается как rect, области нет | Проверить написание |
shape=" circle" | Пробел делает значение неверным | Писать без пробелов |
Нет атрибута shape | Область читается как rect | Всегда писать форму явно |
shape="circle" с четырьмя числами | Берутся первые три | Записать центр и радиус |
shape="poly" с двумя вершинами | Области нет | Записать не меньше трёх вершин |
shape="rect" с тремя числами | Области нет | Записать четыре числа |
shape="default" с числами | Числа игнорируются | Убрать coords |
Путают default со значением по умолчанию | Это отдельная форма на всю картинку, а значением по умолчанию служит rect | Использовать default только как запасную область |
Ждут от area.shape исправленного значения | Свойство возвращает записанное как есть | Не опираться на него для проверки |
Область без href | Клика нет | Добавить адрес |
| Значение вне списка | Тихо читается как rect | Писать только rect, circle, poly, default |
Шпаргалка по атрибуту shape
Всё главное из статьи в одной таблице.
| Задача | Как записать | Пример записи |
|---|---|---|
| Прямоугольник | Значение rect и четыре числа | <area shape="rect" coords="50,20,150,80"> |
| Круг | Значение circle и три числа | <area shape="circle" coords="100,50,30"> |
| Многоугольник | Значение poly и пары чисел | <area shape="poly" coords="100,10,180,90,20,90"> |
| Вся картинка | Значение default без чисел | <area shape="default" href="/a" alt="A"> |
| Регистр | Не важен | shape="Circle" |
| Пробелы | Недопустимы | shape="circle" |
| Если не распознано | Читается как rect | shape="cirle" |
| Прочитать из скрипта | Свойство shape | area.shape |
