Карта-изображение, и где она применяется Опции

[Гость_Ajaks_*]

Применение карт-изображений в веб-дизайне

В последнее время на многих веб-узлах с успехом используются карты-изображения, которые представляют собой встроенные графические файлы (обычно в формате GIF и JPG) с привязанными к различным областям этого изображения гиперссылками. Те из вас, кто пока еще не знаком с этой технологией, наверняка задавали себе вопрос, встретившись в Интернете с картами-изображениями (далее: КИ): "Как же можно так нестандартно расположить несколько графических объектов на веб-странице, например: одна кнопка помещена на 4 пиксела ниже второй, а вторая находится слева вверху на 7 пикселов от третьей или вообще кнопка круглой формы перекрещивается с другим объектом?" И, естественно, расстраивались, что не можете сделать что-либо подобное со своим знанием языка гипертекстовой разметки. А WYSIWYG-редакторы так спозиционировать графику на странице не могут. На самом деле, КИ делается очень просто и вы в этом убедитесь. Но прежде чем рассказывать о процедуре создания КИ, приведу в качестве примера несколько адресов, на которых применяются карты-изображения для различных целей. Самое распространенное применение КИ получили для создания удобных навигационных меню, как на сайте бесплатной графики A-1 Icon Archive=>http://www.free-graphics.com/ или на обучающем сервере http://www.toefl.org/; другой вариант: применения КИ для отображения географических и прочих карт=>http://www.coam.net/~studude/VegasLightsNSoundsmap.htm .

Конфигурация карт-изображений
Прежде всего, следует сказать, что КИ не является принципиально новой технологией. Но раньше их применение было осложнено рядом причин: ранние версии некоторых браузеров (например, Netscape Navigator 1.x) не поддерживали КИ, часть веб-серверов не позволяло использовать графику для создания КИ вообще или предоставляло такую возможность только лишь профессиональным разработчикам или крупным корпорациям. К тому же, в те времена был возможен единственный вариант реализации КИ - серверный, который подразумевал управление переходом на соответствующий документ после клика на конкретной области изображения самим сервером. Сегодня существует клиентский вариант КИ и это во многом облегчает применение данной технологии, которую на сегодняшний день поддерживает большинство современных браузеров.

Сама КИ представляет собой обыкновенное графическое изображение, а ее конфигурация определяется в виде значений координатных кривых, которые прописываются в HTML-коде. Эти значения описывают активные области изображения и содержат информацию о том, куда следует перейти браузеру после нажатия на одну или несколько из этих областей. Активные области могут иметь форму прямоугольника, круга и многоугольника. Также позволительно комбинировать эти три варианта или определять область, расположенную вне активных областей карты-изображения.

Как я уже говорил, КИ могут реализовываться в двух вариантах - серверном и клиентском. Далее подробно рассмотрим каждый из них.

Серверный вариант
Серверный вариант реализации КИ (Server-Side Imagemap) подразумевает, что документ, в котором прописаны координаты областей, находится на самом сервере, который обязательно должен поддерживать CGI-сценарии. Процесс перехода по гиперссылкам на КИ осуществляется следующим образом. При нажатии на одной из активных областей КИ веб-страницы браузером передаются координаты на сервер, который обращается к специальному конфигурационному файлу. Результат обработки данных возвращается назад браузеру в виде URLа, соответствующего данной активной области, который загружается в окне обозревателя. В случае, если конфигурационный файл не содержит данных об обозначенной активной области, выводится сообщение об отсутствии данного документа. Для того, чтобы браузер определил изображение как КИ, необходимо в тэге <IMG> указать параметр ISMAP, а файл конфигурации сохранить с расширением .map.

Серверный вариант поддерживает два формата реализации КИ - CERN и NCSA. Первый разработан научным центром European Organization for Nuclear Research и предлагает следующую запись координат активных областей: тип области координаты URL-адрес. Значения пар координат разделяются запятой и заключаются в круглые скобки. Пример:
rect (54, 127) (45, 344) http://www.nasa.gov/
Используются типы областей rect (прямоугольник), circle (круг), poly (многоугольник) и default (по умолчанию). Формат NCSA разработан центром приложений для суперкомпьютеров (National Center for Supercomputing Applications) и предлагает несколько иной стандарт записи: тип области URL-адрес координаты. Координаты X, Y тоже разделяются запятыми, но в скобки не заключаются:
rect http://www.nasa.gov/ 54, 127 45, 344

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

