Студопедия  
Главная страница | Контакты | Случайная страница

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатика
ИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханика
ОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторика
СоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансы
ХимияЧерчениеЭкологияЭкономикаЭлектроника

Графические карты ссылок

Читайте также:
  1. Ввод растровой карты
  2. Вспомните исторические особенности и географические условия развития эгейской культуры.
  3. Глава 2.2. Графические интерфейсы пользователя в Java
  4. Графические компоненты
  5. Графические модели
  6. Графические редакторы Adobe Photoshop, CorelDraw, 3dsMAX
  7. Греческий Число ссылок Значение
  8. Д. Библиографические указатели
  9. Двухуровневое меню ссылок

В рассмотренных ранее графических ссылках одному изображению соответст­вовал один адрес ссылки. Однако существует возможность сопоставить одному изображению несколько ссылок, привязав каждую из них к некоторой области изо­бражения. Такие области называют горячими или активными, а сам технологиче­ский прием - графической картой ссылок или сегментированной графикой. Горя­чие области графической карты могут быть различной формы: прямоугольной, многоугольной или в виде круга. Это очень удобный способ оформления группы ссылок, однако при выборе рисунка, служащего основой карты ссылок, следует стремиться к тому, чтобы границы "горячих" областей были хорошо очерченными и не пересекались. Кроме того, необходимо позаботиться о том, чтобы пользова­тель понял, что имеет дело с картой ссылок, а не просто с графическим фоном. Для этого можно предусмотреть поясняющие тексты. При наведении на "горячую" об­ласть указатель мыши изменяет свою форму как и при обычных ссылках. При щелчке на "горячей" области ее границы становятся видимыми.

Возможны два варианта реализации графических карт ссылок: клиентский и серверный. В первом варианте вся информация о конфигурации графической карты ссылок размещается в HTML-документе, в котором она применяется. Во втором варианте предполагается наличие так называемого CGI-сценария, который распо­лагается на сервере и выполняет обработку запросов браузера клиента при работе с графической картой ссылок. Кроме того, на сервере должен находиться конфигу­рационный файл, в котором описываются горячие области карты. Хотя серверный вариант появился раньше, теперь чаще встречается клиентский вариант.

Клиентский вариант графической карты ссылок

Графическую карту ссылок в клиентском варианте задают несколько тегов. Первый - контейнерный тег <mар> (карта) с атрибутом name для указания имени карты. Имя карты выбирается как имя переменной. Далее, между дескрипторами <mар> и </mар> следуют теги <аrеа> (область) для задания горячих областей.

Тег <аrеа> имеет ряд атрибутов, описывающих собственно ссылку, а также форму и положение горячей области:

href - строка, определяющая адрес ссылки;

shape - определяет форму области; принимает аргументы:

1. "rect" или "rectangle"(прямоугольник);

2. "poly" или "polygone"(многоугольник);

3. "circle" (круг);

coords - координаты области, которые задаются в пикселах перечнем чисел, разделенных запятыми; весь перечень заключают в кавычки (для прямоугольни­ка задают четыре числа - координаты верхнего левого и правого нижнего угла; для многоугольника указывают координаты каждого угла; для круга задают три числа - координаты центра и радиус); координаты углов перечисляют в сле­дующем порядке: сначала горизонтальная, а затем вертикальная координата; на­чало отсчета координат - верхний левый угол изображения в своих исходных размерах (масштабирование изображения назначением параметров width и height может привести к смещению "горячих" областей);

title - текстовая строка всплывающей подсказки, появляющейся при наведе­нии указателя мыши на "горячую" область;

target - указывает окно или фрейм, в котором следует открыть документ, за­данный в адресной части ссылки; имеет такие же значения, как и для тега <а>;

nohref="nohref" - атрибут для указания того, что данная область не имеет ад­реса перехода; атрибуты href и nohref взаимно исключают друг друга (следу­ет использовать только какой-нибудь один из них); атрибут nohref обычно применяется для того, чтобы исключить переход по ссылке для части уже опре­деленной "горячей"области.

После закрывающего дескриптора </mар> следует указать тег, вставляющий изображение и реализующий привязку карты к нему - это уже известный тег <img>, в котором помимо прочих возможных атрибутов задается атрибут связи с картой:

