Главная » Все про HTML » Карта изображения в HTML (навигационные карты). Урок №11

Карта изображения в HTML (навигационные карты). Урок №11

2014-02-04 / Вр:20:27 / просмотров: 27523

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