Графические карты html. Навигационные карты. Клиентский вариант карты-изображения
Плюсы
- Карты-изображения позволяют задать любую форму области ссылки, что особенно пригодится для указания географического района. Поэтому, карты-изображения применяются наиболее часто в географической тематике.
- С одной картинкой удобнее работать - не приходится заботиться о состыковке отдельных фрагментов при разрезании, и рисунок легко можно поместить в нужное место.
Минусы
- При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико.
- Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать.
- При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок.
- К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
- Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично.
С позиции удобства пользователей карты-изображения имеют только одно преимущество - включение ссылок разнообразной формы. Это добавляет наглядность в представлении информации - мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей.
Карты-изображения реализуются в двух различных вариантах - серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Для указания того, что изображение является картой, применяется атрибут usemap
элемента
. В качестве значения используется указатель на описание конфигурации карты, которая устанавливается с помощью элемента
Пример 1. Создание карты-изображения
Внутри контейнера
Элемент имеет следующие атрибуты.
- shape - определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
- alt - добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href .
- title - выводит всплывающую подсказку при наведении курсора на область.
- href - задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента .
- coords - задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе - по вертикали. Список координат зависит от формы области.
Для окружности задаются три числа - координаты центра круга и радиус.
HTML - Урок 15. Навигационные карты - map
Многие html-страницы используют для организации ссылок так называемые карты-изображения. При таком подходе берется изображение и к различным его областям привязываются ссылки. Самым распространенным примером являются туристические карты мира, щелкаете по ее части с какой-либо страной и попадаете на страницу, посвященную этой стране.Такие карты-изображения могут быть клиентскими и серверными. Ссылки клиентских карт хранятся в самом документе и по щелчку мыши браузер сам определяет, к какой области относятся координаты этой точки и осуществляет переход по нужной ссылке.
При серверном варианте эти координаты сначала передаются на сервер, там обрабатываются специальной программой и только после этого происходит переход по ссылке.Очевидно, что клиентские навигационные карты предпочтительнее. Их мы и рассмотрим.
Для примера представим, что мы являемся магазином бытовой техники и в шапке нашего сайта у нас расположена вот такая картинка:
Сделаем из нее навигационную карту, т.е. при щелчке по холодильнику будет осуществляться переход на страницу, посвященную холодильникам (с моделями, описанием и ценами), при щелчках по пылесосу и стиральной машине на соответствующие им страницы.
Для этого нам надо описать области на этой картинке, которые будут ссылками. Для описания таких областей используются теги с единственным параметром name , который задает имя карты-ссылок и используется потом для ссылки на эту карту.
Нашу карту надо подключить к нашей картинке, для этого в тег
Для описания конкретных областей внутри тегов используются теги . Этот тег имеет следующие параметры:
- shape
- определяет форму области, может принимать следующие значения:
- rect - область в виде прямоугольника,
- circle - область в виде круга,
- poly - область в виде многоугольника,
- default - вся область.
- cootds
- задает координаты отдельной области:
- для rect задаются координаты верхнего левого и правого нижнего углов прямоугольника,
- для circle задаются координаты центра круга и радиус,
- для poly задаются координаты вершин многоугольника в нужном порядке.
- href - определяет адрес ссылки.
- target - применяется при использовании фреймов и указывает фрейм в который нужно загрузить страницу.
- alt - задает альтернативный текст для области.
Теперь надо определиться с координатами этих областей. На самом деле это самый трудоемкий процесс. В нашем примере мы решили, что области будут прямоугольными и значительно облегчили себе задачу, а представьте, сколько точек нужно задать, например, для обвода страны на карте. Тем не менее, нам надо задать координаты верхнего левого и правого нижнего углов трех прямоугольников.
Для этих целей обычно используется какая-нибудь программа, например, Image Ready, которая имеет специальный инструмент для обводки областей и автоматически строит описания этих областей. Рассмотрение работы этих программ не входит в курс HTML, поэтому здесь мы зададим координаты "на глаз". Посмотрите еще раз на наше изображение:
Ширина нашей картинки 738 пикселов, а высота - 192 пиксела. Проведем линии по границам наших областей и примерно определим координаты. Теперь мы готовы добавить эти параметры в наши теги .
Результат:
Теперь наши области стали ссылками (если подвести курсор мыши, он превращается в ладошку). На этом сайте нет страниц, посвященных холодильникам, поэтому ссылки ведут на эту же страницу, но если вы создадите нужные страницы, то при щелчке по области будет осуществляться переход.
На этом наши уроки подошли к концу. Вы ознакомились со всеми возможностями языка HTML. Для закрепления навыков ознакомьтесь с двумя уроками Делаем сайт - табличная верстка .
Напоследок, надо сказать, что в HTML есть еще два замечательных элемента - теги
Рассмотрим пример как выглядит карта изображений в html:
При наведении курсора мышкой на области зеленого прямоугольника видно, что она является ссылкой на "#green_link " (метка выбрана для примера, можно сделать ссылку на любую страницу в интернете). У красного квадрата на "#red_link ", а у синего круга соответственно на "#blue_link ".
Код этого примера:
img/primer-kartu-izobrazheniy-1.jpg ">
Как видно из примера код не такой уж и сложный. Разберем теги для создания карты ссылок изображения.
Описание примера1. Необходимо создать связку изображения
и карты
При создании карты ссылок атрибут usemap является обязательным для тега img.
2. Описание карты
3. Каждый элемент карты описывается с помощью тега , в котором указывается тип объекта с помощью атрибута shape (прямоугольник, круг или многоугольник) и его координаты.
ПримечаниеОбласти могут перекрывать друг друга. В этом случае ссылка будет вести на тот объект, что описан последним.
Атрибуты тега
1. Атрибут shape="тип_объекта" - задает тип объекта. Может принимать следующие значения:
- circle - круг;
- rect - прямоугольник;
- poly - многоугольник;
2. Атрибут coords="значения_координат" - определяет геометрическое расположение объекта и его размеры.
Точкой отчета изображения является верхний левый угол. Т.е. если вы указали отступ 10 по высоте, то это означает 10 пикселей вниз.
В зависимости от типа объекта нужно задавать значения координат в разных форматах. Все значения указывается в пикселях (пометку px писать не нужно).
- Для типа circle: coords = (x,y,r) , где x,y координаты центра круга, а r - радиус круга;
- Для типа rect: coords = (x1,y1,x2,y2) , где x1,y1 координаты левой верхней точки прямоугольника, x2,y2 - координаты нижний правой точки прямоугольника;
- Для типа poly: coords = (x1,y1,x2,y2,...,xn,yn) , последовательно указываются координаты x,y каждой точки многоугольника;
3. Атрибут href="адрес_перехода" - задает ссылка для перехода (аналогично ). Помимо адреса перехода можно использовать функции JavaScript для выполнения какого-то действия.
4. Атрибут target="значение" - аналогично тегу определяет действие перехода по ссылке. Может принимать значения:
- _blank - открывает страницу в новом окне
- _self - загружает страницу в текущее окно
- _parent - загружает страницу во фрейм-родитель
- _top - отменяет все фреймы и загружает страницу в полном окне браузера
5. Атрибут title="подсказка" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »
6. Атрибут nohref - делает область неактивной. Используется при перекрытии объектов. Используется довольно редко, но иногда это может стать незаменимым решением. Например можно сделать маленький круг внутри большого круга неактивным.
Обязательно область nohref должна идти первой.
Пример кода:
Использование карты ссылок на изображении имеет место лишь в узком круг задач. Например, при создании какой-то схемы или карты проезда. В других случаях применение карты при создании меню и других графических элементов выглядит необоснованной.
Карта изображений (Image Map) позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные Web-страницы.
Карта изображения определяется парным тегом . HTML-документ может содержать несколько карт изображения, поэтому каждой карте должно быть присвоено уникальное имя, которое определяется атрибутом name .
Карта изображения состоит из участков изображения и соответствующих им ссылок. Описывает участок изображения и ставит ему в соответствие ссылку одиночный тег .
Атрибуты тега
Координаты по умолчанию измеряются в пикселях.
Начало отсчета координат – это верхний левый угол экрана, т.е.
Примеры различных форм областей карты изображений
Если две описанных области накладываются друг на друга, то используется ссылка, принадлежащая первой из них. Эту особенность можно использовать в ситуации, когда пользователь щелкает мышью на точке, которая не принадлежит ни одной из областей карты, определив последнюю область карты как прямоугольник шириной и высотой во всю картинку.
Чтобы использовать изображение, как карту, в тег
необходимо ввести дополнительный атрибут usemap
,
определяющий имя карты изображения. Перед этим именем ставится знак "#".
Пример использования Image Map
При кликах на различные области данного изображения меняется цвет соответствующего текста.
Всем привет. С Вами Бернацкий Андрей.
В этом уроке я расскажу о том, как создавать карты-изображений в HTML .
Карта-изображения – это какая-либо картинка, может быть фотография, которая имеет несколько активных зон.
Например, при нажатии мыши на активную зону переходим на определенный URL. Если сидите в vkontakte.ru, там пример карты-изображения – это когда отмечают на фотографии, и при наведении курсора мыши на человека, отмеченного на фотографии, показывается его имя и фамилия, а при щелчке мыши происходит переход на страницу этого человека.
Сначала предлагаю Вам видео версию данного урока:
Делается это все достаточно просто. Берем любую фотографию с друзьями. Лучше вставить ее в свой отдельный блок XHTML
Я взял для примера свою фотографию. Для div
задан id
для того, что бы можно было назначить какие-нибудь отступы или еще, что нужно будет. Я в своем примере ничего задавать не буду. Главный параметр у тега img
в данном случае – это usemap="#img-nav"
. Он указывает на карту с каким именем мы будем ссылаться. XHTML
