- HTML :: Карты-изображения
- Атрибуты ismap и usemap
- Серверные карты-изображения
- Быстрый переход к другим страницам
- Html map area poly coords
- Кратко
- Пример
- Как пишется
- Как понять
- Подсказки
- Атрибут coords
- Условия использования
- Поддержка браузерами
- Спецификация
- Значения
- Правильный четырёхугольник [ shape="rect" ]
- Окружность [ shape="circle" ]
- Многоугольник [ shape="poly" ]
HTML :: Карты-изображения
Изображения на веб-странице можно использовать в качестве гиперссылок, для этого нужно поместить тег между открывающим и закрывающим тегами гиперссылки. В результате при клике по любой области данного изображения пользователь перейдет по адресу, указанному в атрибуте href элемента «a». Однако иногда возникает потребность в том, чтобы различные области (части) одного и того же изображения являлись отдельными гиперссылками, ведущими в совершенно разные места. В этом случае приходится использовать карту-изображение, которое как раз и позволяет хранить в себе сразу несколько гиперссылок.
(от англ. image map) – это изображение, содержащее специальные активные зоны, являющиеся гиперссылками.
Атрибуты ismap и usemap
Карты-изображения применяются в двух вариантах: и , которые задаются, соответственно, атрибутами ismap и usemap элемента «img» . Первый атрибут является логическим и не принимает значений, являясь индикатором, а второй – в качестве значения принимает имя специального элемента «map» , перед которым ставится знак решетки. Рассмотрим эти два вида графических карт подробнее.
Серверные карты-изображения
Серверные карты-изображения строятся следующим образом: создается элемент «a» , атрибут href которого указывает адрес программы-обработчика, расположенной на сервере, затем внутри гиперссылки «a» располагается элемент «img» , у которого указывается атрибут ismap . При нажатии по какой-либо активной зоне такого изображения, на сервер будут переданы координаты x и y щелчка мыши, которые отсчитываются от верхнего левого угла изображения. Координаты отправляются на сервер методом GET , т.е. передаются вместе с адресом серверной программы-обработчика, указанного в атрибуте href гиперссылки, непосредственно в самом адресе и перечисляются через запятую после знака вопроса. На сервере программа-обработчик принимает координаты и решает, какой документ необходимо отправить в ответ. Рассмотрим конкретный код, показанный в примере №1 . Отображение соответствующей страницы в браузере показано на рис. №2 .
Это изображение – серверная карта.
Кликните по нужной фигуре, чтобы перейти
на страницу ее описания.
Пример №1. Формирование серверной карты-изображения
Рис. №2. Отображение страницы с использованием серверной карты-изображения браузером
Если мы кликнем, например, по прямоугольнику, на сервер будут переданы координаты x и y клика. Программа проверит в какой диапазон попадают данные координаты и после проверки вернет нам веб-страницу с описанием свойств прямоугольника.
Клиентские карты-изображения, теги и
Клиентские карты-изображения, наоборот, располагаются полностью на компьютере пользователя и строятся с использованием элементов «map» и «area» . Элемент «map» формируется парным тегом (от англ. map – карта). Он связывается с картой-изображением через свой атрибут name . Значение данного атрибута должно совпадать со значением атрибута usemap (знак решетки при этом нужно опускать) соответствующего элемента «img» , выступающего в роли клиентской карты-изображения. Кроме того, элемент «map» является контейнером для хранения элементов «area» , каждый из которых определяет активную область карты-изображения и превращает их в гиперссылки. Формируется элемент «area» при помощи одиночного тега (от англ. area – область, регион), т.е. является пустым элементом (см. пример №3 ).
Это изображение – клиентская графическая карта.
Кликните по нужной фигуре, чтобы перейти
на страницу ее описания.
Пример №3. Формирование клиентской карты-изображения
Поскольку элемент «area» служит для создания гиперссылок, то он обладает всеми атрибутами элемента «a» : href , target , download , rel , hreflang , type (смотреть). Кроме того, он связан с изображением и служит для определения его активных зон, поэтому обладает еще и дополнительными атрибутами: alt , shape и coords (от англ. coordinates).
Атрибут alt задает альтернативный текст для данной активной зоны изображения.
Атрибут shape определяет форму данной активной зоны изображения, а coords задает для нее координаты в пикселях, которые отсчитываются от верхнего левого угла изображения, где считается, что x=0px и y=0px . В качестве значений shape принимает:
- «circle» – область в виде окружности; через запятую указываются координаты x и y центра окружности, а также ее радиус, например, coords=»150, 200, 120″ ;
- «default» – вся область изображения;
- «poly» (от англ. polygon) – область в виде произвольного многоугольника; через запятую указываются координаты x , y его вершин, начиная с любой и заканчивая обход в стартовой точке, например, coords=»50,70, 64,82, 85,82, 130,60, 50,70″ ;
- «rect» (от англ. rectangle) – область в виде прямоугольника; через запятую указываются координаты x , y левого верхнего и правого нижнего углов, например, coords=»50,70, 154,213″ .
Внешне результат отображения страниц, содержащих одно и то же изображение, но используемое в одном случае, как серверная карта-изображение, а в другом, как клиентская карта, будет одинаков. Результат использования также будет выглядеть для пользователя практически одинаково. Тогда возникает вопрос, зачем применять два вида карт? Все очень просто и зависит от ситуации. Если изображение небольшое, например, графическое меню, то конечно же используется клиентская карта-изображение, поскольку изображение быстро загружается на компьютер пользователя, и отсутствует необходимость каждый раз при нажатии на активную зону посылать запрос на сервер, тем самым дополнительно загружая его и заставляя ждать ответа. Однако, если карта очень большая, например, представляет спутниковый снимок города, и при выборе объектов на этом снимке должна загружаться отдельная страница с описанием и фото данного объекта, то загружать ее на компьютер пользователя становится проблематично, т.к. размеры таких карт могут исчисляться мегабайтами одних только координат.
В конце добавим, что карта может быть поделена на активные зоны произвольным образом, но могут оставаться и непокрытые места. При клике по таким неактивным областям ничего происходить не будет.
Еще один пример карты-изображения можно посмотреть на соответствующей странице нашего учебного сайта №1 .
Быстрый переход к другим страницам
html.okpython.net Copyright © 2016-2023.
Html map area poly coords
Размечает картинку невидимыми областями.
Время чтения: меньше 5 мин
Обновлено 7 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
С помощью тега можно сделать красивую навигацию, разметив обычную картинку областями и указав для них ссылки.
не знает как жить без тега-контейнера 😥
Пример
Скопировать ссылку «Пример» Скопировано
Элементарная навигация по трём разделам Доки:
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"> Атрибут 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 | 2 | |
|---|---|---|
| x | 27 | 229 |
| y | 62 | 161 |
Окружность [ shape="circle" ]
Значение радиуса может быть выражено в процентах. В этом случае вычисление радиуса происходит по координате центра окружности с наименьшим значение (то есть за основу берётся либо значение « 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 |