Служба рассылок "Рассылки@Mail.Ru"

1gb.ru - веб хостинг для вашего сайта
Полная гамма технологий, мощные сервера и своевременная помощь обслуживающего персонала - это наш хостинг. Качественный хостинг по разумным ценам. Сомневаетесь? Только у нас - бесплатный 10-ти дневный тестовый период сразу после регистрации!
С╦ма.Ру | Профессиональная разработка веб-сайтов
"С╦ма.Ру" создала веб-сайты известным федеральным, промышленным и банковским структурам. Выбирая "С╦ма.Ру" в качестве подрядчика Вы не разочаруетесь в сво╦м выборе. Ваш веб-сайт будет эффектным, а изготовлен он будет профессионально и точно в срок.
Есть проекты, а есть internet-проекты
Дизайн, создание и сопровождение web-сайтов и порталов, полный комплекс услуг. БИАТ. Консалтинг.

Строим сайт от А до Я. Девятый выпуск.
Строим сайт от А до Я. Девятый выпуск.


Девятый выпуск. От 27.07.2003
Ведущий рассылки: Troitskaya Ketee
Написать мне stroimsait@front.ru
Архивы рассылки:Здесь
Содержание рассылки:
    Изучаем HTML
  1. Создание карты изображений
  2. Контакты

И как всегда напоминаю, что каждый новый выпуск рассылки является логическим продолжением предыдущих. Если Вы только что к нам присоединились, то настоятельно рекомендую Вам ознакомиться с предыдущими выпусками. Сделать это можно Здесь .

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

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

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

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

Контакты

Задать свои вопросы
Поделиться мнением, успехами и неудачами Вы можете по адресу stroimsait@front.ru
Основные вопросы будут рассматриваться в следующих рассылках.


© 2003 Troitskaya Ketee


Веб-студия Ру-сайт | веб-дизайн, программирование сайтов.
Веб-дизайн, разработка корпоративных интернет- и интранет-сайтов, консультации. Большой опыт профессиональных разработок для российских и зарубежных заказчиков.
"Сетевая Академия ЛАНИТ" - ведущий центр обучения по информационным технологиям.
Авторизованные курсы Microsoft, Novell, SCO, Intel, Oracle. Обучение по программам Certified Internet Webmaster, Security Certified Program, управлению проектами, ISO9000, системам управления предприятиями, управлению финансами, пользователей MSOffice.

 Поиск: 
В Интернете  В Каталоге

Новости · Деньги · Спорт · Авто · Погода · Афиша · Музыка · ТВ · Софт
Аукцион · Покупки · Путешествия · Сувениры · Мой сайт · Работа
Знакомства · Открытки · Анекдоты · Гороскопы · Форумы · Чаты
Рейтинг · Каталог · Рассылки · Агент · Баннерные сети · Реклама на Mail.ru


Архив рассылки Редактирование подписки Помощь

Отписаться : Нажмите и отправьте это письмо, заменив pwd на свой пароль и сохранив кавычки. Узнать пароль можно здесь