Rambler's Top100
Главная
Скачать (Download)
Dreamweaver CS6
Dreamweaver CS5
Dreamweaver CS4
Dreamweaver 8
Dreamweaver MX 2004
Dreamweaver 4
Уроки (Tutorials)
Видеоуроки new!!!

Fireworks
ЧаВо
Документация
Статьи
Программы и скрипты
Бесплатные шаблоны
Каталог сайтов
Форум
Карта сайта
Контакты

статьи о строительстве http://spb-sovtrans.ru/

Документация - WebMoney
- HTML - основы
- Сервер - локально
- Справочник свойств CSS1

главная > документация

HTML - основы

Создание карты изображений

Карты - это способ сделать различные части одного графического изображения гиперссылками. Наиболее часто карты изображений применяют для создания графических меню. В этом случае создают одну большую картинку с пунктами меню и каждому участку придают какое либо действие.

Рассмотрим конкретный пример. Перед Вами цельный рисунок. Но нажимая на разные части рисунка, мы будем попадать на разные страницы. Попробуйте нажать на кончик носа, глаз (1-й и 2-й), лапки, ушко и хвостик.


Карты задаются тегом мap. Между начальным тегом <мap> и завершающим тегом </мap>. ставиться тег аrea.
Тег area определяют геометрические области внутри карты (прямоугольник, круг или многоугольник). У него нет конечного тэга.

<map>
<area ...>
<area ...>
...
<area ...>

</map>

Рассмотрим возможные атрибуты у тега мap.

NAME - единственный и обязательный параметр. Определяет имя навигационной карты, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр.


Рассмотрим возможные атрибуты у тега area.

SHAPE - описывает форму выделяемой области, возможные значения:

rect - прямоугольник
circle - круг
poly - многоугольник
default - определяет всю область, т.е весь рисунок может стать ссылкой

COORDS- определяет координаты навигационной области на карте. Для разных типов областей, координаты задаются по разному.
Для прямоугольника это четыре координаты левого верхнего и правого нижнего углов (левый x, верхний y, правый x, нижний y)
Для круга три координаты: две из них- это центр круга, третья – радиус (центр x, центр y, радиус)
Для многоугольника это описание каждого угла в двух координатах (x1,y1,x2,y2,x3,y3,...;)

Все координаты считаются с нуля, поэтому для описания области 100 на 100 используется описание:
<area cords ="0,0,99,99" ...>


HREF - определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).

NOHREF - определяет, что данной области не соответствует никакая ссылка. По умолчанию, если не указан параметр HREF, то считается что действует параметр NOHREF. Также, для всех неописанных участков изображения считается, что используется параметр NOHREF.
Это может пригодиться если вы хотите сделать ссылку не в виде круга, а в виде кольца

ALT - определяет альтернативный текст-подсказку для данной области.

TITLE - название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.


Мы рассмотрели как написать карту изображения. Но ее еще надо связать с картинкой.
Для этого вставим атрибут usemap (а в качестве значения для этого атрибута впишем имя карты которое мы указали в теге <map>) в картинку:
<img src="mat.gif" usemap="#имя_карты">
P.S. значок # обязателен всегда.

Пример:
<img src="mat.gif" usemap="#map">
......
<map name="map">
<area ...>
......
<area ...>
</map>

Практика
Сделаем карту изображения для этого рисунка. Название нашего рисунка monster.jpg

1) Для начала вставим этот рисунок в документ.
<html>
<head>
<title>Карта изображений </title>
</head>
<body>
<img src="monster.jpg" width="160" height="188">
</body>
</html>

2) Теперь вставим карту с именем map_cap (name="map_cap")
P.S. Сейчас тег area стоит условно. Далее мы рассмотрим, что надо делать с ним подробно.

<html>
<head>
<title>Карта изображений </title>
</head>
<body>
<img src="monster.jpg" width="160" height="188">
<map name="map_cap">
<area ...>
......
<area ...>
</map>

</body>
</html>

3) Свяжем нашу картинку с картой, вставив туда атрибут usemap, а в качестве значения укажим имя карты (в нашем случае usemap="#map_cap"). И не забывайте про знак #.

<html>
<head>
<title>Карта изображений </title>
</head>
<body>
<img src="monster.jpg" width="160" height="188" usemap="#map_cap">
<map name="map_cap">
<area ...>
......
<area ...>
</map>
</body>
</html>

4) Рассмотрим тег area. Как мы помним он определяют геометрические области внутри карты (прямоугольник, круг или многоугольники) и у него нет конечного тэга. В нашем рисунке я решила выделить следующие области: ноги, руки, глаз и рот.


4.a.)Определим какую форму мы будем задавать для разных областей: Для глаза возьмем круг, для рта будем использовать прямоугольник, а для всех остальных областей многоугольники.

5) Теперь зададим для этих фигур координаты и ссылки.


Как мы помним для разных типов областей, координаты задаются по разному.

5.a.)Для круга нам нужны координаты центра и радиуса. В нашем случае X=79 Y=44 R=21
Получаем:
<area shape="circle" coords="79,44,21" href="primer.html" target="_blank" title="Глаз">
Рассмотрим элементы по отдельности:
shape="circle" -описывает форму выделяемой области, в нашем случае это круг
coords="79,44,21" – координаты (для круга это координаты центра и радиус)
href="primer.html"- ссылка на документ primer.html (при нажатии на область откроется документ primer.html)
target="_blank"- открывает документ в новом окне.
title="Глаз" - название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.

5.b.)Для прямоугольника нам нужны координаты левого верхнего и правого нижнего углов. В нашем случае X1=61 Y1=82 и X2=97 Y2=104
Получаем:
<area shape="rect" coords="61,82,97,104" href="primer1.html" target="_blank" title="Рот">

5.с.) Для многоугольников нам нужны координаты всех углов.

Для левой руки это: X1=29 Y1=138; X2=37 Y2=136; X3=50 Y3=157; X4=45 Y4=167; X5=26 Y5=164
Получаем:
<area shape="poly" coords="29,138,37,136,50,157,45,167,26,164" href="primer2.html" target="_blank" title="Левая рука">

Для правой руки это: X1=131 Y1=136; X2=139 Y2=137; X3=143 Y3=163; X4=131 Y4=169; X5=126 Y5=157
Получаем:
<area shape="poly" coords="131,136,139,137,143,163,131,169,126,157" href="primer3.html" target="_blank" title="Правая рука">

6.)Соединяем все, что у нас есть:

<html>
<head>
<title>Карта изображений </title>
</head>
<body>
<img src="monster.jpg" width="160" height="188" usemap="#map_cap">
<map name="map_cap">
<area shape="circle" coords="79,44,21" href="primer.html" target="_blank" title="Глаз">
<area shape="rect" coords="61,82,97,104" href="primer1.html" target="_blank" title="Рот">
<area shape="poly" coords="29,138,37,136,50,157,45,167,26,164" href="primer2.html" target="_blank" title="Левая рука">
<area shape="poly" coords="131,136,139,137,143,163,131,169,126,157" href="primer3.html" target="_blank" title="Правая рука">
</map>
</body>
</html>

Вот что мы получили:

<< назад

главная > документация

Реклама

Простой конкурс с денежными призами!





Rambler's Top100 Рейтинг@Mail.ru