Карты

     Гиперссылками может быть не только вся картинка, но и ее часть. Для того чтобы сделать различные части одного графического изображения гиперссылками на различные документы, и используются карты.
     Карта (ее иногда называют карта-меню) может выглядеть как настоящая географическая карта: щелкнете по кружочку, обозначающему город, и отправитесь на виртуальную экскурсию, но нему. Она также может представлять собой набор кнопок или значков, нарисованных художником-дизайнером, или же список текстовых пунктов меню. Тем не менее, все карты одинаково появляются на свет.
     Во-первых, необходимо создать изображение, содержащее кнопки, или иные приспособления для перемещения. Во-вторых, разметить на этом изображении активные области, связывая с каждой областью некоторую Web-страницу. Это делается с помощью программ создания карт-меню, о которых мы поговорим несколько позже. Когда разметка готова, реакция на щелчок мышью на данной карте-изображении будет зависеть от координат курсора в момент щелчка. На первый взгляд это выглядит достаточно просто. На самом деле существует ряд тонкостей, влияющих на производительность Web-узла. С помощью каких тегов изображение становится картой? Прежде всего это уже знакомый нам тег IMG. Необходимо к тегу <IMG ...> добавить специальный атрибут ISMAP или USMAP и пояснить, что данное изображение является картой (mар). Стандарт HTML 2.0 определяет только атрибут ISMAP, который предусматривает обработку "щелчка на карте" на Web-сервере при помощи CGI-запросов, аналогичных применяемым для обработки заполняемых форм. Давайте разберемся, как это происходит. Например, изображение включено в документ следующим образом:
<А HREF="http://www.test.test/cgi-bin/imagemap/example. map"><IMG SRC="ехаmрle.gif" ISMAP></A>
     В тот момент, когда посетитель сайта щелкает на Карте, программа просмотра посылает на сервер пару координат. Эти координаты определяют только точку нa карте, а не выбор пользователя. При таком способе Обработки координатных запросов читатель Web-документа должен щелкнуть на интересующей его точкe и дождаться отклика сервера, прежде чем он получит возможность хотя бы узнать, соответствует ли данная точка какой-нибудь гиперссылке или нет. Пока пользователь ждет ответа, программа просмотра посылает координаты точки щелчка CGI-программе, Которая сравнивает их с файлом определения карты - стандартным текстовым файлом (map-definition filе), определяющим форму и положение URL для активных областей карты.
     Таким образом, преобразование координат в URL-aдpec - дело сервера. Щелчок на точке с координатами (в пикселах) 98,80 относительно верхнего левого угла изображения вызовет такой CGI-запрос:
     http://www.test.test/cgi-bin/imagemap/example.map?98,80,
где example.map ~ имя файла в специальном формате, в котором указано, какие области на карте являются якорями гиперссылок и на какие URL они ссылаются. Формат этого описания зависит от типа Web-cepвера. Недостатком этого подхода является медленная реакция на щелчок и дополнительная загрузка сетей и сервера. Но самый существенный недостаток - невозможность работы с документами, использующими ISMAP-карты без обращения к Web-серверу.
     Если вы захотите включить ISMAP-карту в свой документ, то вам придется узнать формат *.map-файла, поддерживаемого вашим сервером, а также попросить системного администратора разместить созданный вами *.map-файл в каталоге cgi-bin, который в системе UNIX обычно закрыт для "обычных" пользователей.
     Существует также альтернативный механизм обработки щелчков на карте самой программой просмотра. Он поддерживается большинством современных графических программ просмотра, например, Netscape Navigator 2.0 и старше и Internet Explorer 3.0 и старше. Карты такого рода определяются при помощи атрибута USEMAP. Карта-изображение также включается в HTML-документ при помощи уже хорошо знакомого нам тега <IMG>. Но в данном случае, в отличие от рассмотренных ранее "пассивных изображений, при помощи атрибута USEMAP="#mар1" мы сообщаем программе просмотра, что она должна интерпретировать это изображение как карту и искать информацию о разбивке этого изображения на активные области в HTML-файле по символическому имени карты map1. Имя карты может состоять из латинских букв и цифр и не должно содержать пробелов. Прописные и строчные буквы различаются. Внимание следует обратить на обязательный значок в атрибуте USEMAP="#mар1". Перед этим значком может находиться URL файла, если карта описана в нем отдельно от файла того документа, с которым она используется (размещение описания в отдельном файле практически не применяется). Описание активных областей карты-изображения начинается тегом <МAР NAME="имя карты"> и заканчивается тегом </МАР>. Каждая область описывается при помощи тега <AREA SНАРЕ="форма" COORDS= "список координат" HREF="url">, где форма может принимать одно из четырех значений:

