Карты-изображения | htmlbook.ru
Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение.
Клиентский вариант карты-изображения
Для указания того, что изображение является картой, используется атрибут usemap тега <img>. В качестве значения указывается ссылка на описание конфигурации карты.
Рис. 1. Закладки являются ссылками, созданными с помощью карты
Чтобы сделать ссылки на закладки, показанные на рис. 1, следует использовать следующий код (пример 1).
Пример 1. Использование карты-изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Карта-изображение</title> </head> <body> <p><img src="images/map.gif" usemap="#map" alt="Навигация"></p> <p><map name="map"> <area shape="poly" alt="Закладка 2" coords="210,27, 203,9, 202,6, 197,2, 192,1, 120,1, 115,2, 110,6, 112,9, 119,27, 119,32, 211,32, 210,27" href="2.html"> <area shape="poly" alt="Закладка 3" coords="302,27, 295,9, 293,6, 289,2, 283,1, 212,1, 206,2, 202,6, 203,9, 210,27, 211,32, 284,32, 303,32, 302,27" href="3.html"> <area shape="poly" alt="Закладка 4" coords="302,27, 303,32, 394,32, 393,27, 386,9, 382,3, 375,1, 303,1, 298,2, 293,6, 295,9, 302,27" href="4.html"> </map></p> </body> </html>
Для указания браузеру, что изображение является картой, применяется атрибут usemap. Он является ссылкой на описание конфигурации карты, которая задается тегом <map>. Значение атрибута name данного тега должно соответствовать имени в usemap. Для задания активой области, являющейся ссылкой на HTML-документ, используется тег <area>.
Атрибуты тега AREA
shape
Определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
alt
Добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится.
coords
Задает координаты активной области. Координаты отсчитываются в пикселах от левого верхнего угла изображения, которому соответствует значение 0,0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.
Для окружности задаются три числа — координаты центра круга и радиус.
<area shape="circle" coords="230,340, 100" href="circle.html">Для прямоугольника — координаты левого верхнего и правого нижнего угла.
<area shape="rect" coords="24,18, 210,56" href="rect.html">Для полигона задаются координаты его вершин (рис. 2).
Рис. 2. Координатные точки для полигона
href
Определяет адрес ссылки для области. Правила записи такие же, как и для тега <a>.
Карты-изображения позволяют создавать ссылки на разные области одного изображения. Использование этого подхода наглядней, чем обычные текстовые ссылки и позволяет применять всего один графический файл для организации ссылок. Однако не нужно считать, что карты-изображения следует включать везде, где требуются графические ссылки. Прежде всего, следует оценить все доводы за и против, а также просмотреть альтернативные варианты.
Преимущества карт-изображений
1. Карты позволяют задать любую форму области ссылки. Учитывая, что изображения по своей природе прямоугольны, сделать графическую ссылку сложной формы, например для указания географического района, без карт-изображений не представляется возможным. Как правило, в географической тематике карты-изображения и применяются наиболее часто.
2. С одним файлом удобней работать — не приходится заботиться о состыковке отдельных фрагментов и рисунок легко можно поместить в нужное место.
Недостатки
1. Нельзя установить всплывающую подсказку и альтернативный текст для отдельных областей. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Для карт-изображений эта особенность является актуальной, ведь если отключить просмотр изображений, что делают многие пользователи, то в итоге увидим лишь один пустой прямоугольник.
2. При сложной форме области ссылки увеличивается объем кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико. Справедливости ради, следует отметить, что сложные формы являются частным случаем и применяются достаточно редко.
3. С картами-изображениями нельзя сделать разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
Юзабилити
С позиции удобства пользователей, карты-изображения имеют только одно преимущество — ссылки разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей. Во всех остальных отношениях от них проку нет — обычные текстовые ссылки более информативны и им не страшно отключение показа картинок в браузере. Тот факт, что одно изображение загружается быстрее, чем та же картинка, но порезанная на фрагменты и сохраненная в виде набора графических файлов, легко обходится. Каждый из таких конечных файлов можно уменьшить, используя индивидуальные настройки оптимизации. В итоге, общий объем всех фрагментов будет занимать меньше места, чем одно изображение. Не стоит сбрасывать со счетов и психологический фактор — человеку кажется, что набор маленьких картинок загружается быстрее, чем одна большая.
Основной недочет карт — нет четко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами уже на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематичным.
Альтернативные варианты
Не всегда есть острая необходимость использовать карты-изображения, поэтому следует обратить внимание на то, что существуют и другие возможные варианты выполнения поставленной задачи.
Использование FLash
Во flash-роликах можно создавать разные области ссылок, используя возможности векторной графики. Благодаря широким возможностям, на Flash можно создавать потрясающие меню и средства навигации. Но тут тоже требуется осторожность, чтобы не потерять за деревьями леса.
Разрезание изображений
Это одно из популярных средств в дизайне. Одно изображение в этом случае разрезается с помощью специальных программ на фрагменты, которые окончательно сводятся вместе, создавая иллюзию цельной картинки. Хотя области разрезания могут быть только прямоугольные, в большинстве случаев этого вполне достаточно для создания ссылок. Для каждого фрагмента можно выбрать наиболее подходящий графический формат, в котором он будет сохранен, параметры оптимизации, добавить альтернативный текст. Тогда даже при отключенном показе картинок, будут хорошо видны границы областей и замещающий изображение текст.
Резюме
Как выяснилось, причина использовать карты-изображения только одна — сложная форма ссылок, продиктованная задачами дизайна. Типичное применение — регионы географической карты, которые служат ссылками. Во всех остальных случаях можно обойтись и текстовыми ссылками, а при необходимости создания графической навигации, одно изображение для удобства можно разрезать на фрагменты. Такой подход создаст больше удобства пользователям, особенно тем, которые в силу разных причин отключают показ изображений в браузере. О них тоже нужно помнить.
Карта изображения в HTML
Всем привет. С Вами Бернацкий Андрей.
В этом уроке я расскажу о том, как создавать карты-изображений в HTML.
Например, при нажатии мыши на активную зону переходим на определенный URL. Если сидите в vkontakte.ru, там пример карты-изображения – это когда отмечают на фотографии, и при наведении курсора мыши на человека, отмеченного на фотографии, показывается его имя и фамилия, а при щелчке мыши происходит переход на страницу этого человека.
Сначала предлагаю Вам видео версию данного урока:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееВидео версия урока
Делается это все достаточно просто. Берем любую фотографию с друзьями. Лучше вставить ее в свой отдельный блок <div>.
<div> <img src=»SDC10369.JPG» border=»0″ usemap=»#img-nav» /> </div>
<div> <img src=»SDC10369.JPG» border=»0″ usemap=»#img-nav» /> </div> |
Я взял для примера свою фотографию.
Для div задан id для того, что бы можно было назначить какие-нибудь отступы или еще, что нужно будет. Я в своем примере ничего задавать не буду.
Главный параметр у тега img в данном случае – это usemap=»#img-nav». Он указывает на карту с каким именем мы будем ссылаться.
Далее создаем саму карту изображения. Карту создает тег <map>. Итак сейчас опишем активную зону, по нажатию на которую перейдем на сайт webformyself.com.
<map name=»img-nav»> <area shape=»rect» coords=»240,150,420,440″ href=»http://www.webformyself.com» title=»Andrey» alt=»Andrey»> </map>
<map name=»img-nav»> <area shape=»rect» coords=»240,150,420,440″ href=»http://www.webformyself.com» title=»Andrey» alt=»Andrey»> </map> |
Идем по порядку.
<map name=»img-nav»> — значение параметра name должно совпадать со значением параметра usemap тега img, только у тега map оно записывается без символа #.
Далее тег <area> — говорит, что сейчас выделим активную зону.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееПараметр shape тега <area> — показывает, какого типа будет наша область. На то, какая будет наша область, показывает значение параметра 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.
Далее параметр shref содержит адрес страницы, или E-mail адрес. То есть, то же что и у обычной ссылки.
title=»Andrey» alt=»Andrey» уже знакомые параметры. Останавливаться на них не буду.
Полный код представлен ниже:
<div> <img src=»SDC10369.JPG» border=»0″ usemap=»#img-nav» /> <map name=»img-nav»> <area shape=»rect» coords=»240,150,420,440″ href=»http://www.webformyself.com» title=»Andrey» alt=»Andrey»> </map>
<div> <img src=»SDC10369.JPG» border=»0″ usemap=»#img-nav» /> <map name=»img-nav»> <area shape=»rect» coords=»240,150,420,440″ href=»http://www.webformyself.com» title=»Andrey» alt=»Andrey»> </map> |
Теперь при щелчке мыши на изображении по мне, будет осуществлен переход на www.webformyself.com.
Если нужно несколько активных зон, то просто добавляем новые теги
и описываем их так, как будет нужно.
На этом, выпуск посвящённый созданию карт-изображений в HTML, завершим.
Автор: Андрей Бернацкий.
До встречи в следующих уроках.
Напоминаю Вам о том, что Вы можете скачать видео версии данного урока себе на компьютер по ссылке:
Видео версия урока
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
СмотретьКарта изображения в HTML (навигационные карты). Урок №11
Для того, чтобы создать карту изображения вам пригодятся знания о том, как вставить картинку и ссылку в html-документ.
Теперь давайте выясним, что такое карта изображения.
С помощью карты изображения вы можете сделать так, что при нажатии на разные области одной и той же картинки, вы попадаете на разные страницы. Карту изображения некоторые называют еще навигационной картой.
Я понимаю, что на словах это тяжело понять, потому предлагаю посмотреть пример, как выглядит карта изображения вживую.
Только обратите внимание: картинка одна, а области и путь перехода разный.
[пример]
Не бойтесь, это вовсе не сложно. Самое главное – понять теорию и закрепить практикой.
Ну что, приступим к теории.
Карты изображения (навигационные карты) задаются тегом <map></map>.
Тег <map></map> — это коробка, внутри которой размещают теги <area>.
Тег <area> предназначен для определения геометрической области с ссылкой, привязанной к каждой области.
Пример:
<map> <area> <area> <area> </map>
Атрибуты areа
1. Атрибут shape
shape – определяет форму области (прямоугольником, кругом, многоугольником).
Прямоугольник — «rect». Пример: shape=»rect»;
круг — «circle». Пример: shape=»circle»;
многоугольник — «poly». Пример: shape=»poly»
Пример:
<map> <area shape="rect"> </map>
2. Атрибут coords
coords – это расположение геометрической формы.
Давайте рассмотрим пример на геометрической форме прямоугольника.
Прямоугольная область
Вы уже знаете, что если вам нужна форма прямоугольника, значит нужно прописать в атрибуте shape значение «rect».
<map> <area shape="rect"> </map>
Теперь переходим к координатам.
Точка отсчета начинается с левого верхнего угла картинки, координаты которого (0;0)
Порядок записи координат для атрибута coords будет таким:
<area shape="rect" coords="x1,y1,x2,y2">
Значит, нужно указать координаты рабочей области у прямоугольника верхний-левый и нижний-правый угол.
Для примера с прямоугольником №1 возьмите такие координаты:
x1=25, y1=36, x2=114, y2=98
Вот так будет выглядеть код:
<map> <area shape="rect" coords="25,36,114,98"> </map>
Дальше нужно указать путь(ссылку) для выбранной области. Как сделать ссылку в HTML, вы уже знаете.
<map> <area href="https://bloggood.ru" shape="rect" coords="25,36,114,98"> </map>
Все пока что хорошо. Но нам теперь нужно связать картинку с картой.
Для этого придумайте любое название для карты, например, «karta1» и пропишите его в теге <map> через атрибут name.
<map name="karta1"> <area href="https://bloggood.ru" shape="rect" coords="25,36,114,98"> </map>
Теперь свяжем карту с картинкой. Для этого используем атрибут usemap.
Пример написания:
usemap=»#имя_карты»
В нашем случае это будет выглядеть следующим образом:
<img src="kartinka.gif" usemap="#karta1">
Теперь соберем все вместе и пропишем еще координаты к другому прямоугольнику №2 с такими данными (x1=153, y1=11, x2=219, y2=127).
Пример:
<html> <head> <title> Карта изображения в HTML (навигационные карты). Урок №11</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <img src="kartinka.gif" usemap="#karta1"> <map name="karta1"> <area href="https://bloggood.ru/" shape="rect" coords="25,36,114,98"> <area href=" https://bloggood.ru/avtor/" shape="rect" coords="153,11,219,127"> </map> </body> </html>
Теперь смотрите на результат. Нажмите на прямоугольник №1 и на прямоугольник №2
[пример]
Круглая область
Для начала нужно указать тип области. Для этого пропишем в атрибуте shape значение «circle».
<map> <area shape="circle"> </map>
Теперь переходим к координатам.
Чтобы создать координаты для круглой области, нужно прописать данные к центру (xy) и указать длину радиуса (R).
Порядок записи координат для атрибута coords будет таким:
<area shape="circle" coords="x,y,R">
Для круга №1 возьмите такие координаты:
x=46, y=48; а длина радиуса — R=35
<map> <area shape="circle" coords="46,48,35"> </map>
Теперь дадим карте название и привяжем карту к рисунку:
<img src="kartinka-2.gif" usemap="#karta2"> <map name="karta2"> <area href="https://bloggood.ru/" shape="circle" coords="46,48,35"> </map>
Теперь соберем все вместе и пропишем еще координаты к кругу №2 с такими данными x=158, y=75, R=53.
Пример:
<html> <head> <title> Карта изображения в HTML (навигационные карты). Урок №11</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <img src="kartinka-2.gif" usemap="#karta2"> <map name="karta2"> <area href="https://bloggood.ru/ " shape="circle" coords="46,48,35"> <area href=" https://bloggood.ru/avtor/" shape="circle" coords="158,75,53"> </map> </body> </html>
Теперь смотрите на результат. Нажмите на круг №1 и на круг №2:
[пример]
Многоугольная область
Многоугольная область самая сложная область в навигационной карте.
Для начала нужно указать тип области. Для этого пропишите в атрибуте shape значение «poly»
<map> <area shape="poly"> </map>
Теперь переходим к координатам.
Порядок записи координат для атрибута coords будет таким:
<area shape="poly" coords="x1,y1,x2,y2,...,xN,yN">
Разъяснение:
x1,y1 — координаты первого угла;
x2,y2 — координаты второго угла;
xN,yN — координаты последнего угла
То есть, для многоугольника №2 это выглядит вот так:
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5">
Пример:
<map> <area shape="poly" coords="168,9,232,29,200,97,223,129,153,119"> </map>
Теперь дадим карте название и привяжем карту к рисунку:
<img src="kartinka-3.gif" usemap="#karta3"> <map name="karta3"> <area href="https://bloggood.ru/" shape="poly" coords="168,9,232,29,200,97,223,129,153,119"> </map>
Теперь соберем все вместе и пропишем еще координаты к шестиугольнику №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> <head> <title> Карта изображения в HTML (навигационные карты). Урок №11</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <img src="kartinka-3.gif" usemap="#karta3"> <map name="karta3"> <area href="https://bloggood.ru/" shape="poly" coords="168,9,232,29,200,97,223,129,153,119"> <area href="https://bloggood.ru/avtor/" shape="poly" coords="54,20,109,20,147,58,109,96,54,96,16,58"> </map> </body> </html>
Теперь смотрите на результат. Нажмите на многоугольник №1 и на многоугольник №2:
[пример]
Возможность комбинирования
Бывают такие случаи, когда нужно использовать одновременно на одной картинке разные области, например, круг и прямоугольник:
<img src="kartinka-4.gif" usemap="#karta4"> <map name="karta4"> <area href="https://bloggood.ru/avtor/" shape="circle" coords="46,48,35,"> <area href=" https://bloggood.ru/" shape="rect" coords="153,11,219,127"> </map>
Дополнение с использованием TITLE
Для каждой области можно прописать подсказки, используя атрибут title.
Пример:
<html> <head> <title> Карта изображения в HTML (навигационные карты). Урок №11</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <img src="kartinka-4.gif" usemap="#karta4"> <map name="karta4"> <area href="https://bloggood.ru/avtor" shape="circle" coords="46,48,35," title="круг"> <area href=" https://bloggood.ru/" shape="rect" coords="155,12,220,130" title="прямоугольник"> </map> </body> </html>
Теперь смотрите на результат. Наведите курсор мышки на круг, а потом на прямоугольник:
[пример]
Вот и все. С картой изображения в HTML (навигационная карта) мы разобрались.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: html, основы
Карты-изображения | WebReference
Карты-изображения позволяют создавать ссылки произвольной формы для разных областей одного изображения. Вначале рассмотрим плюсы и минусы данной технологии.
Плюсы
- Карты-изображения позволяют задать любую форму области ссылки, что особенно пригодится для указания географического района. Поэтому, карты-изображения применяются наиболее часто в географической тематике.
- С одной картинкой удобнее работать — не приходится заботиться о состыковке отдельных фрагментов при разрезании, и рисунок легко можно поместить в нужное место.
Минусы
- При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико.
- Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать.
- При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок.
- К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
- Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично.
С позиции удобства пользователей карты-изображения имеют только одно преимущество — включение ссылок разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей.
Карты-изображения реализуются в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Для указания того, что изображение является картой, применяется атрибут usemap элемента <img>. В качестве значения используется указатель на описание конфигурации карты, которая устанавливается с помощью элемента <map>. Значение атрибута name у <map> должно соответствовать имени в usemap. При этом значение usemap в <img> начинается с символа решётки (пример 1).
Пример 1. Создание карты-изображения
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Карта-изображение</title>
</head>
<body>
<p><img src="image/navigate.png" alt="Навигация по сайту" usemap="#navigation"></p>
<map name="navigation">
<area shape="poly" coords="113,24,211,24,233,0,137,0" href="page/inform.html" alt="Информация" title="Информация">
<area shape="poly" coords="210,24,233,0,329,0,307,24" href="page/activity.html" alt="Мероприятия" title="Мероприятия">
<area shape="poly" coords="304,24,385,24,407,0,329,0" href="page/depart.html" alt="Отделения" title="Отделения">
<area shape="poly" coords="384,24,449,24,473,0,406,0" href="page/techinfo.html" alt="Техническая информация" title="Техническая информация">
<area shape="poly" coords="449,24,501,24,525,0,473,0" href="page/study.html" alt="Обучение" title="Обучение">
<area shape="poly" coords="501,24,560,24,583,0,525,0" href="page/work.html" alt="Работа" title="Работа">
<area shape="poly" coords="560,24,615,24,639,0,585,0" href="page/misk.html" alt="Разное" title="Разное">
</map>
</body>
</html>Внутри контейнера <map> располагается один или несколько элементов <area>, они задают форму области, её координаты, устанавливают адрес документа, на который следует сделать ссылку, а также всплывающую подсказку.
Элемент <area> имеет следующие атрибуты.
- shape — определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
- alt — добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href.
- title — выводит всплывающую подсказку при наведении курсора на область.
- href — задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента <a>.
- coords — задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.
Для окружности задаются три числа — координаты центра круга и радиус.
<area shape="circle" coords="230, 340, 100" href="circle.html" alt="">Для прямоугольника — координаты левого верхнего и правого нижнего угла.
<area shape="rect" coords="24,18, 210, 56" href="rect.html" alt="">Для полигона задаются координаты его вершин, как показано на рис. 1.
Рис. 1. Координатные точки для полигона
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.08.2018
Редакторы: Влад Мержевич
Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15
Главная » Основы HTML » Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15
Всем привет!
Продолжаем изучать основы HTML. . Карту изображений еще называют навигационной картой, но это не так уж и важно.
Давайте выясним, что такое карта изображения (навигационная карта) и где ее можно использовать на практике.
Карта изображения (навигационная карта) – это картинка, на которой размещается одна или несколько указанных областей для ссылок.
Если не сильно поняли, скажу так: есть одна картинка, на которой может размещаться выделенная область (круг, прямоугольник, квадрат и др.) и к этой области подвязываются адреса к другим сайтам или к вашим страницам.
[посмотреть пример]
В примере использовалась одна картинка, где область и путь перехода разный
Вот сейчас научимся создавать что-то подобное.
Для того чтобы создать карту изображения, вам потребуется вспомнить, как вставить картинку и ссылку на веб страницу.
Переходим к практике.
Как сделать карту изображения в HTML
Чтобы создать карту изображения в HTML, вставьте вот такой каркас:
<map> <area> <area> <area> </map>
○ тег map
Тег <map></map> — это главный контейнер для создания карты изображения, внутри которого содержатся другие теги, такие как <area> .
Закрывающий тег обязательный.
* атрибуты тега map
○ название карты
Обязательно карте нужно дать имя и для этого используют атрибут «name»:
<map name="имя_карты">
○ тег area
Тег <area> — этот тег предназначен для указания геометрической области со ссылкой.
* атрибуты тега area
○ как определить форму области
Чтобы определить форму области (прямоугольник, круг, многоугольник) используют для тега <area> атрибут «shape» с такими значениями:
- rect — Прямоугольник. Пример: shape=»rect»;
- circle — Круг. Пример: shape=»circle»;
- poly — Многоугольник. Пример: shape=»poly»
Пример:
<area shape="rect">
○ как указать расположение геометрической формы
Чтобы указать расположение геометрической формы (прямоугольником, кругом, многоугольником) используют для тега <area> атрибут «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
Прямоугольник
К примеру, у меня есть вот такая картинка прямоугольников:
Вставим картинку в html документ:
<img src="kartinka.gif">
Теперь создаем блок для карты изображения и даем ему любое название через атрибут «name», к примеру «karta1»
<img src="kartinka.gif"> <map name="karta1"> </map>
Далее связываем картинку с картой. Для этого и нужно было дать название к карте. Чтобы связать карту, пропишите к картинке атрибут «usemap»:
<img src="kartinka.gif" usemap="#имя_карты">
Имя карты обязательно должно быть через решетку «#»:
<img src="kartinka.gif" usemap="#karta1"> <map name="karta1"> </map>
Теперь в теге <area> указываем координаты, геометрическую форму и ссылку для перехода.
Вот координаты первого прямоугольника:
x1=25, y1=36, x2=114, y2=98
а вот такие будут ко второму:
x1=153, y1=11, x2=219, y2=127
Вот готовый код:
<img src="kartinka.gif" usemap="#karta1"> <map name="karta1"> <area href="http://stepkinblog.ru/html/" shape="rect" coords="25,36,114,98"> <area href="http://stepkinblog.ru/avtor/" shape="rect" coords="153,11,219,127"> </map>
Просмотрите готовый код. Вам все понятно, если нет, просмотрите с самого начала теги для создания навигационной карты. Если это не помогло, пишите в комментариях.
А мы смотрим на результат, что же у меня вышло. Попробуйте навести на прямоугольник №1, а потом на №2 (можно нажать, они кликабельны):
[посмотреть пример]
Круг
К примеру, у меня есть вот такая картинка круга:
Вот координаты первого круга:
x=46, y=48; а длина радиуса — R=35
а вот такие будут для второго круга:
x=158, y=75, R=53
Прежде, чем посмотреть готовый код, попробуйте сами написать HTML код и сверить его с моим.
Готовый код будет вот таким:
<img src="kartinka-2.gif" usemap="#karta2"> <map name="karta2"> <area href="http://stepkinblog.ru/html/" shape="circle" coords="46,48,35"> <area href="http://stepkinblog.ru/css/" shape="circle" coords="158,75,53"> </map>
Еще раз повторюсь в разъяснениях, что я делал в коде:
Строка №1
Вставил картинку в HTML файл и привязал изображение к карте с помощью атрибута «usemap»:
<img src="kartinka-2.gif" usemap="#karta2">
Строка №2
Создал блок для карты изображения и дал карте название для привязки к картинке с помощью атрибута «name»:
<map name="karta2">
Обратите внимание, название карты (name=»имя») должно совпадать с привязкой картинки (usemap=»#имя»). Это важно, так как карта изображений работать не будет.
Строка №3 и №4
Указал фигуру и ее координаты, а также привязал к фигуре ссылку
<area href="http://stepkinblog.ru/html/" shape="circle" coords="46,48,35"> <area href="http://stepkinblog.ru/css/" shape="circle" coords="158,75,53">
Итак, если вы все правильно сделали, результат будет таким:
[посмотреть пример]
Попробуйте навести на круг №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
Готовый код будет вот таким:
<img src="kartinka-3.gif" usemap="#karta3"> <map name="karta3"> <area href="http://stepkinblog.ru/php/" shape="poly" coords="168,9,232,29,200,97,223,129,153,119"> <area href="http://stepkinblog.ru/bootstrap/" shape="poly" coords="54,20,109,20,147,58,109,96,54,96,16,58"> </map>
Результат будет вот таким:
[посмотреть пример]
Хочу дополнить, что углов может быть столько, сколько вы хотите и сколько вы укажите:
<area shape="poly" coords="x1,y1,x2,y2,...,xN,yN">
Разъяснение:
x1, y1 — координаты первого угла;
x2, y2 — координаты второго угла;
xN, yN — координаты последнего угла
ДОПОЛНЕНИЕ:
Комбинированная карта изображений
Карту изображений можно комбинировать сразу с разными фигурами. Что я имею в виду? На одной картинке, могут быть указаны различные области разных фигур.
Вот, к примеру, так:
<img src="kartinka-4.gif" usemap="#karta4"> <map name="karta4"> <area href="http://stepkinblog.ru/wordpress/" shape="circle" coords="46,48,35,"> <area href="http://stepkinblog.ru/avtor/" shape="rect" coords="153,11,219,127"> </map>
В примере я указал область для круга и для прямоугольника.
Подсказка для ссылки в карте изображений
Для каждой выбранной области можно прописать подсказки, которые будут появляться, если навести курсор мышки. Для подсказки используют атрибут «title» к тегу «area»:
<img src="kartinka-4.gif" usemap="#karta4"> <map name="karta4"> <area href="http://stepkinblog.ru/wordpress/" shape="circle" coords="46,48,35," title="wordpress"> <area href="http://stepkinblog.ru/avtor/" shape="rect" coords="153,11,219,127" title="Автор блога"> </map>
Вот результат:
[посмотреть пример]
Наведите курсор мыши на круг, а потом на прямоугольник. Вы увидите, как появятся подсказки, на кружке – «wordpress», а на прямоугольнике — «Автор блога».
Вот и освоили карту изображения на HTML. Самое сложное в карте изображений – это вычислить правильно координаты фигуры. Специальной формулы нет и приходится по несколько раз подбирать координат.
Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.
Предыдущая запись
Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14
Следующая запись
Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16
Карта изображения в HTML
Карта изображения создаёт на изображении одну или несколько областей, которые являются ссылками. Вот пример такого изображения:
Нажмите на определённую часть картинки и Вы перейдёте на соответствующий сайт.
Карта изображения создаётся при помощи тега <map>. У него должен быть атрибут name, который задаёт имя карты. А у тега <img> должен быть атрибут usemap. Его значение совпадает с именем карты, только в начале идёт знак #. Таким образом изображение связывается с определённой картой. Для примера сделаем такое изображение, как на этой странице. Добавим на страницу картинку и создадим для неё карту.
+
8 | <img src="imagemap.jpg" alt="Карта картинки" usemap="#newmap"> <map name="newmap"> </map> |
Внутри тега <map> должны находиться теги <area>, определяющие конкретные области, которые становятся ссылками. Для указания области у этих тегов есть атрибут shape. Он устанавливает форму области.
shape=»rect» — прямоугольник
shape=»circle» — круг
shape=»poly» — многоугольник
shape=»default» — всё изображение
Кроме формы области указываются её координаты при помощи атрибута coord. Координаты указываются в пикселях и отсчитываются от левого верхнего угла изображения. Они перечисляются через запятую. Для каждой формы области координаты определяются по-разному. Для прямоугольника нужно указать два угла:
X первого угла, Y первого угла, X второго, Y второго
Для круга указываются координаты центра и радиус:
X центра, Y центра, радиус
Для многоугольника нужно перечислить координаты всех углов:
X1, Y1, X2, Y2Кроме рассмотренных атрибутов, тег <area> имеет те же атрибуты, что и тег <a>. Прежде всего, атрибут href, указывающий URL, на который нужно перейти.
В примере сделаем одну круглую область и одну прямоугольную. Для этого добавим в тег <map> такой код:
10 | <area href="http://yandex.ru" shape="circle" coords="100,70,50"> <area href="http://mail.ru" shape="rect" coords="22,143,210,185"> |
Области на карте изображения могут пересекаться. Выше будет та область, которая идёт раньше в коде страницы.
Карта изображения в HTML: Знакомство.
Доброго времени суток. Меня зовут Михаил.
Специализируюсь на создании сайтов и их настройке. Разрабатываю современные сайты, учитывая каждое пожелание заказчика уже более 7 лет. Завершены сотни проектов.
Если Вам необходимо создать сайт, настроить его, или получить другую помощь в этой области, то смело выбирайте услугу или свяжитесь со мной. Всегда рад Вам помочь и готов ответить на Ваши вопросы.
В прошлом видео мы начали знакомство с изображениями. Узнали, как происходит вставка изображения в HTML, какие существуют параметры изображений и многое другое.
Сегодня продолжим разговор о параметрах. А именно поговорим об атрибуте ismap. Для чего он нужен? И как его использовать?
Атрибутам ismap и usemap посвящены отдельные видео уроки не просто так. Дело в том, что эти видео посвящены одному интересному методу использования изображений в HTML. Называется он карта изображения.
В HTML существует возможность кроме указания стандартной ссылки-картинки и возможность создания карты изображения. Это когда на одном изображении мы можем указать несколько активных областей, например ссылок.
В этом видео мы познакомимся с понятием карта изображения. Посмотрим, как она может выглядеть и как она работает. И поговорим подробнее об атрибуте ismap который поможет нам создать некую серверную карту изображения, которая в свою очередь поможет нам определить координаты активных областей.
Кроме этого мы поговорим и о других способах определения координат, и под видео Вы сможете найти пару ссылок, которые использованы в видео уроке.
Видео урок: Карта изображения в HTML.
Онлайн сервис для определения координат карты изображения: http://www.maschek.hu/imagemap/imgmap
Статья на Хабре, о еще одном практическом способе определения координат: http://habrahabr.ru/post/142419/
HTML-справочник и другие материалы можно и нужно скачать здесь!
Теперь мы знаем, что такое карта изображения в HTML и знаем, как определить координаты активных элементов на изображении, а значит, в следующем видео мы можем поговорить о непосредственном создании карты изображения.