usemap="#имя_карты"

В качестве имени карты приводится значение атрибута name тега <mар>.

В листинге 3 приведен пример графической карты ссылок, в основе которой находится изображение меню (файл map.jpg), показанное на рис. На ней опре­делены три прямоугольные активные области, соответствующие опциям меню. При щелчке на активной области в окне браузера будет выведен соответствующий документ.

Листинг 3. Пример графической карты ссылок:

 

В теге <аrеа> атрибут target="_blank" указывает браузеру открыть документ в новом окне или в новой вкладке (в зависимости от настроек).


Серверный вариант графической карты ссылок

В серверном варианте реализации графической карты ссылок при щелчке на "горячей" области координаты места щелчка передаются на сервер и обрабатыва­ются серверным сценарием (CGI-программой). Эта обработка заключается, по суще­ству, в обращении к таблице ссылок и поиску в ней URL-адреса документа, сопос­тавленного координатам щелчка. Если такой адрес будет найден, то он передается браузеру; в противном случае возвращается сообщение о том, что место щелчка не находится в "горячей" области. Таблица соответствий координат всех горячих об­ластей карты и URL-адресов документов хранится на сервере в виде так называе­мого конфигурационного файла с расширением mар.

Для применения серверного варианта графической карты ссылок в HTML-документе, загружаемом в браузер клиента, используется тег <а>, атрибут href ко­торого содержит адрес конфигурационного файла карты ссылок; внутри тега <а> располагается тег <img>, указывающий на изображение, которое служит основой карты ссылок, и содержащий атрибут ismap:

<а href="адрес_конфигурационного_файла">

<img src="адрес_изображения_карты" ismap="ismap"/>

</а>

примечание. Хорошее правило - сохранение конфигурационного файла и основного графиче­ского изображения карты ссылок в одной папке и под единым именем, но с разны­ми расширениями. Конфигурационный файл имеет расширение тар, а изображе­ние карты ссылок сохраняется в любом файле растрового формата, чаще всего GIF, JPEG или PNG.

Конфигурационный map-файл является обычным текстовым файлом, содержа­щим описание горячих областей графической карты ссылок. Однако форматы представления этих данных могут быть различными. Поэтому перед реализацией серверного варианта карты ссылок следует выяснить у администратора сервера, какой из форматов конфигурационного файла поддерживается. Сейчас существуют форматы конфигурационных файлов CERN и NCSA (аббревиатуры наименований европейского и американского национального научных центров соответственно).

Формат CERN:

тип_области координаты URL-адрес

Тип области:

rect или rectangle - прямоугольник;

poly или polygone - многоугольник;

circle - круг;

default - по умолчанию (область изображения, не являющаяся "горячей").

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

Примеры:

rect (50,100) (150,200) http://www.myweb.ru

poly (20,10) (30,5) (100,25) (50,30) http://www.rambler.ru

circle (100,150) 80 http://www.admiral.ru/hp/dunaev

Формат NCSA:

тип_области URL-адрес координаты

Кроме типов областей, принятых в формате CERN, допускается тип point (то­чечная область). Предполагалось, что в случае нескольких точечных "горячих" об­ластей по щелчку левой кнопкой мыши должна активизироваться та из них, кото­рая ближе к месту щелчка. Однако при наличии областей типа default и point последние можно активизировать только при точном наведении на них указателя мыши, что практически весьма трудно сделать.

Координаты в формате NCSA разделяют запятыми, но не заключают в скобки. При этом круглая область задается несколько иначе, чем в формате CERN: координатами центра и любой точки, лежащей на окружности.

Примеры:

rect http://www.myweb.ru 50,100,150,200

poly http://www.rambler.ru 20,10,30,5,100,25,50,30

circle http://www.myveb.ru 100,150,100,70




Дата добавления: 2015-09-11; просмотров: 29 | Поможем написать вашу работу | Нарушение авторских прав

Теоретический материал для подготовки к практической работе по теме | Простое меню ссылок | Структура URL | Кодирование URL |


lektsii.net - Лекции.Нет - 2014-2024 год. (0.008 сек.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав