В этой статье мы с Вами рассмотрим как составить клиентскую изображение-карту, при клике на определенную область которой, мы сможем перейти по определенной ссылке. Составление изображений-карт можно редко встретить на сайтах, так как этот процесс довольно-таки трудоемкий, но если вы хотите удивить ваших посетителей необычной формой для ссылок и у вас есть в распоряжении свободное время для самообразования, то эта статья для вас.
Тег
Атрибутами тега мы указываем как координаты области (атрибут coords ), так и тип необходимой нам фигуры (атрибут shape ):
Пример использования
Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):
Выбери фигуру:
И так по порядку, что мы сделали в этом примере:
- Разместили изображение (тег
), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе
- Размещаем изображение-карту (тег
- Размещаем четыре тега , которые определяют интерактивные области в изображении-карте:
- Первой мы задаем прямоугольную область (атрибут shape со значением "rect" ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
- Второй указываем круглую область (атрибут shape со значением "circle" ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x , а второе по оси y , третее определяет радиус ).
- Что касается третей и четвертой фигуры , то они составлены по принципу многоугольной области (атрибут shape со значением "poly" ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).
Обращаю Ваше внимание на то, что если у тега Практическое задание № 26.
Нюанс : для чистоты практического задания предлагаю в качестве первой точки использовать вершину звезды и двигаться по часовой стрелке. В качестве значения атрибута href я указал # в этом случае она выступает как заглушка (вы остаетесь на той же странице), вы можете сделать переход на любую страницу.
Подсказка : чтобы получить координаты изображения воспользуйтесь редактором изображений, даже самый простой редактор, например, Paint , отображет координаты курсора. Выпишите координаты на листок или в отдельный файл и внесите значения на страницу.
Если у Вас возникнут трудности с выполнением задания, то проинспектируйте код страницы, открыв пример в отдельном окне и внимательно его изучите.
Тег
Внутри контейнера
- один или более элементов < >. Эти элементы не имеют содержимого, но определяют геометрические регионы карты изображений и гиперссылки, ассоциированные с каждым регионом
- содержимое уровня блока. Это содержимое должно включать < >, которые специфицируют геометрические регионы карты и ссылки, ассоциированные с каждым регионом
Если тег
Если регионы перекрываются, элемент, определяющий регион, который появился раньше в документе, имеет приоритет.
HTML : 3.2 | 4 / XHTML : 1.0 | 1.1
Синтаксис
Атрибуты
| class | определяет имя используемого класса |
|---|---|
| dir | определяет направление символов:
|
| id | уникальный идентификатор |
| lang | определяет язык отображаемого документа |
| name | имя карты изображения. Используется, как значение параметра usemap тега |
| onblur | потеря фокуса элементом |
| onclick | щелчок на элементе |
| ondblclick | двойной щелчок на элементе |
| onfocus | получение фокуса элементом |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| onmouseover | помещение указателя мыши на элемент |
| onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
| style | задает встроенную таблицу стилей |
| title | всплывающая подсказка |
Пример
- закрывающий тег обязателен ()
- атрибут id является обязательным
- рекомендуется предоставлять текстовую альтернативу графической карте для тех случаев, когда графика недоступна или пользователь не может её получить
- не рекомендуется использовать карту-изображений в качестве основной навигации, из-за слабой поддержки старыми и голосовыми браузерами
Тег — элемент уровня блока, т.е. содержимое тега всегда начинается с новой строки. После тега также добавляется перенос строки.
HTML - Урок 15. Навигационные карты - map
Многие html-страницы используют для организации ссылок так называемые карты-изображения. При таком подходе берется изображение и к различным его областям привязываются ссылки. Самым распространенным примером являются туристические карты мира, щелкаете по ее части с какой-либо страной и попадаете на страницу, посвященную этой стране.Такие карты-изображения могут быть клиентскими и серверными. Ссылки клиентских карт хранятся в самом документе и по щелчку мыши браузер сам определяет, к какой области относятся координаты этой точки и осуществляет переход по нужной ссылке.
При серверном варианте эти координаты сначала передаются на сервер, там обрабатываются специальной программой и только после этого происходит переход по ссылке.Очевидно, что клиентские навигационные карты предпочтительнее. Их мы и рассмотрим.
Для примера представим, что мы являемся магазином бытовой техники и в шапке нашего сайта у нас расположена вот такая картинка:
Сделаем из нее навигационную карту, т.е. при щелчке по холодильнику будет осуществляться переход на страницу, посвященную холодильникам (с моделями, описанием и ценами), при щелчках по пылесосу и стиральной машине на соответствующие им страницы.
Для этого нам надо описать области на этой картинке, которые будут ссылками. Для описания таких областей используются теги с единственным параметром name , который задает имя карты-ссылок и используется потом для ссылки на эту карту.
Нашу карту надо подключить к нашей картинке, для этого в тег
Для описания конкретных областей внутри тегов используются теги . Этот тег имеет следующие параметры:
- shape
- определяет форму области, может принимать следующие значения:
- rect - область в виде прямоугольника,
- circle - область в виде круга,
- poly - область в виде многоугольника,
- default - вся область.
- cootds
- задает координаты отдельной области:
- для rect задаются координаты верхнего левого и правого нижнего углов прямоугольника,
- для circle задаются координаты центра круга и радиус,
- для poly задаются координаты вершин многоугольника в нужном порядке.
- href - определяет адрес ссылки.
- target - применяется при использовании фреймов и указывает фрейм в который нужно загрузить страницу.
- alt - задает альтернативный текст для области.
Теперь надо определиться с координатами этих областей. На самом деле это самый трудоемкий процесс. В нашем примере мы решили, что области будут прямоугольными и значительно облегчили себе задачу, а представьте, сколько точек нужно задать, например, для обвода страны на карте. Тем не менее, нам надо задать координаты верхнего левого и правого нижнего углов трех прямоугольников.
Для этих целей обычно используется какая-нибудь программа, например, Image Ready, которая имеет специальный инструмент для обводки областей и автоматически строит описания этих областей. Рассмотрение работы этих программ не входит в курс HTML, поэтому здесь мы зададим координаты "на глаз". Посмотрите еще раз на наше изображение:
Ширина нашей картинки 738 пикселов, а высота - 192 пиксела. Проведем линии по границам наших областей и примерно определим координаты. Теперь мы готовы добавить эти параметры в наши теги .
Результат:
Теперь наши области стали ссылками (если подвести курсор мыши, он превращается в ладошку). На этом сайте нет страниц, посвященных холодильникам, поэтому ссылки ведут на эту же страницу, но если вы создадите нужные страницы, то при щелчке по области будет осуществляться переход.
На этом наши уроки подошли к концу. Вы ознакомились со всеми возможностями языка HTML. Для закрепления навыков ознакомьтесь с двумя уроками Делаем сайт - табличная верстка .
Напоследок, надо сказать, что в 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 эта панелька расположена в нижней части экрана.
При создании страницы с навигационной картой тег
всегда должен быть выше самой карты То есть писать вот так:
Можно, но не нужно.. потому что при загрузке страницы могут возникнуть проблемы, так как карта с разметкой уже загрузилась, а самого рисунка ещё нет..
И ещё что касается загрузки..
В этом месте кода может быть всё что угодно длинный текст, таблицы, графика.. но всё же лучше здесь ничего не писать
А писать здесь, так как во время загрузки страницы, пользователь не дождавшись её окончания, может пытаться нажимать на кнопки указанные в навигационной карте которая к этому времени еще не загрузилась..
Значение и применение
Тег
Поддержка браузерами
| Тег | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| Да | Да | Да | Да | Да | Да |
Атрибуты
Атрибутами тега мы указываем как координаты области (атрибут coords ), так и тип необходимой нам фигуры (атрибут shape ):
Пример использования
Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):
Выбери фигуру:
И так по порядку, что мы сделали в этом примере:
- Разместили изображение (тег
), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе
- Размещаем изображение-карту (тег
- Размещаем четыре тега , которые определяют интерактивные области в изображении-карте:
- Первой мы задаем прямоугольную область (атрибут shape со значением "rect" ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
- Второй указываем круглую область (атрибут shape со значением "circle" ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x , а второе по оси y , третее определяет радиус ).
- Что касается третей и четвертой фигуры , то они составлены по принципу многоугольной области (атрибут shape со значением "poly" ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).
Обращаю Ваше внимание на то, что если у тега