HTML - Урок 15. Навигационные карты - map

Такие карты-изображения могут быть клиентскими и серверными. Ссылки клиентских карт хранятся в самом документе и по щелчку мыши браузер сам определяет, к какой области относятся координаты этой точки и осуществляет переход по нужной ссылке.

При серверном варианте эти координаты сначала передаются на сервер, там обрабатываются специальной программой и только после этого происходит переход по ссылке.Очевидно, что клиентские навигационные карты предпочтительнее. Их мы и рассмотрим.

Для примера представим, что мы являемся магазином бытовой техники и в шапке нашего сайта у нас расположена вот такая картинка:

Сделаем из нее навигационную карту, т.е. при щелчке по холодильнику будет осуществляться переход на страницу, посвященную холодильникам (с моделями, описанием и ценами), при щелчках по пылесосу и стиральной машине на соответствующие им страницы.

Для этого нам надо описать области на этой картинке, которые будут ссылками. Для описания таких областей используются теги с единственным параметром name , который задает имя карты-ссылок и используется потом для ссылки на эту карту.

• shape - определяет форму области, может принимать следующие значения:
  • rect - область в виде прямоугольника,
  • circle - область в виде круга,
  • poly - область в виде многоугольника,
  • default - вся область.
• cootds - задает координаты отдельной области:
  • для rect задаются координаты верхнего левого и правого нижнего углов прямоугольника,
  • для circle задаются координаты центра круга и радиус,
  • для poly задаются координаты вершин многоугольника в нужном порядке.
• href - определяет адрес ссылки.
• target - применяется при использовании фреймов и указывает фрейм в который нужно загрузить страницу.
• alt - задает альтернативный текст для области.

Для этих целей обычно используется какая-нибудь программа, например, Image Ready, которая имеет специальный инструмент для обводки областей и автоматически строит описания этих областей. Рассмотрение работы этих программ не входит в курс HTML, поэтому здесь мы зададим координаты "на глаз". Посмотрите еще раз на наше изображение:

Ширина нашей картинки 738 пикселов, а высота - 192 пиксела. Проведем линии по границам наших областей и примерно определим координаты. Теперь мы готовы добавить эти параметры в наши теги .

Теперь наши области стали ссылками (если подвести курсор мыши, он превращается в ладошку). На этом сайте нет страниц, посвященных холодильникам, поэтому ссылки ведут на эту же страницу, но если вы создадите нужные страницы, то при щелчке по области будет осуществляться переход.

На этом наши уроки подошли к концу. Вы ознакомились со всеми возможностями языка HTML. Для закрепления навыков ознакомьтесь с двумя уроками Делаем сайт - табличная верстка .

Напоследок, надо сказать, что в HTML есть еще два замечательных элемента - теги

Тег

Внутри контейнера

• один или более элементов < >. Эти элементы не имеют содержимого, но определяют геометрические регионы карты изображений и гиперссылки, ассоциированные с каждым регионом
• содержимое уровня блока. Это содержимое должно включать < >, которые специфицируют геометрические регионы карты и ссылки, ассоциированные с каждым регионом

Если тег

Если регионы перекрываются, элемент, определяющий регион, который появился раньше в документе, имеет приоритет.

HTML : 3.2 | 4 / XHTML : 1.0 | 1.1

Синтаксис

Атрибуты

class	определяет имя используемого класса
dir	определяет направление символов: ltr — слева направо rtl — справа налево
id	уникальный идентификатор
lang	определяет язык отображаемого документа
name	имя карты изображения. Используется, как значение параметра usemap тега
onblur	потеря фокуса элементом
onclick	щелчок на элементе
ondblclick	двойной щелчок на элементе
onfocus	получение фокуса элементом
onkeydown	нажатие клавиши, когда элемент имеет фокус
onkeypress	нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup	освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown	нажатие кнопки мыши, когда элемент имеет фокус
onmousemove	движение указателя мыши, когда элемент имеет фокус
onmouseout	смещение указателя мыши с элемента
onmouseover	помещение указателя мыши на элемент
onmouseup	освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style	задает встроенную таблицу стилей
title	всплывающая подсказка

