Плюсы
- Карты-изображения позволяют задать любую форму области ссылки, что особенно пригодится для указания географического района. Поэтому, карты-изображения применяются наиболее часто в географической тематике.
- С одной картинкой удобнее работать - не приходится заботиться о состыковке отдельных фрагментов при разрезании, и рисунок легко можно поместить в нужное место.
Минусы
- При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико.
- Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать.
- При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок.
- К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
- Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично.
С позиции удобства пользователей карты-изображения имеют только одно преимущество - включение ссылок разнообразной формы. Это добавляет наглядность в представлении информации - мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей.
Карты-изображения реализуются в двух различных вариантах - серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Для указания того, что изображение является картой, применяется атрибут usemap элемента . В качестве значения используется указатель на описание конфигурации карты, которая устанавливается с помощью элемента
Пример 1. Создание карты-изображения
Внутри контейнера
Элемент имеет следующие атрибуты.
- shape - определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
- alt - добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href .
- title - выводит всплывающую подсказку при наведении курсора на область.
- href - задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента .
- coords - задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе - по вертикали. Список координат зависит от формы области.
Для окружности задаются три числа - координаты центра круга и радиус.
HTML тегиЗначение и применение
Тег
Поддержка браузерами
Тег | Opera | IExplorer | Edge |
|||
---|---|---|---|---|---|---|
Да | Да | Да | Да | Да | Да |
Атрибуты
Атрибутами тега мы указываем как координаты области (атрибут coords ), так и тип необходимой нам фигуры (атрибут shape ):
Пример использования
Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):
Выбери фигуру:
"Доступны 4 фигуры для выбора" >И так по порядку, что мы сделали в этом примере:
- Разместили изображение (тег ), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе
(необходимо обязательно перед именем указать решетку). - Размещаем изображение-карту (тег
), задаем единственный и обязательный атрибут элемента name (имя карты). Обратите внимание, что в отличие от тега мы задаем имя без решетки, в остальном они должны совпадать. - Размещаем четыре тега , которые определяют интерактивные области в изображении-карте:
- Первой мы задаем прямоугольную область (атрибут shape со значением "rect" ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
- Второй указываем круглую область (атрибут shape со значением "circle" ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x , а второе по оси y , третее определяет радиус ).
- Что касается третей и четвертой фигуры , то они составлены по принципу многоугольной области (атрибут shape со значением "poly" ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).
Обращаю Ваше внимание на то, что если у тега
Всем привет. С Вами Бернацкий Андрей.
В этом уроке я расскажу о том, как создавать карты-изображений в HTML .
Карта-изображения – это какая-либо картинка, может быть фотография, которая имеет несколько активных зон.
Например, при нажатии мыши на активную зону переходим на определенный URL. Если сидите в vkontakte.ru, там пример карты-изображения – это когда отмечают на фотографии, и при наведении курсора мыши на человека, отмеченного на фотографии, показывается его имя и фамилия, а при щелчке мыши происходит переход на страницу этого человека.
Сначала предлагаю Вам видео версию данного урока:
Делается это все достаточно просто. Берем любую фотографию с друзьями. Лучше вставить ее в свой отдельный блок XHTML
Я взял для примера свою фотографию. Для div
задан id
для того, что бы можно было назначить какие-нибудь отступы или еще, что нужно будет. Я в своем примере ничего задавать не буду. Главный параметр у тега img
в данном случае – это usemap="#img-nav"
. Он указывает на карту с каким именем мы будем ссылаться. XHTML
Идем по порядку. Параметр shape
тега
— показывает, какого типа будет наша область. На то, какая будет наша область, показывает значение параметра shape
: rect – указывает, что область будет в виде прямоугольника. poly – произвольный многоугольник. circle – область будет в виде круга. Параметр coords
содержит координаты нашей области. Если shape="rect"
, то указываются координаты левого верхнего угла и правого нижнего. То есть первая пара чисел указывает на левый верхний, а вторая пара чисел – на правый нижний угол. Если shape="poly"
, то указываются координаты каждой вершины многоугольника. shape="poly" coords="80,100,150,100,210,40,300,40,300,110"
в данном случае координаты первой вершины будут 80,100, второй 150,100, третий — 210,40, четвертой — 300,40, пятой — 300,110. Если shape="circle"
, то указываем координаты центра и радиус. shape="circle"
coords="300,300,100" здесь координаты центра 300,300 и радиус 100. title="Andrey" alt="Andrey"
уже знакомые параметры. Останавливаться на них не буду. Полный код представлен ниже: XHTML
Влад Мержевич Карты-изображения позволяют привязывать ссылки к разным областям
одного изображения. Реализуется в двух различных вариантах — серверном
и клиентском. В случае применения серверного варианта браузер посылает
запрос на сервер для получения адреса выбранной ссылки и ждет ответа
с требуемой информацией. Такой подход требует дополнительного времени
на ожидание результата и отдельные файлы для каждой карты-изображения. В клиентском варианте карта располагается в том же HTML-документе,
что и ссылка на изображение. Для указания того, что изображение является картой, используется
атрибут usemap
тега
.
В качестве значения указывается ссылка на описание конфигурации
карты. Пример 1. Использование карты-изображения
Для указания браузеру, что изображение является картой, применяется атрибут usemap
. Он является ссылкой
на описание конфигурации карты, которая задается тегом Определяет форму активной области. Форма может быть в виде окружности (circle
),
прямоугольника (rect
), полигона (poly
). Добавляет альтернативный текст для каждой области. Служит лишь комментарием
для ссылки, поскольку на экран не выводится. Задает координаты активной области. Координаты отсчитываются в пикселах от
левого верхнего угла изображения, которому соответствует значение 0,0. Первое
число является координатой по горизонтали, второе — по вертикали. Список
координат зависит от формы области. Для окружности задаются три числа — координаты центра круга и радиус.
Для прямоугольника — координаты левого верхнего и правого нижнего
угла.
Для полигона задаются координаты его вершин (рис. 2). Рис. 2. Координатные точки для полигона Карты-изображения позволяют создавать ссылки на разные области одного изображения.
Использование этого подхода наглядней, чем обычные текстовые ссылки и позволяет
применять всего один графический файл для организации ссылок. Однако не нужно
считать, что карты-изображения следует включать везде, где требуются графические
ссылки. Прежде всего, следует оценить все доводы за и против, а также просмотреть
альтернативные варианты. 1. Карты позволяют задать любую форму области ссылки. Учитывая, что изображения
по своей природе прямоугольны, сделать графическую ссылку сложной формы, например
для указания географического района, без карт-изображений не представляется
возможным. Как правило, в географической тематике карты-изображения и применяются
наиболее часто. 2. С одним файлом удобней работать — не приходится заботиться о состыковке
отдельных фрагментов и рисунок легко можно поместить в нужное место. 1. Нельзя установить всплывающую подсказку и альтернативный текст для отдельных
областей. Альтернативный текст позволяет получить текстовую информацию о рисунке
при отключенной в браузере загрузке изображений. Поскольку загрузка изображений
происходит после получения браузером информации о нем, то замещающий рисунок
текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
Для карт-изображений эта особенность является актуальной, ведь если отключить
просмотр изображений, что делают многие пользователи, то в итоге увидим лишь
один пустой прямоугольник. 2. При сложной форме области ссылки увеличивается объем кода HTML. Контур
аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует
задать две координаты, а общее количество таких точек может быть достаточно
велико. Справедливости ради, следует отметить, что сложные формы являются частным
случаем и применяются достаточно редко. 3. С картами-изображениями нельзя сделать разные эффекты, которые доступны
при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная
анимация, индивидуальная оптимизация картинок для их быстрой загрузки. С позиции удобства пользователей, карты-изображения имеют только одно преимущество —
ссылки разнообразной формы. Это добавляет наглядность в представлении
информации — мы не ограничены прямоугольной формой ссылки и можем использовать
ссылки сложной конфигурации для своих целей. Во всех остальных отношениях от
них проку нет — обычные текстовые ссылки более информативны и им не страшно
отключение показа картинок в браузере. Тот факт, что одно изображение загружается
быстрее, чем та же картинка, но порезанная на фрагменты и сохраненная в виде
набора графических файлов, легко обходится. Каждый из таких конечных файлов
можно уменьшить, используя индивидуальные настройки оптимизации. В итоге, общий
объем всех фрагментов будет занимать меньше места, чем одно изображение. Не
стоит сбрасывать со счетов и психологический фактор — человеку кажется,
что набор маленьких картинок загружается быстрее, чем одна большая. Основной недочет карт — нет четко выделенных границ ссылок. Поэтому
эти границы приходится выделять разными средствами уже на изображении. Если
рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок
становится весьма проблематичным. Не всегда есть острая необходимость использовать карты-изображения, поэтому
следует обратить внимание на то, что существуют и другие возможные варианты
выполнения поставленной задачи. Во flash-роликах можно создавать разные области ссылок, используя возможности
векторной графики. Благодаря широким возможностям, на Flash можно создавать
потрясающие меню и средства навигации. Но тут тоже требуется осторожность, чтобы
не потерять за деревьями леса. Это одно из популярных средств в дизайне. Одно изображение в этом случае разрезается
с помощью специальных программ на фрагменты, которые окончательно сводятся вместе,
создавая иллюзию цельной картинки. Хотя области разрезания могут быть только
прямоугольные, в большинстве случаев этого вполне достаточно для создания ссылок.
Для каждого фрагмента можно выбрать наиболее подходящий графический формат,
в котором он будет сохранен, параметры оптимизации, добавить альтернативный
текст. Тогда даже при отключенном показе картинок, будут хорошо видны границы
областей и замещающий изображение текст. Как выяснилось, причина использовать карты-изображения только одна —
сложная форма ссылок, продиктованная задачами дизайна. Типичное применение —
регионы географической карты, которые служат ссылками. Во всех остальных случаях
можно обойтись и текстовыми ссылками, а при необходимости создания графической
навигации, одно изображение для удобства можно разрезать на фрагменты. Такой
подход создаст больше удобства пользователям, особенно тем, которые в силу разных
причин отключают показ изображений в браузере. О них тоже нужно помнить.
Клиентский вариант карты-изображения
Атрибуты тега AREA
shape
alt
coords
href
Преимущества карт-изображений
Недостатки
Юзабилити
Альтернативные варианты
Использование FLash
Разрезание изображений
Резюме