Навигационные карты. Создание ссылок на участках изображения: карта (map) ссылок Форматы графических файлов


Всем привет. С Вами Бернацкий Андрей.

В этом уроке я расскажу о том, как создавать карты-изображений в HTML .

Карта-изображения – это какая-либо картинка, может быть фотография, которая имеет несколько активных зон.

Например, при нажатии мыши на активную зону переходим на определенный URL. Если сидите в vkontakte.ru, там пример карты-изображения – это когда отмечают на фотографии, и при наведении курсора мыши на человека, отмеченного на фотографии, показывается его имя и фамилия, а при щелчке мыши происходит переход на страницу этого человека.

Сначала предлагаю Вам видео версию данного урока:

Делается это все достаточно просто. Берем любую фотографию с друзьями. Лучше вставить ее в свой отдельный блок

.

XHTML

Я взял для примера свою фотографию.

Для div задан id для того, что бы можно было назначить какие-нибудь отступы или еще, что нужно будет. Я в своем примере ничего задавать не буду.

Главный параметр у тега img в данном случае – это usemap="#img-nav" . Он указывает на карту с каким именем мы будем ссылаться.

XHTML

Andrey

Идем по порядку.

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

Параметр 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

Мы с Вами уже говорили о том как сделать рисунок ссылкой.. в этой главе поговорим о том как сделать фрагмент, область рисунка ссылкой на тот или иной документ, а так же о том как сделать различные области одного и того же рисунка ссылками на различные документы.

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

Предположим, у нас имеется такой рисунок:

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

В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap тега (я думаю Вам не стоит напоминать о том что тег имеет обязательный атрибут src который указывает путь к той или иной картинке )

Назовём наш рисунок/карту именем panel . Это будет выглядеть так:

usemap="#panel" >

Не забываем по правилам синтаксиса поставить знак # решётки перед именем..

Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом у которого есть атрибут name - имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя..

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

href - указывает путь к открываемому документу (точно так же как в теге )
shape - форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:
  • rect - прямоугольная область
  • poly - область представляет собой некий многоугольник
  • circle - область заданная окружностью
coords - координаты формы

Прямоугольная область

Теперь наша карта приобретает такой вид:

По сути теперь "зелёная" квадратная кнопка стала рабочей.

В чем Вы можете убедится нажав на неё в этом примере:



Навигационная карта



usemap="#panel">






Немного поспешил с примером толком не объяснив суть написанного.. Заострим внимание на атрибутах тега .

href="primer1.html" - здесь думаю понятно, это путь к документу, который должен открыться при нажатии на "зелёную кнопку".

Так как кнопка у нас квадратная, а квадрат как известно это "правильный" прямоугольник, форму области рисунка назначаем прямоугольной shape="rect" .

А теперь самое интересное coords="15,15,82,82" - координаты.. Для прямоугольника они задаются двумя точками по принципу "Х1,У1,Х2,У2" Где Х1,У1- первая точка и соответственно Х2,У2 -вторая. Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0,У=0, а самый нижний правый Х=300,У=100. Если не понятно, окунёмся в геометрию за пятый класс..

Взгляните на рисунок:

Так, выбрав прямоугольную форму shape="rect" для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения "рабочей" области всей кнопки.

Полигон (многоугольник).

Займёмся "жёлтой кнопкой", она у нас представлена в виде треугольника. Для того чтобы выделить её "рабочую" область из нашего рисунка, присвоим атрибуту shape значение poly - полигон, которое определит эту область как некий многоугольник, где координаты через запятую будут являться его вершинами, их может быть сколь угодно много "Х1,У1,Х2,У2,Х3,У3,Х4,У4… Х124,У124" фигура образованная этими точками вершинами углов может иметь вид любого многоугольника как правильного, так и неправильного. В нашем случае угла всего три, на то он и треугольник, следовательно его координаты будут заданы тремя парами значений "Х1,У1,Х2,У2,Х3,У3"

Значит всё вместе пишем так:

shape="poly" coords="148,15,185,82,110,82" >

А вот рисунок который наглядно показывает откуда берутся координаты точек..



Навигационная карта







shape="poly" coords="148,15,185,82,110,82">



Окружность

Ну и последняя "красная кнопка" она у нас круглая.. значит форма области будет круглой shape= "circle" . На сей раз с координатами дело обстоит немного иначе. Нам понадобится три значения Х,У,R. Х и У это координаты центра нашей окружности, а R - это длина радиуса в пикселях.

Вот рисунок:

А вот пример:



Навигационная карта








shape="circle"coords="250,50,33">



Доводим до ума..

Теперь немного о том, что ещё желательно было бы сделать с нашей картой прежде чем "монтировать" её в какую либо страницу.

Определим фиксированные размеры рисунка-карты атрибутами width и height

Напишем альтернативный текст, как для всего рисунка карты, так и для её отдельных областей используя атрибут alt , а также описание элементов атрибутом title .

