Как двигать навигационную карту в html
Работа с перемещением карты в системе может производиться разными способами.
С использованием мыши
- нажать на панели навигации кнопку , кнопка примет нажатое состояние. В этом режиме, удерживая нажатой левую клавишу мыши в любом месте окна карты, можно, перемещая курсор, перемещать изображение фрагмента карты или всю карту по экрану. При отпускании левой клавиши мыши изображение перестроится таким образом, что точка карты, соответствующая положению курсора в начале перемещения, займет на экране место, соответствующее положению курсора при отпускании клавиши мыши; ИЛИ
- нажать и удерживая колесико мыши (среднюю клавишу) перемещать курсор, перемещать изображение фрагмента карты или всю карту по экрану; ИЛИ
- нажать и удерживать стрелки (Up/Down/Left/Right) на клавиатуре (полезно, когда отсутствует средняя клавиша мыши).
Описанные выше способы перестроения окна с изменением центра отображения позволяют осуществлять непрерывное перемещение по загруженной в окно карте в любом направлении. Параметр перемещения, то есть что будет перемещаться (фрагмент карты или вся карта) устанавливается в диалоге Параметры , вкладка Карта , раздел Перемещение изображения (режим рука) .
С помощью окна Навигатор
Окно Навигатор вызывается через меню Окно|Навигатор или нажатием на панели инструментов кнопки . В этом окне отображается содержимое активной карты и навигационная рамка, размеры которой соответствуют текущему масштабу, центру и размерам окна карты. При перемещении и масштабировании рамки соответственно изменяется масштаб и центра активной карты, так же как и при изменении масштаба активной карты размер рамки будет меняться. Изменить размер навигационной рамки также можно нажав (не отпуская) левую кнопку мыши в любом углу рамки, а затем перемещать курсор до тех пор, пока рамка не примет необходимые размеры.
Переместить навигационную рамку можно двумя способами:
- Нажать левую кнопку мыши на рамке в окне Навигатор и, не отпуская « перетащить » рамку в любую часть карты.
- Щелкнуть левой кнопкой мыши в любом месте окна Навигатор , после чего рамка автоматически переместиться в это место.
Одновременно и переместить рамку и изменить ее размеры можно указав в окне навигатора (там где рамки нет) один угол рамки, нажав (не отпуская) левую клавишу мыши, а затем перемещая курсор с « резиновой » рамкой, закрепленной в указанной точке. Для завершения нужно отпустить левую клавишу мыши.
Рисунок 54. Общий вид системы с загруженной картой и окном Навигатор
HTML — Урок 15. Навигационные карты — map
Многие html-страницы используют для организации ссылок так называемые карты-изображения. При таком подходе берется изображение и к различным его областям привязываются ссылки. Самым распространенным примером являются туристические карты мира, щелкаете по ее части с какой-либо страной и попадаете на страницу, посвященную этой стране.
Такие карты-изображения могут быть клиентскими и серверными. Ссылки клиентских карт хранятся в самом документе и по щелчку мыши браузер сам определяет, к какой области относятся координаты этой точки и осуществляет переход по нужной ссылке.
При серверном варианте эти координаты сначала передаются на сервер, там обрабатываются специальной программой и только после этого происходит переход по ссылке.Очевидно, что клиентские навигационные карты предпочтительнее. Их мы и рассмотрим.
Для примера представим, что мы являемся магазином бытовой техники и в шапке нашего сайта у нас расположена вот такая картинка:
Сделаем из нее навигационную карту, т.е. при щелчке по холодильнику будет осуществляться переход на страницу, посвященную холодильникам (с моделями, описанием и ценами), при щелчках по пылесосу и стиральной машине на соответствующие им страницы.
Для этого нам надо описать области на этой картинке, которые будут ссылками. Для описания таких областей используются теги с единственным параметром name, который задает имя карты-ссылок и используется потом для ссылки на эту карту.
Навигационные карты
Мы с Вами уже говорили о том как сделать рисунок ссылкой.. в этой главе поговорим о том как сделать фрагмент, область рисунка ссылкой на тот или иной документ, а так же о том как сделать различные области одного и того же рисунка ссылками на различные документы.
Для осуществления данной задачи нам не обойтись без так называемых навигационных карт.
Предположим, у нас имеется такой рисунок:
..и нам необходимо сделать, так что бы пользователь, нажав на одну из этих «кнопок» переходил по ссылке в тот или иной документ.. что нам для этого нужно?
В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap тега (я думаю Вам не стоит напоминать о том что тег имеет обязательный атрибут src который указывает путь к той или иной картинке )
Назовём наш рисунок/карту именем panel . Это будет выглядеть так:
usemap=»#panel»>
Не забываем по правилам синтаксиса поставить знак #решётки перед именем..
Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом у которого есть атрибут name — имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя..
Теперь займемся тем, что укажем браузеру области рисунка которые будут являться ссылками, а заодно пропишем пути переходов по этим ссылкам. Эту задачу берет на себя тег , закрывающего тега он не требует, и имеет следующие атрибуты, с которыми мы будем работать:
- rect — прямоугольная область
- poly — область представляет собой некий многоугольник
- circle — область заданная окружностью
Прямоугольная область
Теперь наша карта приобретает такой вид:
По сути теперь «зелёная» квадратная кнопка стала рабочей.
В чем Вы можете убедится нажав на неё в этом примере:
usemap=»#panel»>
Немного поспешил с примером толком не объяснив суть написанного.. Заострим внимание на атрибутах тега .
href=»primer1.html» — здесь думаю понятно, это путь к документу, который должен открыться при нажатии на «зелёную кнопку».
Так как кнопка у нас квадратная, а квадрат как известно это «правильный» прямоугольник, форму области рисунка назначаем прямоугольной shape=»rect» .
А теперь самое интересное coords=»15,15,82,82″ — координаты.. Для прямоугольника они задаются двумя точками по принципу «Х1,У1,Х2,У2» Где Х1,У1- первая точка и соответственно Х2,У2 -вторая. Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0,У=0, а самый нижний правый Х=300,У=100. Если не понятно, окунёмся в геометрию за пятый класс..
Взгляните на рисунок:
Так, выбрав прямоугольную форму shape=»rect» для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения «рабочей» области всей кнопки.
Полигон (многоугольник).
Займёмся «жёлтой кнопкой», она у нас представлена в виде треугольника. Для того чтобы выделить её «рабочую» область из нашего рисунка, присвоим атрибуту shape значение poly — полигон, которое определит эту область как некий многоугольник, где координаты через запятую будут являться его вершинами, их может быть сколь угодно много «Х1,У1,Х2,У2,Х3,У3,Х4,У4… Х124,У124» фигура образованная этими точками вершинами углов может иметь вид любого многоугольника как правильного, так и неправильного. В нашем случае угла всего три, на то он и треугольник, следовательно его координаты будут заданы тремя парами значений «Х1,У1,Х2,У2,Х3,У3»
Значит всё вместе пишем так:
А вот рисунок который наглядно показывает откуда берутся координаты точек..
Окружность
Ну и последняя «красная кнопка» она у нас круглая.. значит форма области будет круглой shape= «circle» . На сей раз с координатами дело обстоит немного иначе. Нам понадобится три значения Х,У,R. Х и У это координаты центра нашей окружности, а R — это длина радиуса в пикселях.
Доводим до ума..
Теперь немного о том, что ещё желательно было бы сделать с нашей картой прежде чем «монтировать» её в какую либо страницу.
Определим фиксированные размеры рисунка-карты атрибутами width и height
Напишем альтернативный текст, как для всего рисунка карты, так и для её отдельных областей используя атрибут alt , а также описание элементов атрибутом title .
Избавимся от рамки бордюра.. сделаем border=»0″ ..(ну если Вам с бордюром больше нравится, можете этого не делать.. я не настаиваю..)
В конце должно выглядеть примерно вот так:
width=»300″ height=»100″ border=»0″ alt=»Панель управления» title=»Панель управления»>
Пересечение областей
Иногда удобно формировать «рабочую» область изображения «смешивая» разные формы..
Предположим, наша очередная кнопка имеет такой вид:
Конечно, можно определить форму как многоугольник, но придется задать уйму координат для округлой части такой кнопки (ну это если нужна особая точность в навигационной карте).
А можно определить в этом примере две формы прямоугольник rect и окружность circle как показано на рисунке:
А в коде указать путь к одному и тому же документу:
Однако стоит помнить о том, что если бы ссылки с разных форм вели к разным документам, то нажимая на область пересечения наших фигур посетитель будет переходить по той ссылке, чья область в коде указана первой.. в нашем случае это окружность.
«Не область»
Рассмотрим на примере.. предположим необходимо изготовить вот такую кнопку:
Как быть с отверстием в ней?
Тег помимо атрибута href имеет противоположенный по значению атрибут nohref — неактивная область, то есть если пользователь нажмет на такую область, то ровным счетом ничего не произойдёт, чего нам собственно и необходимо добиться при изготовлении «отверстия» в нашей карте.
Карта будет задана двумя областями, неактивной окружностью circle и активной прямоугольной областью rect и как показано на рисунке чертеже иметь следующие координаты:
Как уже говорилось ранее, при пересечении областей наибольшим приоритетом будет пользоваться та область, которая в коде внутри тега указана первой
Следовательно, пример будет иметь такой вид:
Карта на сервере.
Отрывок из справочника (атрибуты тега ):
usemap — изображение является навигационной картой на стороне клиента.
ismap — изображение является навигационной картой на сервере.
Непонятно? Тогда читаем..
С атрибутом usemap мы вроде бы разобрались.. Смотрите, пользователь (клиент) открыв Вашу страницу, одновременно со всем остальным содержанием, загружает «на свою сторону» как сам рисунок, так и навигационную карту к нему и всё это дело обрабатывается его браузером.
А вот атрибут ismap тега говорит браузеру о том, что к данному изображению на сервере, ну там где Вы выложили или собираетесь выложить свой сайт (читаем статью: «Публикация сайта»), есть навигационная карта. И теперь, когда посетитель (клиент) кликнет по какой либо области рисунка с таким атрибутом, браузер запомнит координаты этого клика и отправит их на сервер, где специальная программка обработает эти данные и перенаправит пользователя на тот адрес который указан в карте на сервере, в соответствии с полученными от браузера клиента координатами точки.
Где адрес навигационной карты на каком либо сайте.. размещённом на том или ином сервере..
Всё равно непонятно? Если да, то тогда не стоит заморачивотся по этому поводу.. используйте usemap , на мой взгляд такое решение будет лучшим в большинстве случаев при использовании навигационных карт.
Полезные советы:
Что бы без труда определить координаты той или иной точки на Вашей навигационной карте откройте рисунок графическим редактором тем же Paint к примеру.. там, когда будете двигать указателем по рисунку, увидите две меняющиеся цифры, это и есть координаты пикселя Х и У на данном рисунке. В Paint эта панелька расположена в нижней части экрана.
При создании страницы с навигационной картой тег всегда должен быть выше самой карты То есть писать вот так:
..можно, но не нужно.. потому что при загрузке страницы могут возникнуть проблемы, так как карта с разметкой уже загрузилась, а самого рисунка ещё нет..
И ещё что касается загрузки..
В этом месте кода может быть всё что угодно длинный текст, таблицы, графика.. но всё же лучше здесь ничего не писать
4.2. Картинка-гиперссылка
В качестве гиперссылки может использоваться и рисунок. Принцип ссылки тот же, что и для текстовой гиперссылки, только между открывающим и закрывающим тегами помещают не текст, а тег вместе со всем его содержимым (см. п. 3).
Этим самым картинке размером 150×50 пикселей, находящейся в файле с названием logo.jpg, назначена гиперссылка на сайт Томского межвузовского центра дистанционного образования. При наведении на нее стрелка курсора трансформируется в изображение ладони с вытянутым указательным пальцем и появляется надпись «Щелкни, чтобы перейти на сайт ТМЦДО». Страница будет открываться в новом окне браузера.
4.3. Навигационная карта
А можно ли назначить различным частям одного графического изображения различные гиперссылки? А как разбить картинку (например, фотографию) на отдельные участки так, чтобы при подведении к ним курсора появлялись разные подписи?
Для этого картинку надо превратить в навигационную карту.
Прежде чем начинать работу, поместите ту картинку, которую собираетесь превратить в карту, на html-страницу и посмотрите, удовлетворяют ли вас ее размеры. Подгоните размеры под требуемые, но не изменением параметров height и width, а с помощью графического редактора (см. п.1).
Затем вставляем в тег картинки за атрибутом src атрибут usemap=»#имя», где имя – это название, которое вы даете карте. После этого начинается работа по описанию активных областей карты. Для этого используется контейнерный тег .
Описание начинается с тега , а заканчивается тегом . Между ними помещается одиночный тег area> описания каждой активной области изображения:
Атрибут shape определяет ту форму, с помощью которой выделяется отдельный объект на картинке. Параметр форма может принимать одно из следующих значений:
circle – окружность,
rect – прямоугольник,
poly – многоугольник.
Атрибут coords определяет координаты выделенного объекта.
Параметр координаты задается списком координат, которые отсчитываются в пикселях от левого верхнего угла картинки.
Для окружности этот список состоит из координат центра окружности (х, у) и ее радиуса.
Для прямоугольника это координаты (x, y) левого верхнего и правого нижнего углов прямоугольника.
Для многоугольника это координаты (x, y) каждого из углов многоугольника.
Все координаты перечисляются через запятую.
Атрибут href определяет адрес гипертекстовой ссылки, реализуемой при нажатии на выделенный объект.
Атрибут alt определяет появляющийся при наведении на объект текст.
И тут возникает вопрос: а как рассчитать точно координаты нужной части изображения? Конечно, это можно сделать вручную, зная размер картинки в пикселях, но уж очень трудоемкий этот процесс.
На помощь приходят специальные программы – WYSIWYG-редакторы навигационных карт, которые значительно упрощают и ускоряют разметку навигационных областей 1 . Но сразу отметим, что сгенерированный ими HTML-код все равно может потребовать доведения его «до ума» вручную.
Укажем некоторые такие программы.
1. GeoHTML 2.1 (http://www.fegi.ru/geohtml/). Относится к классу freeware. Дистрибутив имеет размер 1,2 Мб.
2. MapEdit (http://www.boutell.com/mapedit/). Относится к классу shareware. Без регистрации и оплаты она работает 30 дней или позволяет обработать 100 графических файлов.
Возможности построения навигационных карт заложены и в визуальных редакторах HTML, например Macromedia Dreamweaver 8 (http://www.adobe.com/products/dreamweaver/), Microsoft FrontPage 2003 (http://www.microsoft.com/Rus/Office /FrontPage/default.mspx), предназначенных как для профессиональных Web-дизайнеров, так и для начинающих пользователей и позволяющих создавать как отдельные страницы, так и сложные Web-сайты.
Рассмотрим работу редактора карт на примере программы GeoHTML.
После запуска программы выбираем File | New Map… Окно New Map («Новая карта») служит для создания новой карты. Оно содержит две страницы Open an Image («Открыть изображение») и Look In Document («Найти в документе») (рис. 2.4).
Страница Open An Image используется для открытия файла с диска (поле Source). Изменяя свойства Width и Height, можно задать ширину и высоту изображения. После нажатия кнопки «Ok» изображение появляется в поле программы и готово к редактированию.
Рис. 2.4. Главное окно программы GeoHTML с выбранным графическим файлом.
Щелкая по изображению формы, выбираем «Прямоугольник», «Окружность» или «Многоугольник». Стрелкой осуществляется переход от одного объекта выделения к другому. При работе с формой «Прямоугольник» ставите курсор в левый верхний угол предполагаемой области выделения и ведете его вправо-вниз. При работе с формой «Окружность» ставите курсор в центр объекта и начинаете двигать его по радиусу, увеличивая обхват. При работе с формой «Многоугольник» курсором обводите объект, щелкая мышью на углах поворота. Необходимо обязательно замкнуть ломаную линию! Объекты выделения покрываются синей сеткой (рис. 2.5).
Рис. 2.5. Окно редактора GeoHTML с выделенными объектами. В нижнем правом углу – окно Area Inspector.
Чтобы отменить выделение, нужно выбрать стрелкой объект, щелкнуть правой кнопкой мыши и в контекстном меню выбрать Delete Area.
К выделенной области привязывается определенная информация. Это делается при помощи окна Area Inspector. Атрибуты разделяются на Свойства (Properties) и События (Events).
Свойство Shape – тип области. Свойству автоматически присваивается одно из трех значений: RECT (область прямоугольная), CIRCLE (область круглая) или POLY (область многоугольная). Coords – координаты области. Содержит целочисленные значения координат, записанные через запятую, и зависит от геометрического типа (свойства Shape) области. Единицей измерения этих координат являются пиксели (точки) экрана. Href – гипертекстовая ссылка. Target – задает окно, в котором откроется документ, указанный в Href. ID – идентификатор области. Используется для обращения к свойствам области из кода сценария. Alt и Title –определяют выпадающий текст-подсказку (в зависимости от браузера – следует проверить!). Language – описание языка сценария, используемого в событиях области (например, «javascript»). Lang – описание ISO-языка для области (например, «text/javascript»). Style – определяет строку таблицы стилей для области. Class – определяет класс области, используемый в таблицах стилей (CSS).
Атрибуты из раздела События содержат операторы языков сценария (JavaScript или VBScript) и предназначены для продвинутых пользователей. Коды сценария выполняются, когда происходит соответствующее атрибуту событие.
После того, как определены все объекты, необходимо открыть закладку HTML Source, скопировать сгенерированный программой html-код, начиная с тега и кончая тегом
, и вставить в нужное место на html-странице вашего сайта. При необходимости подкорректируйте путь к рисунку.
Таким образом, выбранный рисунок превратился в навигационную карту.
Для фотографии, изображенной на рис. 2.5, был сгенерирован следующий код:
Видно, что были сформированы шесть областей выделения (автомобиль, надпись в правом верхнем углу и четыре фигуры), причем первым двум областям назначены гипертекстовые ссылки. Первая область сформирована окружностью, вторая – прямоугольником, остальные – многоугольником.
Представляете, как было бы нелегко это исполнить вручную!
Отметим, тем не менее, что подпись, которая должна появиться при наведении курсора вне зон выделения (Abbey Road Street), была задана в атрибуте alt тега вручную.