Школа
Web. Применение
карт-изображений
в веб-дизайне
Золотое сечение
|
Применение карт-изображений в веб-дизайне
Что такое карта-изображение и где она применяется
В последнее время на многих веб-узлах с успехом используются карты-изображения, которые представляют собой встроенные графические файлы
(обычно в формате GIF и JPG) с привязанными к различным областям этого изображения гиперссылками. Те из вас, кто пока еще не знаком с этой
технологией, наверняка задавали себе вопрос, встретившись в Интернете с картами-изображениями (далее: КИ): "Как же можно так нестандартно
расположить несколько графических объектов на веб-странице, например: одна кнопка помещена на 4 пиксела ниже второй, а вторая находится
слева вверху на 7 пикселов от третьей или вообще кнопка круглой формы перекрещивается с другим объектом?" И, естественно, расстраивались,
что не можете сделать что-либо подобное со своим знанием языка гипертекстовой разметки. А WYSIWYG-редакторы так спозиционировать графику
на странице не могут. На самом деле, КИ делается очень просто и вы в этом убедитесь. Но прежде чем рассказывать о процедуре создания КИ,
приведу в качестве примера несколько адресов, на которых применяются карты-изображения для различных целей. Самое распространенное
применение КИ получили для создания удобных навигационных меню, как на сайте бесплатной графики A-1 Icon Archive или на обучающем сервере
TOEFL; другой вариант: применения КИ для отображения географических и прочих карт.
Конфигурация карт-изображений
Прежде всего, следует сказать, что КИ не является принципиально новой технологией. Но раньше их применение было осложнено рядом причин:
ранние версии некоторых браузеров (например, 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
Эта утилита разработана компанией CoffeeCup Software, известной такими программами, как HTML Editor Pro и рядом FTP-клиентов. Работать с этой программой очень просто: запускаете Map Wizard, загружаете графическое изображение для будущей КИ, определяете адрес, по которому браузер перейдет в случае нажатия на область, не имеющей значений координат, и вариант открытия окна (в этом же окне, в новом и т.д.). После появления файла в окне программы нужно выбрать тип области, которому соответствует своя пиктограмма на панели инструментов (прямоугольник, круг, многоугольник) и выделить область необходимого размера на заготовке. После выделения появится окно, в котором следует указать адрес ссылки, альтернативный текст и вариант открытия документа (здесь же, в виде нового документа и т.д.). Возможно параллельно просмотреть готовую или текущую КИ в установленном по умолчанию браузере. HTML-код созданной карты отображается в нижнем окне программы. CoffeeCup Mapper позволяет создавать КИ только в клиентском варианте.
LiveImage 1.29
На мой взгляд, лучшей утилитой для создания КИ является программа LiveImage одноименной компании. Во-первых, в ней присутствует встроенный генератор графических заготовок, который полностью автоматизирует процесс изготовления составных объектов КИ. В наличии имеется девять шаблонных изображений и вы можете загрузить собственные. Три варианта размещения: друг под другом, в ряд и в виде таблицы. Интересной возможностью также является дополнительный тип области - Smooth Polygon, который позволяет создавать активные области круглой формы в любых ее проявлениях. Процесс настройки отдельных областей заметно облегчен: выделяете активную область нужной формы и указываете URL, вид загрузки документа после клика и, по желанию, составляете комментарий. В левом окне программы показан список активных областей, любой компонент которого в любой момент можно отредактировать или удалить. Утилита автоматически проверяет конфигурацию карты-изображения и при наличии ошибок выдает сообщение в виде восклицательного знака. Такая опция, как Morph to… трансформирует выделенную область одного типа в другой, а Grid и Grid Settings позволяют включить режим отображения сетки для облегчения определения пар координат. Зайдя в пункт основного меню File/Preferences, вы можете настроить работу программу под свои нужды: включение/отключение запроса на открытие старой или создание новой КИ, параметры отображения карты в окне программы, определение цветов, соответствующих активным и неактивным областям, заднему фону и редактируемой области, указание количества файлов, с которыми недавно работали (Recent Files), режим поддержки JavaScript, перечень поддерживаемых утилитой расширений - CFM, CSS, HTML, SHTML, ASP и другие (также можно добавить новый формат). Есть возможность параллельного тестирования карты-изображения, не выходя из программы.
http://www.alpet.spb.ru/articles/imagemaps.shtml
|
