GVMproject.info-бесплатные программы, скрипты, шаблоны
Руководство по html

Навигационные карты

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

Сначала теория.

Навигационные карты задаются тэгом Map. Тэг Map включает себя тэг(и) Area, которые определяют геометрические области внутри карты (в нашем примере это будут прямоугольники) и ссылки, связанные с каждой областью (т.е. куда вы попадете при нажатии на какую-либо часть нашей карты).

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

Дальше уже будем тренироваться на кошках :) (на конкретных примерах)

Для начала нам нужна картинка. Возьмем такую:



Картинка простая - всего лишь голубой прямоугольник (240х140 пикселов). Представьте, что прямоугольники №1 и №2, нарисованные на нем, - это изображения каких-либо кнопок, а голубое - какой-то сложный фон. Чтобы не создавать сложную таблицу, вы решили не резать картинку на много частей и не вычленять кнопки, вы решили поступить проще - создать навигационную карту, где области №1 и №2 (прямоугольники) будут ссылками.

Итак, мы уже знаем, что геометрические области и то, куда пользователь попадет при нажатии на них, определяет тэг Area, естественно, при помощи своих параметров. Это параметры shape и coords.

Параметр shape - определяет форму области (будет ли она прямоугольником (shape="rect"), кругом (shape="circle") или многоугольником (shape="poly")). Сейчас мы работаем с прямоугольной областью, поэтому:

< map >
< area shape="rect" >
< /map >

Параметр coords - определяет координаты (положение нашей геометрической формы). Число координат и порядок их значений зависят от выбранной нами формы.

"Стоп! стоп!" - скажете вы, - "Какие координаты?" - Те самые, вспоминайте школу и уроки геометрии :)



Полагаю, что это всем должно быть ясно. Отсчет ведется от левого верхнего угла картинки, считайте его началом координат (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 >

Теперь пропишем, куда будет ссылаться наша область, для этого нам понадобится уже знакомый нам параметр href:

< map >
< area href="drugoy_document.html" shape="rect" coords="25,36,114,98" >
< /map >

Все бы хорошо, но этого все еще не достаточно, чтобы картинка стала ссылкой, нам нужно еще указать имя карты и связать ее с картинкой.

У тэга Map есть параметр name - имя карты, давайте назовем карту - karta1:

< map name="karta1" >
< area href="drugoy_document.html" shape="rect" coords="25,36,114,98" >
< /map >

Для того, чтобы связать карту с картинкой, надо использовать атрибут usemap="#имя_карты" для картинки:

< img src="bluerects.gif" usemap="#karta1" >

... Куча текста и всякого содержания, или ничего...

< map name="karta1" >
< area href="drugoy_document.html" shape="rect" coords="25,36,114,98" >
< /map >

Смотрим результат (жмите на прямоугольник №1):



Теперь сами пропишите Area для прямоугольника №2 для тренировки (x1=153, y1=11, x2=219, y2=127), а затем шагайте на следующую ступеньку, где мы продолжим разговор о картах.

Для создания круглой области нам нужны будут координаты ее центра (x и y) и длинна радиуса (R) в пикселях. Т.е. порядок записи следующий:

< 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="mapcircle.gif" usemap="#karta2" >

... Куча текста и всякого содержания, или ничего...

< map name="karta2" >
< area href="drugoy_document_2.html" shape="circle" coords="46,48,35" >
< /map >

Кстати, для карты мы можем прописать ALT для каждой области, сейчас у нас только одна область, но все равно, пропишем для нее ALT:

< img src="mapcircle.gif" usemap="#karta2" >

... Куча текста и всякого содержания, или ничего...

< map name="karta2" >
< area href="drugoy_document_2.html" shape="circle" coords="46,48,35" alt="маленький круг" >
< /map >

Теперь при наведении на область №1 будет всплывать подсказка, что же это такое :)

Давайте посмотрим результат (нажмите на первый круг):

маленький круг

Теперь вы самостоятельно сделаете ссылкой второй круг (x=158, y=75, R=53), чтобы закрепить пройденное.

Вот мы, наконец, добрались и до многоугольников.



Бу-бу-бу! :) Страшно?

На самом деле тут нет ничего страшного. Вы указываете точки (координаты углов), они как бы соединяются, и мы можем получить очень разнообразные фигуры (посмотрите на фигуру 2, правда здорово?). Используя poly, мы можем делать самые разнообразные области, от скромного треугольника до шикарной звезды.

Сейчас мы будем работать с фигурой №2, потому что у нее меньше углов (да, ленивая я, решила облегчить себе жизнь на один угол:).

Для начала зададим тип области:

< map >
< area shape="poly" >
< /map >

Координаты пишутся по следующему принципу:

< area shape="poly" coords="x1,y1,x2,y2,...,xN,yN" >

Расшифровывается это так: "координаты первого угла (x1,y1), координаты второго угла (x2,y2), еще много углов и их координат (...), координаты последнего угла (xN,yN)". Т.е. для нашего пятиугольника запись полностью будет выглядеть так:

< 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="mappoly.gif" usemap="#karta3" >

... Куча текста и всякого содержания, или ничего...

< map name="karta3" >
< area href="drugoy_document_3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119" >
< /map >

Теперь проверим, получилось ли у нас это безобразие (в этот раз вторая фигура, жмите):



Не забудьте прописать самостоятельно первую область (шестиугольник) - 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 - Мы можем одновременно использовать разные области, например круг и многоугольник:

< img src="mappoly.gif" usemap="#karta3" >

... Куча текста и всякого содержания, или ничего...

< map name="karta3" >
< area href="drugoy_document_3.html" shape="circle" coords="46,48,35," >
< area href="drugoy_document_3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119" >
< /map >

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

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


Страниц : # « 16 17 18 19 20
TEXT +   TEXT -   Печать Опубликовано : 20.12.09 | Просмотров : 50928 | Ваша оценка

Введите слово для поиска :
Популярные файлы
- скрипт форума phpBB2
- Скрипт MLM пирамиды
- Nvu 1.0 визуальный редактор
- Java скрипты
- auto URL submit программа для регистрации сайта в каталогах
- PHP скрипт обменного пункта
 
Популярные статьи
- учебник вебмастеру
- Руководство по html
- Cascading Style Sheets (Таблицы Каскадных Стилей)
- Клоакинг
- Дорвеи и поисковые системы.
 
Реклама

##
##
##
 
Услуги
 
статистика
Поздравления с Новым годом

Яндекс.Метрика
 
RSS

 
В начало страницы © 2018 www.gvmproject.info CMS Danneo (некоммерческий продукт) - это бесплатная, c открытым исходным кодом система управления сайтами. Разработана на языке программирования PHP и может работать почти на любой платформе(хостинг площадке), используя в качестве базы данных MySQL. Поддерживает SEO-frendly, RSS 2.0 - каналы и Yandex-news, Google SiteMap, экспорт контента с помощью JavaScript и многое другое. А базовая комплектация позволяет построить сайт почти любой сложности и дизайна и эффективно им управлять.Распространяется в соответствии с GNU General Public 2