Для чего необходимы карты изображения. Создание карты изображения в HTML. Атрибуты тега AREA
Плюсы
- Карты-изображения позволяют задать любую форму области ссылки, что особенно пригодится для указания географического района. Поэтому, карты-изображения применяются наиболее часто в географической тематике.
- С одной картинкой удобнее работать - не приходится заботиться о состыковке отдельных фрагментов при разрезании, и рисунок легко можно поместить в нужное место.
Минусы
- При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико.
- Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать.
- При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок.
- К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
- Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично.
С позиции удобства пользователей карты-изображения имеют только одно преимущество - включение ссылок разнообразной формы. Это добавляет наглядность в представлении информации - мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей.
Карты-изображения реализуются в двух различных вариантах - серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Для указания того, что изображение является картой, применяется атрибут usemap элемента . В качестве значения используется указатель на описание конфигурации карты, которая устанавливается с помощью элемента
Пример 1. Создание карты-изображения
Внутри контейнера
Элемент имеет следующие атрибуты.
- shape - определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
- alt - добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href .
- title - выводит всплывающую подсказку при наведении курсора на область.
- href - задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента .
- coords - задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе - по вертикали. Список координат зависит от формы области.
Для окружности задаются три числа - координаты центра круга и радиус.
» я сделал заготовку для размещения на определенных ее участках ссылок на разные 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 как карта изображения. Скажу честно, что мне не часто доводилось использовать её, и то, обычно, всё обходилось зонами в форме прямоугольника. Но это был не тот самый случай. Задачей было повесить ссылки на отдельные регионы изображения, которым выступала карта страны, и, к сожалению, ни о каких канвасах или svg не могло быть и речи. Только html только хардкор! Итак, задача поставлена, гугл активизирован, можно и начинать.
Теория
Начнём пожалуй с теории, куда ж без неё. Карта изображения содержит в себе два тега: map - контейнер карты и area - зона выделения. Карта не ограничена одной зоной и может содержать неограниченное их количество. Тег area кроме стандартных атрибутов имеет и свои собственные:- coords - координаты зоны выделения
- href - ссылка, на которую будет произведён переход при клике на зону
- nohref - указывает на то, что зона не содержит ссылки
- shape
- форма выделения
- circle - зона выделения в виде круга
- default - выделяет всю зону изображения
- poly - зона выделения в виде многоугольника
- rect - зона выделения в виде прямоугольника
- target - определяет где будет открываться ссылка
Так как зона выделения у меня должна была быть многоугольной, значение атрибута 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", "
Обрамим всё в класс, немного вспомогательных функций, вот и всё. Надеюсь кому-то будет полезна сея тулза.
В html-документ.
Теперь давайте выясним, что такое карта изображения.
С помощью карты изображения вы можете сделать так, что при нажатии на разные области одной и той же картинки, вы попадаете на разные страницы. Карту изображения некоторые называют еще навигационной картой.
Я понимаю, что на словах это тяжело понять, потому предлагаю посмотреть пример, как выглядит карта изображения вживую.
Только обратите внимание: картинка одна, а области и путь перехода разный.
Не бойтесь, это вовсе не сложно. Самое главное – понять теорию и закрепить практикой.
Ну что, приступим к теории.
Карты изображения (навигационные карты) задаются тегом
Тег
Тег
предназначен для определения геометрической области с ссылкой, привязанной к каждой области.
Атрибуты areа
1. Атрибут shape
shape
– определяет форму области (прямоугольником, кругом, многоугольником
).
Прямоугольник
- "rect
". Пример: shape="rect
"
;
круг
- "circle
". Пример: shape="circle
"
;
многоугольник
- "poly
". Пример: shape="poly
"
2. Атрибут coords
coords
– это расположение геометрической формы.
Давайте рассмотрим пример на геометрической форме прямоугольника.
Вы уже знаете, что если вам нужна форма прямоугольника, значит нужно прописать в атрибуте shape значение « rect ».
Точка отсчета начинается с левого верхнего угла картинки, координаты которого (0;0)
Значит, нужно указать координаты рабочей области у прямоугольника верхний-левый и нижний-правый угол.
Для примера с прямоугольником №1 возьмите такие координаты:
x1=25, y1=36, x2=114, y2=98
Вот так будет выглядеть код:
Все пока что хорошо. Но нам теперь нужно связать картинку с картой.
Для этого придумайте любое название для карты, например, «karta1
» и пропишите его в теге
Теперь свяжем карту с картинкой. Для этого используем атрибут usemap
.
Пример написания:
usemap="
#имя_карты"
В нашем случае это будет выглядеть следующим образом:
Теперь соберем все вместе и пропишем еще координаты к другому прямоугольнику №2 с такими данными (x1=153, y1=11, x2=219, y2=127).
Теперь смотрите на результат. Нажмите на прямоугольник №1 и на прямоугольник №2
Для начала нужно указать тип области. Для этого пропишем в атрибуте shape значение «circle ».
Теперь переходим к координатам.
Чтобы создать координаты для круглой области, нужно прописать данные к центру (xy) и указать длину радиуса (R).
Порядок записи координат для атрибута coords будет таким:
Для круга №1 возьмите такие координаты:
x=46, y=48; а длина радиуса - R=35
Теперь соберем все вместе и пропишем еще координаты к кругу №2 с такими данными x=158, y=75, R=53.
Теперь смотрите на результат. Нажмите на круг №1 и на круг №2:
Многоугольная область самая сложная область в навигационной карте.
Для начала нужно указать тип области. Для этого пропишите в атрибуте shape значение «poly »
Теперь переходим к координатам.
Порядок записи координат для атрибута coords будет таким:
Разъяснение:
x1
,y1
-
координаты первого угла;
x2
,y2
-
координаты второго угла;
xN
,yN
-
координаты последнего угла
То есть, для многоугольника №2 это выглядит вот так:
Теперь дадим карте название и привяжем карту к рисунку:
Теперь соберем все вместе и пропишем еще координаты к шестиугольнику №1 с такими данными: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58.
Теперь смотрите на результат. Нажмите на многоугольник №1 и на многоугольник №2:
Возможность комбинирования
Бывают такие случаи, когда нужно использовать одновременно на одной картинке разные области, например, круг и прямоугольник:
Дополнение с использованием TITLE
Для каждой области можно прописать подсказки, используя атрибут title.
Теперь смотрите на результат. Наведите курсор мышки на круг, а потом на прямоугольник:
Вот и все. С картой изображения в HTML (навигационная карта) мы разобрались.
HTML - Урок 15. Навигационные карты - map
Многие html-страницы используют для организации ссылок так называемые карты-изображения. При таком подходе берется изображение и к различным его областям привязываются ссылки. Самым распространенным примером являются туристические карты мира, щелкаете по ее части с какой-либо страной и попадаете на страницу, посвященную этой стране.Такие карты-изображения могут быть клиентскими и серверными. Ссылки клиентских карт хранятся в самом документе и по щелчку мыши браузер сам определяет, к какой области относятся координаты этой точки и осуществляет переход по нужной ссылке.
При серверном варианте эти координаты сначала передаются на сервер, там обрабатываются специальной программой и только после этого происходит переход по ссылке.Очевидно, что клиентские навигационные карты предпочтительнее. Их мы и рассмотрим.
Для примера представим, что мы являемся магазином бытовой техники и в шапке нашего сайта у нас расположена вот такая картинка:
Сделаем из нее навигационную карту, т.е. при щелчке по холодильнику будет осуществляться переход на страницу, посвященную холодильникам (с моделями, описанием и ценами), при щелчках по пылесосу и стиральной машине на соответствующие им страницы.
Для этого нам надо описать области на этой картинке, которые будут ссылками. Для описания таких областей используются теги
Нашу карту надо подключить к нашей картинке, для этого в тег надо добавить параметр usemap , в качестве значения которого выступает имя нашей карты после значка # (решетки):
Для описания конкретных областей внутри тегов
- shape
- определяет форму области, может принимать следующие значения:
- rect - область в виде прямоугольника,
- circle - область в виде круга,
- poly - область в виде многоугольника,
- default - вся область.
- cootds
- задает координаты отдельной области:
- для rect задаются координаты верхнего левого и правого нижнего углов прямоугольника,
- для circle задаются координаты центра круга и радиус,
- для poly задаются координаты вершин многоугольника в нужном порядке.
- href - определяет адрес ссылки.
- target - применяется при использовании фреймов и указывает фрейм в который нужно загрузить страницу.
- alt - задает альтернативный текст для области.
Теперь надо определиться с координатами этих областей. На самом деле это самый трудоемкий процесс. В нашем примере мы решили, что области будут прямоугольными и значительно облегчили себе задачу, а представьте, сколько точек нужно задать, например, для обвода страны на карте. Тем не менее, нам надо задать координаты верхнего левого и правого нижнего углов трех прямоугольников.
Для этих целей обычно используется какая-нибудь программа, например, Image Ready, которая имеет специальный инструмент для обводки областей и автоматически строит описания этих областей. Рассмотрение работы этих программ не входит в курс HTML, поэтому здесь мы зададим координаты "на глаз". Посмотрите еще раз на наше изображение:
Ширина нашей картинки 738 пикселов, а высота - 192 пиксела. Проведем линии по границам наших областей и примерно определим координаты. Теперь мы готовы добавить эти параметры в наши теги .
Результат:
Теперь наши области стали ссылками (если подвести курсор мыши, он превращается в ладошку). На этом сайте нет страниц, посвященных холодильникам, поэтому ссылки ведут на эту же страницу, но если вы создадите нужные страницы, то при щелчке по области будет осуществляться переход.
На этом наши уроки подошли к концу. Вы ознакомились со всеми возможностями языка HTML. Для закрепления навыков ознакомьтесь с двумя уроками Делаем сайт - табличная верстка .
Напоследок, надо сказать, что в HTML есть еще два замечательных элемента - теги