rect - прямоугольник;
poly - многоугольник;
circle - окружность;
default - по умолчанию, то есть все части изображения, оставшиеся не описанными явно.

         Атрибут COORDS задает список координат.
Все координаты отсчитываются в пикселах от левого верхнего угла экрана.
     Для прямоугольной области х,у - это координаты левого верхнего и правого нижнего углов, для многоугольной - координаты каждого из углов, для окружности - координата центра и радиус. Для default координаты не задаются и атрибут COQRDS опускается. Атрибут HREF="url" задает URL или путь к файлу с элементом, на который данная область рисунка ссылается. Если вместо HREF="url" записано NOHREF, то данная область не является якорем гиперссылки, щелчок на ней будет проигнорирован.
         Ознакомьтесь с примером карты, можно на Web-сайте City.Ru
         Не забудьте посмотреть, как устроена эта карта, открыв исходный код в Notepad (Блокнот), используя команду Просмотр в виде HTML:
<МАР NAME="ind">
<AREA SHAPE=RECT СООRDS=6,15,42,З1" HREF= "http://www.сity.ru:8101/index-г.html">
<AREA SHAPE=RECT COORDS="48,15,85,31" HREF="http://www.city.ru:8100/index-r.html">
<AREA SHAPE=RECT COORDS="2,58,88,77" HREF="/nw.htm">
<AREA SHAPE=RECT COORDS="2,81,88,100" HREF="/central.htm">
<AREA SHAPE=RECT COORDS="2,104,88,123" HREF="/south.htm">
<AREA SHAPE=RECT COORDS="2,127,88,146" HREF="/ural.htm">
<AREA SHAPE=RECT COORDS="2,150,88,169" HREF="/siberia.htm">
<AREA SHAPE=RECT COORDS="2,173,88,192" HREF="/fareast.htm">
<AREA SHAPE=RECT COORDS="2,200,88,219" HREF="/list.htm">
<AREA SHAPE=defautt HREF="/">
</MAP>
     Как видите, формат описания карт на языке HTML довольно прост. Но как же вычислить координаты областей - гиперссылок на рисунке, хранящемся в графическом файле, чтобы указать эти координаты в атрибутах COORDS="..."? Существуют специальные программы, которые значительно облегчают разметку и даже автоматически генерируют описание карты. Например, это программа для обработки карт Mac-Imagemap:
         http://weyl.zib-berlin.de/imagemap/ mac-imagemap.html
     Можно также использовать программу для обработки карт MapServe Келли Кэмпбелла:
         http://www.spub.ksu.edu/other/machttp_tools/mapserve
Следует дублировать все гиперссылки, созданные при помощи карт, обычными гиперссылками. Это связано с тем, чтo карты поддерживаются не всеми программами просмотра; к тому же, если тот или иной пользователь отключил загрузку изображений, карты так и не появятся на экране.
     Помимо достоинств карты имеют небольшие недостатки, на которые следует обратить внимание. Во-первых, они замедляют работу сервера. Конечно, заглянуть в файл карты и извлечь оттуда URL не такая уж сложная операция. Но нужно учитывать число посетителей, которые щелкают по картам, и время обработки. Во-вторых, отсутствие обратной связи. Когда вы щелкаете по какому-то слову в тексте, имеющему гиперсвязь, оно окрашивается в другой цвет. С картой-меню такого не происходит. Когда курсор мыши попадает на обычную гиперсвязь, программа просмотра показывает соответствующий URL. Когда же курсор перемещается по карте-меню, меняются только координаты после URL страницы. Но это не значит, что вам следует совсем отказаться от использования карт-меню. Тем не менее, прежде чем начать делать карту самостоятельно, попробуйте посетить несколько серверов, использующих карты, и посмотреть, что подходит для вашего собственного сайта.

Реклама