Карты-изображения. Создание карты изображений в HTML Что карта в html примеры

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

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

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

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

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

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

Карта-изображение

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

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

shape

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

alt

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

coords

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

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

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

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

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

href

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

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

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

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

Недостатки

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

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

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

Юзабилити

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

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

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

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

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

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

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

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

Резюме

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

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

Теория

Начнём пожалуй с теории, куда ж без неё. Карта изображения содержит в себе два тега: map - контейнер карты и area - зона выделения. Карта не ограничена одной зоной и может содержать неограниченное их количество. Тег area кроме стандартных атрибутов имеет и свои собственные:

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

Чтобы подключить карту к изображению, указываем тегу map атрибут name с произвольным именем, а на изображения вешаем тег usemap , значение которому указываем в формате "#имя" .

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

Пишем Paint

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

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

В #bar будут вставляться кнопки для управления «пеинтом».
В #info будет выводится сгенерированный html код.

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", "")); nodes["info"].appendChild(_.node("br")); for(var i = 0, l = areas.length; i < l; i++){ if(areas[i].length > 0){ text = " 0){ text += ","; } text += areas[i]["x"] + "," + areas[i]["y"]; } text += "">"; nodes["info"].appendChild(_.node("span", text)); nodes["info"].appendChild(_.node("br")); } } nodes["info"].appendChild(_.node("span", "")); };
Обрамим всё в класс, немного вспомогательных функций, вот и всё. Надеюсь кому-то будет полезна сея тулза.

01.12.2015

Всем привет!
Продолжаем изучать основы HTML. . Карту изображений еще называют навигационной картой, но это не так уж и важно.
Давайте выясним, что такое карта изображения (навигационная карта) и где ее можно использовать на практике.

Карта изображения (навигационная карта ) – это картинка, на которой размещается одна или несколько указанных областей для ссылок.

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

В примере использовалась одна картинка, где область и путь перехода разный

Вот сейчас научимся создавать что-то подобное.

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

Как сделать карту изображения в HTML

Чтобы создать карту изображения в HTML, вставьте вот такой каркас:

○ тег map

Тег - это главный контейнер для создания карты изображения, внутри которого содержатся другие теги, такие как .
Закрывающий тег обязательный.

* атрибуты тега map

○ название карты
Обязательно карте нужно дать имя и для этого используют атрибут «name» :

○ тег area

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

* атрибуты тега area

○ как определить форму области

Чтобы определить форму области (прямоугольник, круг, многоугольник) используют для тега атрибут «shape» с такими значениями:

rect - Прямоугольник. Пример: shape="rect" ;
circle - Круг. Пример: shape="circle" ;
poly - Многоугольник. Пример: shape="poly"

○ как указать расположение геометрической формы

Чтобы указать расположение геометрической формы (прямоугольником, кругом, многоугольником) используют для тега атрибут «coords» .

В атрибуте «coords» и задаются все параметры размещения геометрической фигуры по такой схеме:

Coords="x1,y1,x2,y2"

Обратите внимание на вертикальную ось «y » и горизонтальную ось «x ». Вот по этим осям и задаются параметры.

Coords="x,y,R"

Coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5"

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

К примеру, у меня есть вот такая картинка прямоугольников:

Вставим картинку в html документ:

Теперь создаем блок для карты изображения и даем ему любое название через атрибут «name» , к примеру «karta1»

Имя карты обязательно должно быть через решетку «# »:

Теперь в теге указываем координаты, геометрическую форму и ссылку для перехода.

Вот координаты первого прямоугольника:

x1=25, y1=36, x2=114, y2=98

а вот такие будут ко второму:

x1=153, y1=11, x2=219, y2=127

Вот готовый код:

Просмотрите готовый код. Вам все понятно, если нет, просмотрите с самого начала теги для создания навигационной карты. Если это не помогло, пишите в комментариях.

А мы смотрим на результат, что же у меня вышло. Попробуйте навести на прямоугольник №1, а потом на №2 (можно нажать, они кликабельны):

Круг

К примеру, у меня есть вот такая картинка круга:

Вот координаты первого круга:

x=46, y=48; а длина радиуса - R=35

а вот такие будут для второго круга:

Прежде, чем посмотреть готовый код, попробуйте сами написать HTML код и сверить его с моим.

Готовый код будет вот таким:

Еще раз повторюсь в разъяснениях, что я делал в коде:

Строка №1
Вставил картинку в HTML файл и привязал изображение к карте с помощью атрибута «usemap» :

Строка №2
Создал блок для карты изображения и дал карте название для привязки к картинке с помощью атрибута «name» :

Обратите внимание, название карты (name="имя" ) должно совпадать с привязкой картинки (usemap="#имя" ). Это важно, так как карта изображений работать не будет.

Строка №3 и №4
Указал фигуру и ее координаты, а также привязал к фигуре ссылку

Итак, если вы все правильно сделали, результат будет таким:

Попробуйте навести на круг №1, а потом на №2 (можно нажать, они кликабельны)!!!

Многоугольник

К примеру, у меня есть вот такая картинка фигуры с несколькими углами:

Вот координаты первого многоугольника:

x1=168, y1=9, x2=232, y2=29, x3=200, y3=97, x4=223, y4=129, x5=153, y5=119

а вот такие будут для второго многоугольника:

x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58

Готовый код будет вот таким:

Результат будет вот таким:

Хочу дополнить, что углов может быть столько, сколько вы хотите и сколько вы укажите:

Разъяснение:

x1, y1 - координаты первого угла;
x2, y2 - координаты второго угла;
xN, yN - координаты последнего угла

ДОПОЛНЕНИЕ:

Комбинированная карта изображений

Карту изображений можно комбинировать сразу с разными фигурами. Что я имею в виду? На одной картинке, могут быть указаны различные области разных фигур.
Вот, к примеру, так:

В примере я указал область для круга и для прямоугольника.

Для каждой выбранной области можно прописать подсказки, которые будут появляться, если навести курсор мышки. Для подсказки используют атрибут «title» к тегу «area» :

Вот результат:

Наведите курсор мыши на круг, а потом на прямоугольник. Вы увидите, как появятся подсказки, на кружке – «wordpress» , а на прямоугольнике - «Автор блога» .

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

Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.

Предыдущая запись
Следующая запись

HTML теги

Значение и применение

Тег используется для определения изображения-карты. Изображение-карта представляет собой изображение с определённой активной областью. Элемент содержит ряд тегов, которые определяют интерактивные области в изображении-карте, т.е. при клике на определённую область изображения происходят определённые действия, например, открывается отдельная страница с описанием данного участка изображения.

Поддержка браузерами

Тег			Opera		IExplorer	Edge
	Да	Да	Да	Да	Да	Да

Атрибуты

Атрибутами тега мы указываем как координаты области (атрибут coords ), так и тип необходимой нам фигуры (атрибут shape ):

Пример использования

Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):

</span>Пример использование тега <map>

Выбери фигуру: