Изображения

Сегодня многие Web-страницы располагают интересной разновидностью меню - изображениями-картами, т.е. изображениями, чувствительными к нажатию кнопки мыши (imgemaps - от англ. cлов image - изображение и map - план, карта). Они обычно связаны с определенными HTML - документами или другими ресурсами Internet. Начальные страницы многих сайтов имеют такую разновидность графического меню. На одних страницах оно служит иллюстрированным оглавлением материалов сайта, на других - представлено в виде панели навигационных инструментов.

Изображения карты бывают двух типов: обслуживаемые сервером и программой-клиентом (браузером). Они работают следующим образом:

Обслуживание сервером - когда пользователь нажимает кнопку мыши, программа просмотра посылает координаты указателя мыши Web - серверу, который по ним определяет URL - адрес и возвращает его браузеру. Располагая адресом, браузер связывается с нужным документом или ресурсом Сети.

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

Необходимость использования

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

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

Хотя изображения-карты имеют ряд преимуществ, нередки ситуации, когда от него лучше отказаться:

Если ваш сервер не в состоянии правильно обслуживать изображения-карты.
Если функционирование изображения-карты не может быть проверено без участия сервера. Это означает, что вы не можете протестировать меню на стадии разработки. Чтобы исправить ситуацию, нужно установить программу-сервер на своей машине, либо проверить работу изображения-карты на другом сервере.
Если вы озабочены производительностью вашего сайта. В виду того, что изображения-карты могут быть большими, скорость их загрузки имеет не последнее значение (особенно для пользователей, имеющих медленные модемы). Передача графики может также сильно замедляться в часы максимальной нагрузки Сети.

Файл, определяющий изображение - карту

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

Этот файл может быть в двух форматах: CERN и NCSA. В обоих используются одинаковые координаты и типы зон. Разница лишь в виде представления данных.

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

Формат CERN. Изначально Европейская лаборатория физики элементарных частиц (CERN) была организована как группа европейских исследователей-физиков. Параллельно группа занималась и исследованиями в области компьютерных технологий. Идея создания Всемирной паутины принадлежит сотрудникам этой лаборатории, и поэтому CERN считается "местом рождения" WWW. Когда были изобретены изображения-карты, лаборатория CERN предложила свой формат файла-определения. На серверах, поддерживающих этот формат, можно найти файлы, содержащие строки следующего вида:

region_type {х1,у1) (х2,у2) ... URL

Горизонтальные (x1 и х2) и вертикальные (y1 и у 2) координаты должны заключаться в скобки и разделяться запятыми. Многоточие обозначает дополнительные координаты, например, для зоны в виде многоугольника (poly-region). Например, строка файла формата CERN может иметь следующий вид:

rect (60,40) (340,280) http://www.rectangle.com/

Формат NCSA. Первый популярный браузер, Mosaic, родился в стенах Национального центра по использованию суперкомпьютеров (NCSA) Иллинойского Университета. Когда пришло время изображений-карт, сотрудники центра предложили свой вариант файла-определения. Формат строки такого файла выглядит так:

region_type URL х1,у1 х2,у2 ...

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

rect http://www.rectangle.com/ 60,40 340,280

Типы зон изображения - карты

В каждой строке определяющего файла указывается тип зоны. Координаты зоны обозначаются в пикселах, начиная с верхнего левого угла зоны. Зоны представляют собой различные геометрические фигуры.

Прямоугольная зона. Для создания прямоугольной чувствительной зоны изображения-карты служит тип rect. В этом типе указываются координаты верхнего левого и нижнего правого углов зоны. Зона активизируется при щелчке мышью в ее пределах. Ниже приведены примеры использования прямоугольной зоны в форматах NCSA и CERN, соответственно:

rect http: //www.rectangle.corn/ 100,100 120,120

rect (100,100) (120,120) http://www.rectangle.com/

Многоугольная зона. Для создания такой фигуры используется тип poly. Он предусматривает указание до 100 координат, т. е. многоугольник может иметь соответствующее число вершин. Многоугольник должен быть замкнутым, иными словами, первая пара координат должна совпадать с последней. Чувствительная область находится внутри многоугольника. Определение многоугольной зоны в форматах NSCA и CERN выглядит следующим образом:

poly http://www.polygon.com/ 0,0 100,100 120,120 80,60 40,50 10,10 0,0

poly (0,0) (100,100) (120,120) (80,60) (40,50) (10,10) (0,0) http: //www.polygon.com/

Круглая зона. Для создания чувствительного круга используется тип circle. Способ указания координат здесь имеет свои особенности. В формате NCSA указываются координаты центра круга и одной из точек его окружности:

circle http://www.circle.com/ 100,100 150,150

В формате CERN определяются координаты центра круга и его радиус:

circle (100,100) 50 http://www.circle.com/

Точечная зона. Для создания маленького чувствительного пятна используется тип point. Оно определяется одной парой координат:

point http://www.circle.com/ 88,65

Зона по умолчанию. Если пользователь, щелкнув мышью на изображении-карте, не попал ни в одну из зон, активизируется зона по умолчанию. Она не требует определения координат. Допустим, в файле-определении имеются две следующие строки:

