В этой статье мы с Вами рассмотрим как составить клиентскую изображение-карту, при клике на определенную область которой, мы сможем перейти по определенной ссылке. Составление изображений-карт можно редко встретить на сайтах, так как этот процесс довольно-таки трудоемкий, но если вы хотите удивить ваших посетителей необычной формой для ссылок и у вас есть в распоряжении свободное время для самообразования, то эта статья для вас.
Тег
Атрибутами тега мы указываем как координаты области (атрибут coords ), так и тип необходимой нам фигуры (атрибут shape ):
Пример использования
Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):
Выбери фигуру:
И так по порядку, что мы сделали в этом примере:
- Разместили изображение (тег
), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе
- Размещаем изображение-карту (тег
- Размещаем четыре тега , которые определяют интерактивные области в изображении-карте:
- Первой мы задаем прямоугольную область (атрибут shape со значением "rect" ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
- Второй указываем круглую область (атрибут shape со значением "circle" ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x , а второе по оси y , третее определяет радиус ).
- Что касается третей и четвертой фигуры , то они составлены по принципу многоугольной области (атрибут shape со значением "poly" ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).
Обращаю Ваше внимание на то, что если у тега Практическое задание № 26.
Нюанс : для чистоты практического задания предлагаю в качестве первой точки использовать вершину звезды и двигаться по часовой стрелке. В качестве значения атрибута href я указал # в этом случае она выступает как заглушка (вы остаетесь на той же странице), вы можете сделать переход на любую страницу.
Подсказка : чтобы получить координаты изображения воспользуйтесь редактором изображений, даже самый простой редактор, например, Paint , отображет координаты курсора. Выпишите координаты на листок или в отдельный файл и внесите значения на страницу.
Если у Вас возникнут трудности с выполнением задания, то проинспектируйте код страницы, открыв пример в отдельном окне и внимательно его изучите.
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:
При наведении курсора мышкой на области зеленого прямоугольника видно, что она является ссылкой на "#green_link " (метка выбрана для примера, можно сделать ссылку на любую страницу в интернете). У красного квадрата на "#red_link ", а у синего круга соответственно на "#blue_link ".
Код этого примера:
img/primer-kartu-izobrazheniy-1.jpg ">
Как видно из примера код не такой уж и сложный. Разберем теги для создания карты ссылок изображения.
Описание примера1. Необходимо создать связку изображения
и карты
При создании карты ссылок атрибут usemap является обязательным для тега img.
2. Описание карты
3. Каждый элемент карты описывается с помощью тега , в котором указывается тип объекта с помощью атрибута shape (прямоугольник, круг или многоугольник) и его координаты.
ПримечаниеОбласти могут перекрывать друг друга. В этом случае ссылка будет вести на тот объект, что описан последним.
Атрибуты тега
1. Атрибут shape="тип_объекта" - задает тип объекта. Может принимать следующие значения:
- circle - круг;
- rect - прямоугольник;
- poly - многоугольник;
2. Атрибут coords="значения_координат" - определяет геометрическое расположение объекта и его размеры.
Точкой отчета изображения является верхний левый угол. Т.е. если вы указали отступ 10 по высоте, то это означает 10 пикселей вниз.
В зависимости от типа объекта нужно задавать значения координат в разных форматах. Все значения указывается в пикселях (пометку px писать не нужно).
- Для типа circle: coords = (x,y,r) , где x,y координаты центра круга, а r - радиус круга;
- Для типа rect: coords = (x1,y1,x2,y2) , где x1,y1 координаты левой верхней точки прямоугольника, x2,y2 - координаты нижний правой точки прямоугольника;
- Для типа poly: coords = (x1,y1,x2,y2,...,xn,yn) , последовательно указываются координаты x,y каждой точки многоугольника;
3. Атрибут href="адрес_перехода" - задает ссылка для перехода (аналогично ). Помимо адреса перехода можно использовать функции JavaScript для выполнения какого-то действия.
4. Атрибут target="значение" - аналогично тегу определяет действие перехода по ссылке. Может принимать значения:
- _blank - открывает страницу в новом окне
- _self - загружает страницу в текущее окно
- _parent - загружает страницу во фрейм-родитель
- _top - отменяет все фреймы и загружает страницу в полном окне браузера
5. Атрибут title="подсказка" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »
6. Атрибут nohref - делает область неактивной. Используется при перекрытии объектов. Используется довольно редко, но иногда это может стать незаменимым решением. Например можно сделать маленький круг внутри большого круга неактивным.
Обязательно область nohref должна идти первой.
Пример кода:
Использование карты ссылок на изображении имеет место лишь в узком круг задач. Например, при создании какой-то схемы или карты проезда. В других случаях применение карты при создании меню и других графических элементов выглядит необоснованной.
В 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 (навигационная карта) мы разобрались.
Мы с Вами уже говорили о том как сделать рисунок ссылкой.. в этой главе поговорим о том как сделать фрагмент, область рисунка ссылкой на тот или иной документ, а так же о том как сделать различные области одного и того же рисунка ссылками на различные документы.
Для осуществления данной задачи нам не обойтись без так называемых навигационных карт.
Предположим, у нас имеется такой рисунок:
И нам необходимо сделать, так что бы пользователь, нажав на одну из этих "кнопок" переходил по ссылке в тот или иной документ.. что нам для этого нужно?
В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap
тега
(я думаю Вам не стоит напоминать о том что тег
имеет обязательный атрибут src
который указывает путь к той или иной картинке
)
Назовём наш рисунок/карту именем panel . Это будет выглядеть так:
usemap="#panel"
>
Не забываем по правилам синтаксиса поставить знак # решётки перед именем..
Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом у которого есть атрибут name - имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя..
Теперь займемся тем, что укажем браузеру области рисунка которые будут являться ссылками, а заодно пропишем пути переходов по этим ссылкам. Эту задачу берет на себя тег , закрывающего тега он не требует, и имеет следующие атрибуты, с которыми мы будем работать:
href - указывает путь к открываемому документу (точно так же как в теге )shape - форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:
- 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 и как показано на рисунке чертеже иметь следующие координаты:
Как уже говорилось ранее, при пересечении областей наибольшим приоритетом будет пользоваться та область, которая в коде внутри тега указана первой
Следовательно, пример будет иметь такой вид:
Карта на сервере.
Отрывок из справочника (атрибуты тега
):
ismap - изображение является навигационной картой на сервере.
Непонятно? Тогда читаем..
С атрибутом usemap мы вроде бы разобрались.. Смотрите, пользователь (клиент) открыв Вашу страницу, одновременно со всем остальным содержанием, загружает "на свою сторону" как сам рисунок, так и навигационную карту к нему и всё это дело обрабатывается его браузером.
А вот атрибут ismap
тега
говорит браузеру о том, что к данному изображению на сервере, ну там где Вы выложили или собираетесь выложить свой сайт (читаем статью: ), есть навигационная карта. И теперь, когда посетитель (клиент) кликнет по какой либо области рисунка с таким атрибутом, браузер запомнит координаты этого клика и отправит их на сервер, где специальная программка обработает эти данные и перенаправит пользователя на тот адрес который указан в карте на сервере, в соответствии с полученными от браузера клиента координатами точки.
Пишется так:
Где адрес навигационной карты на каком либо сайте.. размещённом на том или ином сервере..
Всё равно непонятно? Если да, то тогда не стоит заморачивотся по этому поводу.. используйте usemap , на мой взгляд такое решение будет лучшим в большинстве случаев при использовании навигационных карт.
Что бы без труда определить координаты той или иной точки на Вашей навигационной карте откройте рисунок графическим редактором тем же Paint к примеру.. там, когда будете двигать указателем по рисунку, увидите две меняющиеся цифры, это и есть координаты пикселя Х и У на данном рисунке. В Paint эта панелька расположена в нижней части экрана.
При создании страницы с навигационной картой тег
всегда должен быть выше самой карты То есть писать вот так:
Можно, но не нужно.. потому что при загрузке страницы могут возникнуть проблемы, так как карта с разметкой уже загрузилась, а самого рисунка ещё нет..
И ещё что касается загрузки..
В этом месте кода может быть всё что угодно длинный текст, таблицы, графика.. но всё же лучше здесь ничего не писать
А писать здесь, так как во время загрузки страницы, пользователь не дождавшись её окончания, может пытаться нажимать на кнопки указанные в навигационной карте которая к этому времени еще не загрузилась..
Загрузка...