Клиентский вариант
Клиентский вариант позволяет разместить все данные об активных областях КИ в самом HTML-документе. В этом случае количество обращений к серверу сильно сокращается, а конфигурировать саму КИ можно локально - параллельно с изменением HTML-кода. Размещать файл конфигурации на сервере не нужно: координаты активных областей указываются в самом документе, куда встроено графическое изображение для КИ. Используя клиентский вариант (Client-Side Imagemap), в тэг <IMG> вставляется параметр USEMAP.

В связи с тем, что клиентский вариант на сегодня распространен более широко, подробно рассмотрим процесс описания карты-изображения на примере Client-Side Imagemap.

Для определения конфигурации активных областей КИ используется специальный тэг-контейнер <MAP> с параметром NAME, который должен соответствовать наименованию в USEMAP. Описание активных областей осуществляется с помощью тэга <AREA> с параметрами SHAPE, COORDS, TARGET, ALT, HREF и NOHREF. Параметр SHAPE определяет форму активной области (значения такие же, как в формате CERN серверного варианта). Параметр COORDS осуществляет выбор конкретной активной области и содержит значения пар координат: начало координат размещается в верхнем левом углу графического изображения, которому соответствует начальное значение 0, 0. Параметр TARGET используется при работе с фреймами (назначение такое же, как при создании ссылок в обычном HTML-документе). Параметр ALT аналогичен использованию в обычных гиперссылках (альтернативный текст). Параметры HREF и NOHREF определяют наличие или отсутствие ссылки для данной области.

Для более наглядного представления, как описывать координаты, ниже дан код для конфигурации простейшей карты-изображения.

<IMG SRC=map.gif USEMAP=#map>
<MAP NAME="map">
<AREA SHAPE=rect COORDS="17, 24, 251, 93" HREF="biography.htm" TARGET="_self" ALT="Биография">
<AREA SHAPE=rect COORDS="14, 104, 249, 177" HREF="hobby.htm" TARGET="_self" ALT="Хобби">
<AREA SHAPE=rect COORDS="15, 187, 254, 267" HREF="photo.htm" TARGET="_self" ALT="Фото">
<AREA SHAPE=rect COORDS="12, 275, 256, 350" HREF="mailto:me@mymail.ru" ALT="Пишите">
</MAP>
Этот код осталось вставить в раздел <BODY> и скопировать рисунок map.gif в директорию, где располагается сам HTML-документ.
Также можно совмещать серверный и клиентский варианты. В этом случае необходимо указывать оба параметра - ISMAP и USEMAP. При этом следует помнить, что параметр USEMAP будет доминирующим. Применять такой комбинированный вариант можно во избежание трудностей с функционированием карт-изображений по причине отсутствия поддержки КИ некоторыми браузерами. Если браузер не поддерживает Client-Side Imagemap, то тэг USEMAP будет проигнорирован и реализуется серверный вариант при наличии конфигурационного файла на сервере и поддержке последним CGI.

Утилиты для создания карт-изображений

