Как сделать карту изображения в 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. Самое сложное в карте изображений – это вычислить правильно координаты фигуры. Специальной формулы нет и приходится по несколько раз подбирать координат.

Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.