Избавимся от рамки бордюра.. сделаем border="0" ..(ну если Вам с бордюром больше нравится, можете этого не делать.. я не настаиваю..)

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



Навигационная карта



width="300" height="100" border="0" alt="Панель управления" title="Панель управления">


alt="Зелёная кнопка" title="Зелёная кнопка">
alt="Жёлтая кнопка" title="Жёлтая кнопка">
alt="Красная кнопка" title="Красная кнопка">



Пересечение областей

Иногда удобно формировать "рабочую" область изображения "смешивая" разные формы..

Предположим, наша очередная кнопка имеет такой вид:

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

А можно определить в этом примере две формы прямоугольник rect и окружность circle как показано на рисунке:

А в коде указать путь к одному и тому же документу:



Навигационная карта











"Не область"

Рассмотрим на примере.. предположим необходимо изготовить вот такую кнопку:

Как быть с отверстием в ней?

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

Карта будет задана двумя областями, неактивной окружностью circle и активной прямоугольной областью rect и как показано на рисунке чертеже иметь следующие координаты:

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

Следовательно, пример будет иметь такой вид:



Навигационная карта






nohref shape="circle" coords="76,74,35" title="дырка">




Карта на сервере.

Отрывок из справочника (атрибуты тега ):

usemap - изображение является навигационной картой на стороне клиента.
ismap - изображение является навигационной картой на сервере.

Непонятно? Тогда читаем..

С атрибутом usemap мы вроде бы разобрались.. Смотрите, пользователь (клиент) открыв Вашу страницу, одновременно со всем остальным содержанием, загружает "на свою сторону" как сам рисунок, так и навигационную карту к нему и всё это дело обрабатывается его браузером.

А вот атрибут ismap тега говорит браузеру о том, что к данному изображению на сервере, ну там где Вы выложили или собираетесь выложить свой сайт (читаем статью: ), есть навигационная карта. И теперь, когда посетитель (клиент) кликнет по какой либо области рисунка с таким атрибутом, браузер запомнит координаты этого клика и отправит их на сервер, где специальная программка обработает эти данные и перенаправит пользователя на тот адрес который указан в карте на сервере, в соответствии с полученными от браузера клиента координатами точки.

Пишется так:

Где адрес навигационной карты на каком либо сайте.. размещённом на том или ином сервере..

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

    Что бы без труда определить координаты той или иной точки на Вашей навигационной карте откройте рисунок графическим редактором тем же Paint к примеру.. там, когда будете двигать указателем по рисунку, увидите две меняющиеся цифры, это и есть координаты пикселя Х и У на данном рисунке. В Paint эта панелька расположена в нижней части экрана.

    При создании страницы с навигационной картой тег всегда должен быть выше самой карты То есть писать вот так:

    Можно, но не нужно.. потому что при загрузке страницы могут возникнуть проблемы, так как карта с разметкой уже загрузилась, а самого рисунка ещё нет..

    И ещё что касается загрузки..

    В этом месте кода может быть всё что угодно длинный текст, таблицы, графика.. но всё же лучше здесь ничего не писать



    А писать здесь, так как во время загрузки страницы, пользователь не дождавшись её окончания, может пытаться нажимать на кнопки указанные в навигационной карте которая к этому времени еще не загрузилась..

В 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 » и пропишите его в теге через атрибут name .

Теперь свяжем карту с картинкой. Для этого используем атрибут 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.

Карта изображения в HTML (навигационные карты). Урок №11

Теперь смотрите на результат. Нажмите на круг №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.

Карта изображения в HTML (навигационные карты). Урок №11

Теперь смотрите на результат. Нажмите на многоугольник №1 и на многоугольник №2:

Возможность комбинирования

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

Дополнение с использованием TITLE

Для каждой области можно прописать подсказки, используя атрибут title.

Карта изображения в HTML (навигационные карты). Урок №11

Теперь смотрите на результат. Наведите курсор мышки на круг, а потом на прямоугольник:

Вот и все. С картой изображения в HTML (навигационная карта) мы разобрались.

Карта изображений (Image Map) позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные Web-страницы.

Карта изображения определяется парным тегом … . HTML-документ может содержать несколько карт изображения, поэтому каждой карте должно быть присвоено уникальное имя, которое определяется атрибутом name .

Карта изображения состоит из участков изображения и соответствующих им ссылок. Описывает участок изображения и ставит ему в соответствие ссылку одиночный тег .

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

Координаты по умолчанию измеряются в пикселях.

Начало отсчета координат – это верхний левый угол экрана, т.е.

Примеры различных форм областей карты изображений

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

Чтобы использовать изображение, как карту, в тег необходимо ввести дополнительный атрибут usemap , определяющий имя карты изображения. Перед этим именем ставится знак "#".

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

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

» я сделал заготовку для размещения на определенных ее участках ссылок на разные 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 .