Карты-изображения | htmlbook.ru
Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение.
Клиентский вариант карты-изображения
Для указания того, что изображение является картой, используется атрибут usemap тега <img>. В качестве значения указывается ссылка на описание конфигурации карты.
Рис. 1. Закладки являются ссылками, созданными с помощью карты
Чтобы сделать ссылки на закладки, показанные на рис. 1, следует использовать следующий код (пример 1).
Пример 1.
Использование карты-изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Карта-изображение</title>
</head>
<body>
<p><img src="images/map.gif" usemap="#map" alt="Навигация"></p>
<p><map name="map"> <area shape="poly" alt="Закладка 2"
coords="210,27, 203,9, 202,6, 197,2, 192,1, 120,1,
115,2, 110,6, 112,9, 119,27, 119,32, 211,32, 210,27"
href="2.html">
<area shape="poly" alt="Закладка 3"
coords="302,27, 295,9, 293,6, 289,2, 283,1, 212,1,
206,2, 202,6, 203,9, 210,27, 211,32, 284,32, 303,32,
302,27" href="3.html">
<area shape="poly" alt="Закладка 4"
coords="302,27, 303,32, 394,32, 393,27, 386,9,
382,3, 375,1, 303,1, 298,2, 293,6, 295,9, 302,27"
href="4.html">
</map></p>
</body>
</html> Для указания браузеру, что изображение является картой, применяется атрибут usemap.
Он является ссылкой
на описание конфигурации карты, которая задается тегом <map>.
Значение атрибута name данного тега
должно соответствовать имени в usemap.
Для задания активой области, являющейся ссылкой на HTML-документ,
используется тег <area>.
Атрибуты тега AREA
shape
Определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
alt
Добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится.
coords
Задает координаты активной области. Координаты отсчитываются в пикселах от левого верхнего угла изображения, которому соответствует значение 0,0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.
Для окружности задаются три числа — координаты центра круга и радиус.
<area shape="circle" coords="230,340, 100" href="circle.html">
html">Для прямоугольника — координаты левого верхнего и правого нижнего угла.
<area shape="rect" coords="24,18, 210,56" href="rect.html">
Для полигона задаются координаты его вершин (рис. 2).
Рис. 2. Координатные точки для полигона
href
Определяет адрес ссылки для области. Правила записи такие же, как и для тега <a>.
Карты-изображения позволяют создавать ссылки на разные области одного изображения. Использование этого подхода наглядней, чем обычные текстовые ссылки и позволяет применять всего один графический файл для организации ссылок. Однако не нужно считать, что карты-изображения следует включать везде, где требуются графические ссылки. Прежде всего, следует оценить все доводы за и против, а также просмотреть альтернативные варианты.
Преимущества карт-изображений
1. Карты позволяют задать любую форму области ссылки. Учитывая, что изображения
по своей природе прямоугольны, сделать графическую ссылку сложной формы, например
для указания географического района, без карт-изображений не представляется
возможным.
Как правило, в географической тематике карты-изображения и применяются
наиболее часто.
2. С одним файлом удобней работать — не приходится заботиться о состыковке отдельных фрагментов и рисунок легко можно поместить в нужное место.
Недостатки
1. Нельзя установить всплывающую подсказку и альтернативный текст для отдельных областей. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Для карт-изображений эта особенность является актуальной, ведь если отключить просмотр изображений, что делают многие пользователи, то в итоге увидим лишь один пустой прямоугольник.
2. При сложной форме области ссылки увеличивается объем кода HTML. Контур
аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует
задать две координаты, а общее количество таких точек может быть достаточно
велико.
Справедливости ради, следует отметить, что сложные формы являются частным
случаем и применяются достаточно редко.
3. С картами-изображениями нельзя сделать разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
Юзабилити
С позиции удобства пользователей, карты-изображения имеют только одно преимущество —
ссылки разнообразной формы. Это добавляет наглядность в представлении
информации — мы не ограничены прямоугольной формой ссылки и можем использовать
ссылки сложной конфигурации для своих целей. Во всех остальных отношениях от
них проку нет — обычные текстовые ссылки более информативны и им не страшно
отключение показа картинок в браузере. Тот факт, что одно изображение загружается
быстрее, чем та же картинка, но порезанная на фрагменты и сохраненная в виде
набора графических файлов, легко обходится. Каждый из таких конечных файлов
можно уменьшить, используя индивидуальные настройки оптимизации.
В итоге, общий
объем всех фрагментов будет занимать меньше места, чем одно изображение. Не
стоит сбрасывать со счетов и психологический фактор — человеку кажется,
что набор маленьких картинок загружается быстрее, чем одна большая.
Основной недочет карт — нет четко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами уже на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематичным.
Альтернативные варианты
Не всегда есть острая необходимость использовать карты-изображения, поэтому следует обратить внимание на то, что существуют и другие возможные варианты выполнения поставленной задачи.
Использование FLash
Во flash-роликах можно создавать разные области ссылок, используя возможности
векторной графики. Благодаря широким возможностям, на Flash можно создавать
потрясающие меню и средства навигации. Но тут тоже требуется осторожность, чтобы
не потерять за деревьями леса.
Разрезание изображений
Это одно из популярных средств в дизайне. Одно изображение в этом случае разрезается с помощью специальных программ на фрагменты, которые окончательно сводятся вместе, создавая иллюзию цельной картинки. Хотя области разрезания могут быть только прямоугольные, в большинстве случаев этого вполне достаточно для создания ссылок. Для каждого фрагмента можно выбрать наиболее подходящий графический формат, в котором он будет сохранен, параметры оптимизации, добавить альтернативный текст. Тогда даже при отключенном показе картинок, будут хорошо видны границы областей и замещающий изображение текст.
Резюме
Как выяснилось, причина использовать карты-изображения только одна —
сложная форма ссылок, продиктованная задачами дизайна. Типичное применение —
регионы географической карты, которые служат ссылками. Во всех остальных случаях
можно обойтись и текстовыми ссылками, а при необходимости создания графической
навигации, одно изображение для удобства можно разрезать на фрагменты.
Карты-изображения | WebReference
Карты-изображения позволяют создавать ссылки произвольной формы для разных областей одного изображения. Вначале рассмотрим плюсы и минусы данной технологии.
Плюсы
- Карты-изображения позволяют задать любую форму области ссылки, что особенно пригодится для указания географического района. Поэтому, карты-изображения применяются наиболее часто в географической тематике.
- С одной картинкой удобнее работать — не приходится заботиться о состыковке отдельных фрагментов при разрезании, и рисунок легко можно поместить в нужное место.
Минусы
- При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико.
- Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать.
- При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок.
- К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
- Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично.
С позиции удобства пользователей карты-изображения имеют только одно преимущество — включение ссылок разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей.
Карты-изображения реализуются в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Для указания того, что изображение является картой, применяется атрибут usemap элемента <img>. В качестве значения используется указатель на описание конфигурации карты, которая устанавливается с помощью элемента <map>. Значение атрибута name у <map> должно соответствовать имени в usemap. При этом значение usemap в <img> начинается с символа решётки (пример 1).
Пример 1. Создание карты-изображения
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Карта-изображение</title> </head> <body> <p><img src=»image/navigate.
png» alt=»Навигация по сайту» usemap=»#navigation»></p>
<map name=»navigation»>
<area shape=»poly» coords=»113,24,211,24,233,0,137,0″ href=»page/inform.html» alt=»Информация» title=»Информация»>
<area shape=»poly» coords=»210,24,233,0,329,0,307,24″ href=»page/activity.html» alt=»Мероприятия» title=»Мероприятия»>
<area shape=»poly» coords=»304,24,385,24,407,0,329,0″ href=»page/depart.html» alt=»Отделения» title=»Отделения»>
<area shape=»poly» coords=»384,24,449,24,473,0,406,0″ href=»page/techinfo.html» alt=»Техническая информация» title=»Техническая информация»>
<area shape=»poly» coords=»449,24,501,24,525,0,473,0″ href=»page/study.html» alt=»Обучение» title=»Обучение»>
<area shape=»poly» coords=»501,24,560,24,583,0,525,0″ href=»page/work.html» alt=»Работа» title=»Работа»>
<area shape=»poly» coords=»560,24,615,24,639,0,585,0″ href=»page/misk.html» alt=»Разное» title=»Разное»>
</map>
</body>
</html>Внутри контейнера <map> располагается один или несколько элементов <area>, они задают форму области, её координаты, устанавливают адрес документа, на который следует сделать ссылку, а также всплывающую подсказку.
Элемент <area> имеет следующие атрибуты.
- shape — определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
- alt — добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href.
- title — выводит всплывающую подсказку при наведении курсора на область.
- href — задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента <a>.
- coords — задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.
Для окружности задаются три числа — координаты центра круга и радиус.
<area shape="circle" coords="230, 340, 100" href="circle.
html" alt="">Для прямоугольника — координаты левого верхнего и правого нижнего угла.
<area shape="rect" coords="24,18, 210, 56" href="rect.html" alt="">
Для полигона задаются координаты его вершин, как показано на рис. 1.
Рис. 1. Координатные точки для полигона
См. также
- <area>
- <map>
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Круглые изображения
Ctrl+←
Таблицы
Ctrl+→
Тег карты HTML
❮ Назад Полный справочник HTML Далее ❯
Пример
Карта-изображение с интерактивными областями:
Попробуйте сами »
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Тег используется для определения карты изображения. Карта изображения — это изображение с кликабельными областями.
Связан обязательный атрибут имени элемента с атрибутом usemap и создает связь между изображением и картой.
<карта> 9Элемент 0026 содержит ряд элементов, определяющих кликабельные области на карте изображения.
Поддержка браузера
| Элемент | |||||
|---|---|---|---|---|---|
| <карта> | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| имя | имя карты | Обязательно. Указывает имя карты изображения |
Глобальные атрибуты
Тег также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег также поддерживает атрибуты событий в HTML.
Дополнительные примеры
Пример
Еще одна карта изображений с интерактивными областями:
usemap="#planetmap">
<карта
имя="карта планеты">
Попробуйте сами »
Связанные страницы
Ссылка HTML DOM: Map Object
Настройки CSS по умолчанию
Большинство браузеров отображают элемент со следующими значениями по умолчанию:
map {
: display inline ;
}
❮ Предыдущий Полный справочник HTML Далее ❯
НОВИНКА
Мы только что запустили
Видео W3Schools
Узнать
ВЫБОР ЦВЕТА
КОД ИГРЫ
Играть в игру
Лучшие учебники
Учебник HTMLУчебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.
CSS Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9004 900 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
HTML | Mapping Image - GeeksforGeeks
Href Href |
src 
wikipedia.org/wiki/Africa" 