Атрибут coords
Атрибут / параметр coords (от англ. » coord inate s » ‒ «координаты») задаёт координаты активной области карты-изображения. Точкой отсчёта координат выступает левый верхний угол карты-изображения.
Условия использования
В зависимости от типа фигуры (задаётся атрибутом « shape ») активной области задаются определённые координаты и параметры области. (Расчёт координат ведётся в пикселях.)
Поддержка браузерами
Спецификация
| Верс. | Раздел | |
|---|---|---|
| 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 |
Окружность [ shape=»circle» ]
х,y,r Задаются « x » и « y » координаты центра окружности и значение радиуса (« r »).
Значение радиуса может быть выражено в процентах. В этом случае вычисление радиуса происходит по координате центра окружности с наименьшим значение (то есть за основу берётся либо значение « x », либо значение « y »).
| x | y | r (px) | r (%) |
|---|---|---|---|
| 120 | 99 | 71 | 71.72 |
Радиус в пикселях --> Радиус в процентах -->
Многоугольник [ 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 |
| 1 | 2 | 3 | 4 | |
|---|---|---|---|---|
| x | 35 | 80 | 172 | 217 |
| y | 150 | 63 | 63 | 150 |
| 1 | 2 | 3 | 4 | 5 | |
|---|---|---|---|---|---|
| x | 19 | 68 | 156 | 220 | 109 |
| y | 130 | 21 | 59 | 155 | 170 |
Html area coords как узнать координату на рисунке
Тег (от англ. area — область) определяет активные области изображения, которые являются ссылками.
Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Элемент задаёт форму области, её размеры, устанавливает адрес документа, на который следует сделать ссылку. всегда располагается в контейнере , который связывает координаты областей с изображением.
Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.
Демо¶
Изображения и мультимедиа
Синтаксис¶
1 2 3
map> area href="адрес" /> map> Закрывающий тег не требуется.
Атрибуты¶
Альтернативный текст для области изображения.
Координаты активной области.
Задаёт адрес документа, на который следует перейти.
Указывает язык документа, на который ведёт ссылка.
Имя фрейма, куда браузер будет загружать документ.
Устанавливает MIME-тип документа, на который ведёт ссылка.
Также для этого элемента доступны универсальные атрибуты.
alt¶
Атрибут alt устанавливает альтернативный текст для области изображения. Такой текст не отображается в браузере, но поисковые системы его могут прочитать.
Синтаксис
area alt="" /> Значения
Любая подходящяя текстовая строка.
Значение по умолчанию
coords¶
Атрибут coords устанавливает координаты области, она также называется «горячая область». Такая область может быть ссылкой на файл или связана с действием, определяемым скриптом.
Значения координат представляют собой набор чисел, разделённых запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде HTML выше.
Синтаксис
1 2 3
area coords=", , , . " /> Значения
Набор координат определяется формой «горячей области», которая задается атрибутом shape . Отсчёт координат обычно ведётся от левого верхнего угла изображения и указывается в пикселях.
Для прямоугольника ( shape=»rect» ) определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.
Для окружности ( shape=»circle» ) определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.
Для полигона (многоугольника) ( shape=»poly» ) последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рис. 3.
Значение по умолчанию
href¶
Атрибут href задаёт адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущую вкладку браузера, однако это поведение можно изменить с помощью атрибута target .
Синтаксис
area href="" /> Значения
В качестве значения принимается полный или относительный путь к файлу, а также указатель на функцию JavaScript.
Значение по умолчанию
hreflang¶
Атрибут hreflang указывает язык документа, на который ведёт ссылка активной области изображения.
Синтаксис
1 2 3
map> area href="" hreflang="" /> map> Значения
Значение по умолчанию
shape¶
Атрибут shape определяет форму «горячей области», координаты которой задаются с помощью атрибута coords .
Синтаксис
area shape="circle | default | poly | rect" /> Значения
Область в виде окружности.
Указывает всю область.
Область в виде полигона (многоугольника).
Значение по умолчанию
target¶
Атрибут target определяет, как открывать ссылки — в новой вкладке, в текущей вкладке или в окне фрейма.
Синтаксис
area target="" /> Значения
Загружает страницу в новую вкладку браузера.
Загружает страницу в текущую вкладку.
Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self .
Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .
Значение по умолчанию
type¶
Атрибут type устанавливает MIME-тип документа, на который ведёт ссылка. Этот атрибут носит рекомендательный характер и может использоваться для стилизации ссылок с заданным типом документа. Атрибут type должен добавляться только при наличии атрибута href .
Синтаксис
area href="" type="" /> Значения
Значение по умолчанию
Спецификации¶
- WHATWG HTML Living Standard
- HTML5
- HTML 4.01 Specification
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
html> head> meta charset="utf-8" /> title>AREAtitle> style> #title line-height: 0; /* Изменяем межстрочное расстояние */ > #title img border: none; /* Убираем рамку вокруг изображения */ > style> head> body> div id="title"> img src="https://via.placeholder.com/640x158.png?text=xsltdev.ru" width="640" height="158" alt="Детский образовательный центр" /> br />br /> img src="https://via.placeholder.com/640x30.png?text=xsltdev.ru" width="640" height="30" alt="Навигация по сайту" usemap="#Navigation" /> div> p> map name="Navigation"> area shape="poly" coords="113,24,211,24,233,0,137,0" href="page/inform.html" alt="Информация" /> area shape="poly" coords="210,24,233,0,329,0,307,24" href="page/activity.html" alt="Мероприятия" /> area shape="poly" coords="304,24,385,24,407,0,329,0" href="page/depart.html" alt="Отделения" /> area shape="poly" coords="384,24,449,24,473,0,406,0" href="page/techinfo.html" alt="Техническая информация" /> area shape="poly" coords="449,24,501,24,525,0,473,0" href="page/study.html" alt="Обучение" /> area shape="poly" coords="501,24,560,24,583,0,525,0" href="page/work.html" alt="Работа" /> area shape="poly" coords="560,24,615,24,639,0,585,0" href="page/misk.html" alt="Разное" /> map> p> body> html> Атрибут coords
Устанавливает координаты области, она также называется «горячая область». Такая область может быть ссылкой на файл или связана с действием, определяемым скриптом.
Значения координат представляют собой набор чисел, разделённых запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде HTML выше.
Синтаксис
Значения
Набор координат определяется формой «горячей области», которая задаётся атрибутом shape. Отсчёт координат обычно ведётся от левого верхнего угла изображения и указывается в пикселях.
Для прямоугольника ( shape=»rect» ) определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.
Рис. 1. Координаты для прямоугольника
Для окружности ( shape=»circle» ) определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.
Рис. 2. Координаты для окружности
Для полигона (многоугольника) ( shape=»poly» ) последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2,…, Xn, Yn), как показано на рис. 3.
Рис. 3. Координаты для полигона
Значение по умолчанию
Пример
Браузеры
| 3 | 12 | 1 | 15 | 1 | 1 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Html area coords как узнать координату на рисунке
Размечает картинку невидимыми областями.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 15 ноября 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
С помощью тега можно сделать красивую навигацию, разметив обычную картинку областями и указав для них ссылки.
не знает как жить без тега-контейнера ��
Пример
Скопировать ссылку «Пример» Скопировано
Элементарная навигация по трём разделам Доки:
map name="doka"> area shape="rect" coords="47,4,319,64" href="/html/" target="_blank" alt="HTML"> area shape="rect" coords="46,69,318,129" href="/css/" target="_blank" alt="CSS"> area shape="rect" coords="46,133,318,193" href="/js/" target="_blank" alt="JS"> map> img usemap="#doka">
Как пишется
Скопировать ссылку "Как пишется" Скопировано
Тег помещаем внутрь и прописываем два обязательных атрибута:
- shape определяет форму области. Можно указать circle для круга, poly для произвольной формы или rect для прямоугольника (он же форма по умолчанию);
- coords задаёт координаты области. Для круга проще всего: x , y , R , где R — радиус круга, для прямоугольника формат x1 , y1 , x2 , y2 , а для произвольной формы x1 , y1 , x2 , y2 , . . . , xn , yn . Поскольку у произвольной формы может быть много точек, будьте готовы к длинному коду ��
Но пока что область «мёртвая», то есть её нельзя выбрать. Чтобы исправить это, добавим следующие атрибуты:
- href для адреса ссылки;
- target для способа эту ссылку открыть;
- alt для альтернативной подписи.
А ещё можно указать:
- download для скачивания файла по ссылке;
- ping для перечисления URL-адресов ресурсов, которым нужно уведомление о переходе пользователя по гиперссылке;
- rel для выбора типа ссылки;
- referrerpolicy определяет, как JavaScript функция fetch устанавливает HTTP-заголовок Referer ��
Если атрибут href отсутствует, то все остальные атрибуты, кроме shape и coords , должны быть опущены.
Как понять
Скопировать ссылку "Как понять" Скопировано
Тег создаёт на картинке невидимую область по координатам, а потом присваивает ей ссылку. Жмём на область — переходим по ссылке.
Подсказки
Скопировать ссылку "Подсказки" Скопировано
�� Самые ёмкие в записи формы — прямоугольник и круг, поскольку они требуют меньше всего координат. Если вам плохо от огромного кода, лучше отказаться от произвольных областей.
�� Не стоит загружать в фотошоп картинку и выискивать каждую точку координат. В интернете полно бесплатных ресурсов, где можно загрузить изображение и просто кликать мышью по точкам, а программа выдаст готовый код! Искать можно так: «генератор координат HTML».
�� С помощью можно разметить на картинке отдельные предметы и сделать целый каталог:
href="https://ru.wikipedia.org/wiki/ВАЗ-2107" target="_blank" alt="Машина"> href="https://ru.wikipedia.org/wiki/Мыло" target="_blank" alt="Мыло"> href="https://ru.wikipedia.org/wiki/Пять_рублей" target="_blank" alt="Монета"> map name="catalog"> area shape="rect" coords="393,193,2,0" href="https://ru.wikipedia.org/wiki/ВАЗ-2107" target="_blank" alt="Машина"> area shape="poly" coords="427,47,427,124,474,208,659,149,659,59,601,0" href="https://ru.wikipedia.org/wiki/Мыло" target="_blank" alt="Мыло"> area shape="circle" coords="751,109,58" href="https://ru.wikipedia.org/wiki/Пять_рублей" target="_blank" alt="Монета"> map> img usemap="#catalog">