Карта изображения в HTML (навигационные карты).
Поэкспериментировать - HTML редактор
Для того, чтобы создать карту изображения вам пригодятся знания о том, как вставить картинку и ссылку в html-документ.
Теперь давайте выясним, что такое карта изображения.
С помощью карты изображения вы можете сделать так, что при нажатии на разные области одной и той же картинки, вы попадаете на разные страницы. Карту изображения некоторые называют еще навигационной картой.
Я понимаю, что на словах это тяжело понять, потому предлагаю посмотреть пример, как выглядит карта изображения вживую.
Только обратите внимание: картинка одна, а области и путь перехода разный.
[пример]
Не бойтесь, это вовсе не сложно. Самое главное – понять теорию и закрепить практикой.
Ну что, приступим к теории.
Карты изображения (навигационные карты) задаются тегом <map></map>.
Тег <map></map> - это коробка, внутри которой размещают теги <area>.
Тег <area> предназначен для определения геометрической области с ссылкой, привязанной к каждой области.
Пример:
|
1
2
3
4
5
|
<map>
<area>
<area>
<area>
</map>
|
Атрибуты areа
1. Атрибут shape
shape – определяет форму области (прямоугольником, кругом, многоугольником).
Прямоугольник - "rect". Пример: shape="rect";
круг - "circle". Пример: shape="circle";
многоугольник - "poly". Пример: shape="poly"
Пример:
|
1
2
3
|
<map>
<area shape="rect">
</map>
|
2. Атрибут coords
coords – это расположение геометрической формы.
Давайте рассмотрим пример на геометрической форме прямоугольника.
Прямоугольная область
Вы уже знаете, что если вам нужна форма прямоугольника, значит нужно прописать в атрибуте shape значение «rect».
|
1
2
3
|
<map>
<area shape="rect">
</map>
|
Теперь переходим к координатам.
Точка отсчета начинается с левого верхнего угла картинки, координаты которого (0;0)
Порядок записи координат для атрибута coords будет таким:
|
1
|
<area shape="rect" coords="x1,y1,x2,y2">
|
Значит, нужно указать координаты рабочей области у прямоугольника верхний-левый и нижний-правый угол.
Для примера с прямоугольником №1 возьмите такие координаты:
x1=25, y1=36, x2=114, y2=98
Вот так будет выглядеть код:
|
1
2
3
|
<map>
<area shape="rect" coords="25,36,114,98">
</map>
|
Дальше нужно указать путь(ссылку) для выбранной области. Как сделать ссылку в HTML, вы уже знаете.
|
1
2
3
|
<map>
<area href="http://bloggood.ru" shape="rect" coords="25,36,114,98">
</map>
|
Все пока что хорошо. Но нам теперь нужно связать картинку с картой.
Для этого придумайте любое название для карты, например, «karta1» и пропишите его в теге <map> через атрибут name.
|
1
2
3
|
<map name="karta1">
<area href="http://bloggood.ru" shape="rect" coords="25,36,114,98">
</map>
|
Теперь свяжем карту с картинкой. Для этого используем атрибут usemap.
Пример написания:
usemap="#имя_карты"
В нашем случае это будет выглядеть следующим образом:
|
1
|
<img src="kartinka.gif" usemap="#karta1">
|
Теперь соберем все вместе и пропишем еще координаты к другому прямоугольнику №2 с такими данными (x1=153, y1=11, x2=219, y2=127).
Пример:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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="http://bloggood.ru/" shape="rect" coords="25,36,114,98">
<area href=" http://bloggood.ru/avtor/" shape="rect" coords="153,11,219,127">
</map>
</body>
</html>
|
Теперь смотрите на результат. Нажмите на прямоугольник №1 и на прямоугольник №2
[пример]
Круглая область
Для начала нужно указать тип области. Для этого пропишем в атрибуте shape значение «circle».
|
1
2
3
|
<map>
<area shape="circle">
</map>
|
Теперь переходим к координатам.
Чтобы создать координаты для круглой области, нужно прописать данные к центру (xy) и указать длину радиуса (R).
Порядок записи координат для атрибута coords будет таким:
|
1
|
<area shape="circle" coords="x,y,R">
|
Для круга №1 возьмите такие координаты:
x=46, y=48; а длина радиуса - R=35
|
1
2
3
|
<map>
<area shape="circle" coords="46,48,35">
</map>
|
Теперь дадим карте название и привяжем карту к рисунку:
|
1
2
3
4
|
<img src="kartinka-2.gif" usemap="#karta2">
<map name="karta2">
<area href="http://bloggood.ru/" shape="circle" coords="46,48,35">
</map>
|
Теперь соберем все вместе и пропишем еще координаты к кругу №2 с такими данными x=158, y=75, R=53.
Пример:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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="http://bloggood.ru/ " shape="circle" coords="46,48,35">
<area href=" http://bloggood.ru/avtor/" shape="circle" coords="158,75,53">
</map>
</body>
</html>
|
Теперь смотрите на результат. Нажмите на круг №1 и на круг №2:
[пример]
Многоугольная область
Многоугольная область самая сложная область в навигационной карте.
Для начала нужно указать тип области. Для этого пропишите в атрибуте shape значение «poly»
|
1
2
3
|
<map>
<area shape="poly">
</map>
|
Теперь переходим к координатам.
Порядок записи координат для атрибута coords будет таким:
|
1
|
<area shape="poly" coords="x1,y1,x2,y2,...,xN,yN">
|
Разъяснение:
x1,y1 - координаты первого угла;
x2,y2 - координаты второго угла;
xN,yN - координаты последнего угла
То есть, для многоугольника №2 это выглядит вот так:
|
1
|
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5">
|
Пример:
|
1
2
3
|
<map>
<area shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>
|
Теперь дадим карте название и привяжем карту к рисунку:
|
1
2
3
4
|
<img src="kartinka-3.gif" usemap="#karta3">
<map name="karta3">
<area href="http://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.
Пример:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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="http://bloggood.ru/" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
<area href="http://bloggood.ru/avtor/" shape="poly" coords="54,20,109,20,147,58,109,96,54,96,16,58">
</map>
</body>
</html>
|
Теперь смотрите на результат. Нажмите на многоугольник №1 и на многоугольник №2:
[пример]
Возможность комбинирования
Бывают такие случаи, когда нужно использовать одновременно на одной картинке разные области, например, круг и прямоугольник:
|
1
2
3
4
5
|
<img src="kartinka-4.gif" usemap="#karta4">
<map name="karta4">
<area href="http://bloggood.ru/avtor/" shape="circle" coords="46,48,35,">
<area href=" http://bloggood.ru/" shape="rect" coords="153,11,219,127">
</map>
|
Дополнение с использованием TITLE
Для каждой области можно прописать подсказки, используя атрибут title.
Пример:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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="http://bloggood.ru/avtor" shape="circle" coords="46,48,35," title="круг">
<area href=" http://bloggood.ru/" shape="rect" coords="155,12,220,130" title="прямоугольник">
</map>
</body>
</html>
|
Теперь смотрите на результат. Наведите курсор мышки на круг, а потом на прямоугольник:
[пример] |