CoffeeCup Mapper ++ 3.0=>http://www.coffeecup.com/
Эта утилита разработана компанией CoffeeCup Software, известной такими программами, как HTML Editor Pro и рядом FTP-клиентов. Работать с этой программой очень просто: запускаете Map Wizard, загружаете графическое изображение для будущей КИ, определяете адрес, по которому браузер перейдет в случае нажатия на область, не имеющей значений координат, и вариант открытия окна (в этом же окне, в новом и т.д.). После появления файла в окне программы нужно выбрать тип области, которому соответствует своя пиктограмма на панели инструментов (прямоугольник, круг, многоугольник) и выделить область необходимого размера на заготовке. После выделения появится окно, в котором следует указать адрес ссылки, альтернативный текст и вариант открытия документа (здесь же, в виде нового документа и т.д.). Возможно параллельно просмотреть готовую или текущую КИ в установленном по умолчанию браузере. HTML-код созданной карты отображается в нижнем окне программы. CoffeeCup Mapper позволяет создавать КИ только в клиентском варианте.
LiveImage 1.29=>http://www.liveimage.com/
На мой взгляд, лучшей утилитой для создания КИ является программа LiveImage одноименной компании. Во-первых, в ней присутствует встроенный генератор графических заготовок, который полностью автоматизирует процесс изготовления составных объектов КИ. В наличии имеется девять шаблонных изображений и вы можете загрузить собственные. Три варианта размещения: друг под другом, в ряд и в виде таблицы. Интересной возможностью также является дополнительный тип области - Smooth Polygon, который позволяет создавать активные области круглой формы в любых ее проявлениях. Процесс настройки отдельных областей заметно облегчен: выделяете активную область нужной формы и указываете URL, вид загрузки документа после клика и, по желанию, составляете комментарий. В левом окне программы показан список активных областей, любой компонент которого в любой момент можно отредактировать или удалить. Утилита автоматически проверяет конфигурацию карты-изображения и при наличии ошибок выдает сообщение в виде восклицательного знака. Такая опция, как Morph to… трансформирует выделенную область одного типа в другой, а Grid и Grid Settings позволяют включить режим отображения сетки для облегчения определения пар координат. Зайдя в пункт основного меню File/Preferences, вы можете настроить работу программу под свои нужды: включение/отключение запроса на открытие старой или создание новой КИ, параметры отображения карты в окне программы, определение цветов, соответствующих активным и неактивным областям, заднему фону и редактируемой области, указание количества файлов, с которыми недавно работали (Recent Files), режим поддержки JavaScript, перечень поддерживаемых утилитой расширений - CFM, CSS, HTML, SHTML, ASP и другие (также можно добавить новый формат). Есть возможность параллельного тестирования карты-изображения, не выходя из программы.

Основные достоинства и недостатки карт-изображений
Как известно, нет ничего идеального, и карты-изображения не являются исключением из правил. Их применение имеет как свои плюсы, так и минусы.
Плюсы:

Более удобного средства, чем КИ, для создания сложных меню (в особенности - географических, топографических и прочих карт) не найти. Согласитесь, что процесс создания и пространственного размещения на странице нескольких десятков кнопок для обозначения, например, всех областей Российской Федерации, чрезвычайно сложен и требует больших временных затрат.
Использование КИ в качестве навигационных меню на каждой странице вашего веб-узла сократит время загрузки документов и сэкономит место на сервере, к тому же вы ограничитесь изготовлением всего лишь одного графического изображения.
Без сомнения, в ряде случаев карта-изображение украсит вашу страницу и позволит вам реализовать все ваши дизайнерские задумки. Вы можете создавать графические объекты абсолютно любой сложности и формы, что придаст вашему сайту оригинальность и сделает его более запоминающимся для посетителей.
Минусы:
Изображения для КИ, имеющие большой размер, увеличивают время загрузки документов по сравнению со страницами с текстовыми гиперссылками.
Для посетителей, которые экономят свое время пребывания в Интернет, переход к документам по ссылкам, указанным в конфигурации КИ, не позволяет отслеживать страницы, на которых они уже были, так как ссылки на КИ после посещения не меняют свой цвет.
При наведении курсора мыши на определенную активную область КИ в серверном варианте, в статусной строке отображается не URL документа, а координаты области, которые хранятся в конфигурационном файле на самом сервере.
Если параллельно с КИ не предусмотрено текстовое меню, то посетители, которые по каким-либо причинам не могут загрузить графику или отключили ее в своем браузере, останутся не у дел.
Резюме
Несмотря на то, что у меня недостатков получилось больше, я вам не советую пренебрегать использованием карт-изображений. Главное - знать во всем меру и по возможности постараться предусмотреть все трудности, которые могут возникнуть у посетителя вашего сайта при навигации.