Пример

• закрывающий тег обязателен ()
• атрибут id является обязательным
• рекомендуется предоставлять текстовую альтернативу графической карте для тех случаев, когда графика недоступна или пользователь не может её получить
• не рекомендуется использовать карту-изображений в качестве основной навигации, из-за слабой поддержки старыми и голосовыми браузерами

Тег — элемент уровня блока, т.е. содержимое тега всегда начинается с новой строки. После тега также добавляется перенос строки.

Привет. Давеча мне довелось иметь дело с такой специфической фичей html как карта изображения. Скажу честно, что мне не часто доводилось использовать её, и то, обычно, всё обходилось зонами в форме прямоугольника. Но это был не тот самый случай. Задачей было повесить ссылки на отдельные регионы изображения, которым выступала карта страны, и, к сожалению, ни о каких канвасах или svg не могло быть и речи. Только html только хардкор! Итак, задача поставлена, гугл активизирован, можно и начинать.

Теория

• coords - координаты зоны выделения
• href - ссылка, на которую будет произведён переход при клике на зону
• nohref - указывает на то, что зона не содержит ссылки
• shape - форма выделения
  • circle - зона выделения в виде круга
  • default - выделяет всю зону изображения
  • poly - зона выделения в виде многоугольника
  • rect - зона выделения в виде прямоугольника
• target - определяет где будет открываться ссылка

Так как зона выделения у меня должна была быть многоугольной, значение атрибута shape, тега area, мы указываем как poly - полигональная область. В таком режиме через запятую указываются координаты точки относительно левого верхнего угла - x,y. Точки также разделяются запятыми, что по началу при чтении такого кода вызывает недоумение.

Пишем Paint

Для начала подготовим вёрстку:

