Для чего необходимы карты изображения. Построение изображения-карты

• rect - прямоугольная область
• poly - область представляет собой некий многоугольник
• circle - область заданная окружностью

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

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

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

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

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

Вот рисунок:

А вот пример:

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

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

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

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

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

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

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

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

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

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

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

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

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

"Не область"

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

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

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

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

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

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

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

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

С атрибутом 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 » и пропишите его в теге

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

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. Но для начала вспомним, о чем мы говорили в прошлом видео. Дело в том, что эти видео довольно тесно связаны между собой, и чтобы понять, о чем речь необходимо посмотреть предыдущие видео из раздела изображений.

В прошлом видео уроке мы как раз начали знакомство с картами изображений в HTML . Посмотрели, как она должна выглядеть в конечном итоге, правда, с применением скриптов. Немного поговорили о координатах. То есть о том, как мы их будем определять. Как Вы можете помнить, я остановил свой выбор на одном из способов, это способ с использованием атрибута ismap , так как, на мой взгляд, именно этот метод определения координат является самым простым и менее сложным, а значит именно он нам подходит.

В итоге в прошлом видео мы сделали картинку-ссылку . А затем из изображения сделали серверную карту изображения, которая поможет нам в определении координат активных областей.

Определение координат квадрата, прямоугольника, круга и многоугольника.

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

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

После чего на живом примере мы определим координаты квадрата и прямоугольника. Затем определим координаты окружности. И наконец, укажем координаты треугольника, который свою очередь играет роль многоугольника.

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

Видео урок: Создание карты избражения в HTML.

HTML-справочник и другие материалы можно и нужно скачать !

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

Плюсы

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

Минусы