rect http://www.rectangle.com/ 0,0 100,100
default http: //www. rectangle.com/helpme

Если пользователь активизирует прямоугольную зону, его браузер откроет http://www.rectangle.com. Напротив, если щелчок мыши не попадет в эту зону, будет открыт документ http://www.rectangle.com/helpme, так как он ассоциирован с зоной по умолчанию.

Создание файла, определяющего изображение - карту

Эта операция является неотъемлемой частью работы над изображением-картой. Здесь есть два пути: простой и сложный. Первый заключается в использовании специальных приложений. Они позволяют размечать зоны и снабжать их URL - адресами непосредственно на выбранном изображении.

Сложный путь заключается в самостоятельном написании файла-определения. Этот способ не столько трудный, сколько рутинный. Здесь нужно иметь под рукой две программы: графический и текстовый редакторы. Последовательность действий должна быть следующей:

Распечатать изображение и разметить чувствительные зоны.
Загрузить изображение в окно графического редактора, при этом должны выводиться координаты указателя мыши.
В текстовом редакторе создать файл и в дальнейшем сохранить его в формате .MAP, стандартном для Internet.
Для каждой зоны рисунка написать определяющую строку. Использовать графическую программу для определения координат чувствительных зон.
Сохранить файл-определение.

Использование программы CGI для отслеживания нажатий кнопки мыши

Как было сказано выше, для обеспечения работы изображений-карт нужна программа CGI (Common Gate Interface, Общий шлюзовой интерфейс), установленная на сервере. Программа просмотра пользователя при щелчке мышью запускает эту программу и передает ей координаты указателя. Программа CGI, используя файл, определяющий изображение-карту, находит соответствующий координатам URL - адрес и передает его обратно браузеру. В большинстве случаев программа для отслеживания координат мыши предоставляется провайдером услуг Internet.

В HTML - документе строка, описывающая изображение-карту, может выглядеть, например, следующим образом:

<А HREF=“http://www.myserver.com/cgi-bin/mapfile.map”><IMG SRC=“imagemap.gif” ISMAP> </A>

В атрибуте HREF указана ссылка, но не на другую Web - страницу или ресурс Internet, а на изображение-карту. В зависимости от того, каким образом создается изображение-карта, и как работает провайдер, можно также добавлять или не добавлять ссылку на конкретную программу CGI. Когда пользователь активизирует чувствительную зону, координаты указателя обрабатываются программой CGI, и браузер получает от нее нужный URL - адрес.

Большинство провайдеров при создании каталога для Web-сайта пользователя добавляют префикс (~) к его имени. Таким образом, для того чтобы изображение-карта работала, необходимо включить в документ строку такого вида:

<А HREF=“cgi-bin/imagemap/~username/image.map”><IMG SRC=“myimage. gif” ISMAP></A>

Атрибут HREF указывает на /cgi-bin/imagemap/~username/image.map. Вместо username нужно вставить свое имя, а вместо image.map - название файла изображения-карты. Необходимо иметь в виду, что у каждого провайдера могут быть свои требования к тому, как хранить файлы изображений-карт.

Использование изображений - карт, обслуживаемых программой - клиентом (браузером)

Клиентское обслуживание весьма схоже с обслуживанием сервером. Только вместо размещения файлов изображения-карты на сервере и использования программы CGI, все необходимое имеется в HTML - документе. Главное преимущество заключается в уменьшении загрузки Сети. Браузер сам справляется с определением URL - адреса нужного документа.

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

<МАР NAME= “mapname”>
<AREA [SHAPE=“shape”] COORD="x,y,..." [HREF="URL"][NOHREF]>
</MAP>

Определение начинается тэгом <MAP> и заканчивается тэгом </MAP>. Для того чтобы ссылаться на это определение позже в тэге <IMG> оно должно иметь имя, задаваемое при помощи атрибута NAME.

Для задания чувствительных областей используется тэг <AREA>. Как и раньше, указание координат начинается с левого верхнего угла. Ниже описаны атрибуты тэга <AREA>:

SHAPE - определяет форму чувствительной зоны. Имеет значения rect, poly, circle, default. Если этот атрибут не указан, подразумевается значение rect. При наложении двух зон действует значение, определенное первым
COORDS - в этом атрибуте перечисляются через запятую пары координат. Между парами также ставится запятая
HREF - определяет URL - адрес ссылки. Относительные адреса задаются относительно документа, содержащего тэг <MAP>, а не документа, имеющего атрибут USEMAP (если это разные документы). Если в этом же документе используется тэг <BASE>, адресация рассчитывается относительно URL, указанного в этом тэге.
NOHREF - указывает нечувствительную зону, т.е. зону, не связанную с другими документами или ресурсами. Атрибуты NOHREF и HREF взаимоисключающие.

Ниже приведен пример определения изображения-карты при помощи HTML:

В последней строке листинга показано, как ссылаться на изображение-карту:

Этот тэг загружает изображение MYMAP.GIF. Атрибут USEMAP указывает на имя определения изображения-карты, которое было присвоено при помощи атрибута NAME тэга <MAP>.

[ Оглавление ]

helloworld.ru © 2001-2021 Все права защищены