Body { margin: 0; padding: 20px; font-family: Arial, Helvetica, sans-serif; } img { border: none; outline: none; display: block; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .canvas { border: 2px solid #333; padding: 2px; margin-bottom: 16px; display: inline-block; //display: inline; //zoom:1; } .canvas.draw { border-color: #3C0; } .canvas .inner { position: relative; } .canvas .point { width: 1px; height: 1px; background-color: #fff; border: 1px solid #000; overflow: hidden; position: absolute; } .bar { margin-bottom: 16px; } .info { background-color: #FCFCFC; border: 1px dotted #CCC; font-size: 12px; font-style: italic; padding: 8px; word-wrap: break-word; }
В javascript"е всё достаточно просто. В процессе написания я использовал свою боевую библиотечку, так что не удивляйтесь нестандартным функциям. Для начала повесим событие mousedown на #canvas, в котором будет рендериться точка на изображении и записываться её координаты.

Var addPoint = function(e){ var e = _.getEvent(e), offset = _.getOffset(nodes["canvas"]), x = e.clientX + _.getDocScrollLeft() - offset, y = e.clientY + _.getDocScrollTop() - offset, node = nodes["canvas"].appendChild(_.node("div", {"class":"point"})); node.style.top = y-1+"px"; node.style.left = x-1+"px"; points.push({"x" : x, "y" : y, "node" : node}); e.preventDefault && e.preventDefault(); return false; };
Затем напишем функцию, которая будет генерировать html код нашей карты.

Var renderInfo = function(){ var text; _.clearNode(nodes["info"]); nodes["info"].appendChild(_.node("span", "")); };
Обрамим всё в класс, немного вспомогательных функций, вот и всё. Надеюсь кому-то будет полезна сея тулза.

» я сделал заготовку для размещения на определенных ее участках ссылок на разные web-страницы (« »)

Теперь если кликнуть на фигуры с надписями, то откроются соответствующие им странички: профиль, дневник или все посты из раздела «Уроки Photoshop» (внимание! после переноса блога на вордпресс и его переделки, ссылки не работают! но урок остается актуальным!)

Для того, чтобы картинка заработала, я написал примерно такой HTML-код:

Этот код можно вставить в поле сообщения (при нажатой кнопочке «Источник») или в эпиграф…

Кстати, есть и другие посты по теме: « Что такое HTML», « HTML-код рисунков», « Картинка-ссылка» и так далее.

1. Координаты

Чтобы составить указанный код, немного вспомнил геометрию:)

Система координат: ось X — сверху вниз, ось Y — слева направо
Для задания координат фигуры нужно установить:
— квадрат (или прямоугольник), стороны которого параллельны осям — координаты двух противоположных углов — X1, Y1 и X2, Y2
— многоугольник — координаты ВСЕХ углов
— круг — координаты центра и радиус.

В моем случае, выходит, нужны координаты точек A,C — для ссылки «Профиль» (прямоугольник), точек D,E,F,G,H — для ссылки «Дневник» (многоугольник), Q и длина R — для ссылки «Уроки Photoshop» (круг). Все эти числа в HTML-коде вверху выделены красным цветом. Кроме того, нужно знать размер изображения в пикселах (зеленый цвет)

Необходимости в особой точности нет, поэтому определить координаты можно выяснить с помощью «линейки» в Photoshop — для ее вызова нажимаю Ctrl + R

Мне было интереснее, чтобы кто-то другой посчитал координаты. Для этого запускаю MS Paint (Пуск — Все программы — Стандартные — Paint) и открываю в нем рисунок. При наведении курсора на искомые точки в нижней панели появляются их координаты, которые старательно записываю

2. HTML-код

Навигационные карты задаются тэгом

Тэг map включает себя тэги , которые определяют геометрические области карты-рисунка и связанные с ними ссылки.

Разобрался я так — для создания навигационной карты нужны:

— теги с описанием изображения

— теги карты

— теги областей

В моем случае, значения оказались такими:

• width=«640» height=«367» — размеры изображения
• src="https://сайт/f02c73a3cd94.jpg" — адрес изображения на сайте
• usemap="#picture" — условное наименование изображения-карты (может быть любое)
• map name=«picture» — имя карты (полностью соответствует указанному выше)

Значения для областей-ссылок — href — цель ссылки, shape — форма области и coords — координаты — соответствуют трем областям (area) на изображении.

Прямоугольник «Профиль»

• href="https://сайт/profile/" — адрес страницы профиля
• shape="rect" — обозначение формы «прямоугольник»
• coords="235,61,472,117" — координаты точек A (235,61) и С (472,117)

Многоугольник «Дневник»

• href="https://сайт/blog" — адрес страницы дневника
• shape="poly" — обозначение формы «многоугольник»
• coords="235,118,362,118,474,152,457,207,229,146" — координаты углов многоугольника: точки D (235,118), E (362,118), F (474,152), G (457,207) и H (229,146)

Круг «Уроки Photoshop»

• href="https://сайт/showjournal.php?journalid=2447247&keywordid=929323" — адрес страницы постов из раздела «Уроки Photoshop»
• shape="circle" — обозначение формы «круг»
• coords="551,198,65" — координаты круга: центр — точка Q (551,198) и радиус — R=65

3. Финиш

Подставил все полученные значения в «систему» HTML-кода для навигационной карты-изображения и получил следующее:

Именно этот код при использовании «превращается» в картинку с областями-ссылками.

Для тренировки есть «облегченный» легкий вариант создания участков-ссылок — пост «Тренировка: области-ссылки на изображении»

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter .

Влад Мержевич

Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение.

Клиентский вариант карты-изображения

Для указания того, что изображение является картой, используется атрибут usemap тега . В качестве значения указывается ссылка на описание конфигурации карты.

Пример 1. Использование карты-изображения

Для указания браузеру, что изображение является картой, применяется атрибут usemap . Он является ссылкой на описание конфигурации карты, которая задается тегом

Атрибуты тега AREA

shape

Определяет форму активной области. Форма может быть в виде окружности (circle ), прямоугольника (rect ), полигона (poly ).

alt

Добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится.

coords

Задает координаты активной области. Координаты отсчитываются в пикселах от левого верхнего угла изображения, которому соответствует значение 0,0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.

Для окружности задаются три числа — координаты центра круга и радиус.

Для прямоугольника — координаты левого верхнего и правого нижнего угла.

Для полигона задаются координаты его вершин (рис. 2).

Рис. 2. Координатные точки для полигона

href

Карты-изображения позволяют создавать ссылки на разные области одного изображения. Использование этого подхода наглядней, чем обычные текстовые ссылки и позволяет применять всего один графический файл для организации ссылок. Однако не нужно считать, что карты-изображения следует включать везде, где требуются графические ссылки. Прежде всего, следует оценить все доводы за и против, а также просмотреть альтернативные варианты.

Преимущества карт-изображений

1. Карты позволяют задать любую форму области ссылки. Учитывая, что изображения по своей природе прямоугольны, сделать графическую ссылку сложной формы, например для указания географического района, без карт-изображений не представляется возможным. Как правило, в географической тематике карты-изображения и применяются наиболее часто.

2. С одним файлом удобней работать — не приходится заботиться о состыковке отдельных фрагментов и рисунок легко можно поместить в нужное место.

Недостатки

1. Нельзя установить всплывающую подсказку и альтернативный текст для отдельных областей. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Для карт-изображений эта особенность является актуальной, ведь если отключить просмотр изображений, что делают многие пользователи, то в итоге увидим лишь один пустой прямоугольник.

2. При сложной форме области ссылки увеличивается объем кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико. Справедливости ради, следует отметить, что сложные формы являются частным случаем и применяются достаточно редко.

3. С картами-изображениями нельзя сделать разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.

Юзабилити

С позиции удобства пользователей, карты-изображения имеют только одно преимущество — ссылки разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей. Во всех остальных отношениях от них проку нет — обычные текстовые ссылки более информативны и им не страшно отключение показа картинок в браузере. Тот факт, что одно изображение загружается быстрее, чем та же картинка, но порезанная на фрагменты и сохраненная в виде набора графических файлов, легко обходится. Каждый из таких конечных файлов можно уменьшить, используя индивидуальные настройки оптимизации. В итоге, общий объем всех фрагментов будет занимать меньше места, чем одно изображение. Не стоит сбрасывать со счетов и психологический фактор — человеку кажется, что набор маленьких картинок загружается быстрее, чем одна большая.

Основной недочет карт — нет четко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами уже на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематичным.

Альтернативные варианты

Не всегда есть острая необходимость использовать карты-изображения, поэтому следует обратить внимание на то, что существуют и другие возможные варианты выполнения поставленной задачи.

Использование FLash

Во flash-роликах можно создавать разные области ссылок, используя возможности векторной графики. Благодаря широким возможностям, на Flash можно создавать потрясающие меню и средства навигации. Но тут тоже требуется осторожность, чтобы не потерять за деревьями леса.

Разрезание изображений

Это одно из популярных средств в дизайне. Одно изображение в этом случае разрезается с помощью специальных программ на фрагменты, которые окончательно сводятся вместе, создавая иллюзию цельной картинки. Хотя области разрезания могут быть только прямоугольные, в большинстве случаев этого вполне достаточно для создания ссылок. Для каждого фрагмента можно выбрать наиболее подходящий графический формат, в котором он будет сохранен, параметры оптимизации, добавить альтернативный текст. Тогда даже при отключенном показе картинок, будут хорошо видны границы областей и замещающий изображение текст.

Резюме

Как выяснилось, причина использовать карты-изображения только одна — сложная форма ссылок, продиктованная задачами дизайна. Типичное применение — регионы географической карты, которые служат ссылками. Во всех остальных случаях можно обойтись и текстовыми ссылками, а при необходимости создания графической навигации, одно изображение для удобства можно разрезать на фрагменты. Такой подход создаст больше удобства пользователям, особенно тем, которые в силу разных причин отключают показ изображений в браузере. О них тоже нужно помнить.