Технология карт-изображений


       Не всегда удобно представлять меню, схему сайта в виде списка ссылок или отдельных изображений. Иногда выгоднее с точки зрения дизайна, удобства и простоты использования делать графическое меню в виде единого графического изображения - карты. При этом либо карта представляет собой набор небольших изображений, очень точно подогнанных друг к другу, или одно большое изображение, разбитое на зоны с помощью технологии чувствительных карт. Именно её мы рассмотрим в этом разделе. Все описанные ниже примеры работают как в IE, так и в Netscape.
    Предположим, вы получили заказ от Московского метрополитена создать электронный справочник - карту метро. После заставки (splash screen) с рекламой метрополитена, согласно вашему плану, должна отображаться страница с картой. Она же должна являться системой меню, предоставляющей пользователю доступ к информации о каждой конкретной станции. Проще всего разбить изображение карты метро на чувствительные зоны, нажатие курсором мыши на которые приведёт к загрузке соответствующей страницы.
    Рассмотрите пример "metromap.htm". То, что вы видите - html-документ с одной большой картинкой "metro.gif", связанной с текстовым описанием карты. Подвигайте мышью в пределах "кольца" метро. Указатель мыши будет менять свой вид со стандартной "стрелки" на "руку" только над активными зонами (по-другому, "горячими точками" - "hot spot"), являющимися ссылками на связанные html-страницы. Нажатие на любую из них приведёт к загрузке html-документа, описывающего конкретную станцию метро.
    В данном случае активные зоны имеют вид небольших кругов, наложенных точно на обозначения станций. Вообще же, активная зона может иметь контур окружности заданного радиуса (в серверной версии NCSA-карт это может быть эллипс), четырёхугольника (можно равностороннего, то есть квадрата) или многоугольника с заданными вершинами (замкнутого, с любым количеством углов [хотя некоторые map-редакторы и web-сервера имеют ограничения на количество вершин многоугольника]). Три типа активных зон приведены в примере "zonetype.htm" (верхний ряд рисунков) - прямоугольник, круг, произвольный многоугольник. Разметка зон  невидима при отображении в браузере, примерно "вычислить" их контур можно по смене указателя мыши или появлении в статусной строке браузера соответствующего адреса (см. "Невидимая зона" - прямоугольная зона наложена на пустое изображение). Иногда при щелчке по зоне появляется оконтуривание, способное испортить впечатление - это такая нехорошая особенность браузера. В принципе, карта может существовать сама по себе, без файла картинки (см. "Без изображения"), но это бессмысленно и может привести к искажению расположения разметки зоны на области изображения.
    После создания карты вы уже не должны изменять размер изображения (в графическом редакторе или с помощью атрибутов width height тега <IMG>), так как активные зоны жёстко привязаны к изображению координатами (см. "Неправильный размер"). Если после создания файла карты для изображения вам пришла в голову фантазия изменить размер изображения - растянуть или сжать его, вам придётся потом переделывать карту под новые размеры.
    Как создаётся описание карты? Просмотрите исходник "zonetype.htm". Карта внутри HTML-документа описывается в виде структуры:

<MAP NAME="имя_карты">
<AREA SHAPE="тип_зоны" COORDS="координаты" HREF="адрес_ссылки">
</MAP>

[кавычки для параметров атрибутов не обязательны]

    Изображение связывается с описанием карты следующим образом:

<IMG SRC="имя_файла" USEMAP="#имя_карты">

    Имя карты в атрибуте USEMAP тега IMG должен совпадать с именем карты в атрибуте NAME тега MAP, решётка "#" перед именем карты в теге <IMG> обязательна (а в теге <MAP> она не нужна). Имя карты - произвольное слово.
    "Тип зоны" может принимать одно из трёх значений: "RECT" для прямоугольника, "CIRCLE" для круга и "POLY" для многоугольника.
    Координатная система специфична для каждого типа зоны. Прямоугольник может быть описан по двум вершинам - верхней левой и нижней правой, в двухмерной системе координат; окружность - по центру и радиусу; многоугольник - по координатам каждой из вершин, причём последняя вершина совпадает с первой для замыкания фигуры, хотя, в принципе, замыкание не обязательно (рис. 2.1.1).

         
Прямоугольник (rectangle)    Окружность (circle)    Многоугольник (polygon)
Рис. 2.1.1
Описание фигур по координатам

    Координаты перечисляются через запятую

COORDS="x1,y1,x2,y2" для прямоугольника,
COORDS="x,y,r" для окружности,
COORDS="x1,y1,x2,y2,...xn,yn" для многоугольника.

    В качестве единицы размерности приняты пикселы, начало координат (точка 0,0) располагается в вернем левом углу области изображения (не экрана и не окна, так как карта строится для каждого изображения).
В качестве адреса ссылки мы указываем URL ресурса так же, как для тега <A HREF>. Клик на пространстве изображения, свободном от зон, расценивается как требование перехода по default-ссылке. При описании карты мы можем указать "ссылку по умолчанию" как

<AREA SHAPE=default HREF="адрес_ссылки">

Однако чаще всего оформлять всё неразбитое на зоны пространство как зону по умолчанию не нужно, иначе курсор мыши будет иметь тип "hand" (рука с указательным пальцем) на всей картинке, т.е. вся неразмеченная на зоны-фигуры область будет являться одной большой зоной. Это не работает в IE последних версий, однако сохранено в NN.
Тег <IMG> и карта должны располагаться в одном документе.
    Для создания нескольких активных зон на одном изображении используются несколько элементов <AREA> в одной карте (одна зона - один тег <AREA>, в одной карте <MAP> должен быть хотя бы один элемент <AREA>).
    Зоны могут перекрываться, образуя сложные фигуры (см. "combine.htm"). Если две зоны перекрываются, какая из них будет лежать сверху и отвечать на нажатие кнопки мыши? Та, чей  тег <AREA> в структуре <MAP> описан первым. Здесь прямоугольник лежит поверх круга.

<IMG SRC="combine.gif" USEMAP="#comb" border=0>
<MAP NAME="comb">
<AREA SHAPE=RECT COORDS="36,68,164,132" HREF="javascript:alert('rectangle')">
<AREA SHAPE=CIRCLE COORDS="100,100,50" HREF="javascript:alert('circle')">
</MAP>

Для изменения порядка перекрывания зон нужно всего лишь изменить порядок тегов <AREA>:

<IMG SRC="combine.gif" USEMAP="#comb" border=0>
<MAP NAME="comb">
<AREA SHAPE=CIRCLE COORDS="100,100,50" HREF="javascript:alert('circle')">
<AREA SHAPE=RECT COORDS="36,68,164,132" HREF="javascript:alert('rectangle')">
</MAP>

Обратите внимание, что при движении указателя мыши над активной зоной в статусной строке браузера отображается адрес ссылки. "javascript: alert('circle')" - специальное выражение Java Script, открывающее окно сообщения (MsgBox) со строкой, указанной как параметр функции "alert". В других наших примерах используется выражение "javascript:void(0)" для обнуления ссылки - при клике по такой ссылке URL текущего документа не меняется.
Рамка неприятного голубого цвета образуется по периметру изображений-карт автоматически, как и в случае изображений-ссылок

<A HREF=""><IMG SRC=""></A>

Важно понимать, что карта не модифицирует сам графический файл, а лишь накладывается на него после прорисовки изображения браузером.
Описывать координаты фигур можно и вручную, отслеживая их в графическом редакторе (как PhotoShop, так и Corel Draw отображают положение указателя мыши на картинке в пикселах  или других указанных единицах). Однако это приемлемо лишь для простейших случаев. При описании большого количества зон, многоугольников, перекрывающихся зон пригодится специальный редактор карт. На компакт-диске прилагается "MapThis!", один из самых популярных map-редакторов (другие map-редакторы: "MapEdit", "CoffeeCup Image Mapper", "CuteMAP", "GIFfy Cutter", "Spinel WebMapper", "Visual ImageMapper", "HTML Map Designer" и др).
Типичная последовательность действий при работе с "Map This!":

1) Открываете новый файл (предлагается выбрать графический файл, на основе которого будет строиться карта). Вы можете открыть одновременно несколько файлов в разных окнах.
2) С помощью инструментов "Rectangle", "Circle", "Polygon" рисуете зону нужного размера, затем переключаетесь на указатель "Arrow", устанавливаете размер более точно растягиванием / сужением фигуры за её маркеры, перемещаете фигуру в нужное вам место на карте. Можете скопировать или вырезать фигуру, если хотите ещё раз использовать её.
Зона, над которой находится указатель мыши, маркируется зелёным контуром, другие зоны - красным и голубым (для различия нескольких зон при их перекрывании). При нажатии правой кнопки мыши становится доступно контекстное меню. Управление картой производится из панели инструментов, контекстного меню и "горячими клавишами" с клавиатуры. Возможно перемещение зон по слоям вверх/вниз для изменения их порядка в стопке слоёв (Move Up / Move Down), удаление зоны (Delete Area в меню, то же самое клавиша Del).
3) Двойной щелчок по зоне (а также нажатие на кнопку с карандашом или выбор пункта контекстного меню Edit Area Info) открывает окно, где можно ввести адрес ссылки и комментарий, который будет записан как атрибут ALT для тега AREA и будет отображаться  всплывающей подсказкой для данной зоны. Внимание! Необходимо раздать URLы всем зонам или удалить ненужные зоны. Если вы пропустите хотя бы одну зону, редактор не даст вам сохранить карту. Начинающие пользователи программы MapThis делают много мелких зон, которые потом сложно увидеть, выделить и удалить. Помочь найти все зоны поможет список зон, показывающийся при нажатии кнопки (эта кнопка располагается на панели инструментов редактора между красным крестиком [удаление зоны] и дискеткой [сохранение файла карты]). Зоны с необозначенным URL будут помечены предупреждающим значком - красный восклицательный знак в жёлтом треугольнике.
4) При записи карты (нажатием на значок дискеты) будет предложено ввести дополнительные сведения, в том числе адрес по умолчанию. Отключить требование адреса по умолчанию можно в General Preferences / Require Default URL. Имеется возможность сохранять карту в разных форматах. Выберите CSIM (Client Side Image Map). Введите в строке Title имя карты для тега <MAP>. Остальные сведения не обязательны. Затем, в следующем диалоговом окне, введите имя файла, дополните его расширением .htm или .html, проследите, чтобы при этом был выбран переключатель HTML, а не NCSA или CERN.
5) Просмотрите записанный код в <Блокноте>. Во-первых, удалите все комментарии, начинающиеся с <<!-- #$>, затем вставьте вручную в код тег <IMG> и свяжите его с картой <MAP> атрибутом USEMAP, так как сам редактор тег <IMG> не вставляет.

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

ellipse URL x1,y1 x2,y2

    Окружность:

circle URL x0,y0 x1,y1

Прямоугольник:

rect URL x1,y1 x2,y2

    Многоугольник (в данном случае треугольник, последняя координатная пара совпадает с первой):

poly URL x1,y1 x2,y2 x3,y3 x1,y1

    Зона по умолчанию:

default URL

    Появляется новый тип зоны - точка, не имеющая размеров:

point URL x,y

    Точка интересна тем, что перебивает зону по умолчанию, как если бы той не было вообще. Если на карте имеются несколько точек, то сервер высчитывает, к которой из них ближе был произведён щелчок - результат аналогичен тому, как если бы вы щёлкнули именно по этой точке (зона по умолчанию не реагирует). Создайте файлы , , , так, чтобы вы отличали их друг от друга, файл карты с записью:

default /default.htm
point /left_point.htm 100,100
point /right_point.htm 300,100
и HTML-документ с картинкой (найдите сами картинку размером не менее 400 точек по ширине и 200 по высоте), к которой привязана карта:

<A HREF = ><IMG SRC = <имя_картинки> ISMAP></A>

    Беда в том, что пробовать без web-сервера, понимающего карты в формате NCSA, бессмысленно. Браузер тоже <не понимает> такие карты. Рекомендую установить бесплатно распространяемый персональный web-сервер , его возможностей с избытком хватит для всех изучаемых в этом курсе технологий.

    Некоторые URL на серверных картах могут не функционировать, например, основанные на клиентских схемах about: и javascript:.
    Файл карты хранится в отдельном от HTML-документа файле с расширением MAP. Использовать другое, неизвестное серверу расширение нельзя - карта работать не будет.
    Подключение карты к изображению в HTML-документе производится так:

<A HREF = "путь/имя_карты.map">
<IMG SRC = "имя_изображения" BORDER = 0 ISMAP>
</A>

Именно атрибут ISMAP (<я-есть-карта>) указывает браузеру на необходимость передачи на сервер координат точки щелчка, без этого атрибута браузер не пошлёт координаты и сервер вернёт браузеру код ошибки <400 Bad Request>.

    Есть ещё один способ связать карту с картинкой, он основан на применении уже известной нам графической кнопки <INPUT TYPE = image SRC = <имя_изображения>>.

<FORM METHOD = GET ACTION = "путь/имя_карты.map">
<INPUT TYPE = image SRC = <имя_изображения>>
</FORM>

    Принципиально эти способы не отличаются друг от друга.
    Создавать серверные карты можно также в Map This, только при введении сведений о карте и её записи выставляйте в переключателе опцию NCSA ( - <Национальный Центр Приложений для Суперкомпьютеров>, один из основоположников Web и Internet вообще, организация, известная ныне в основном как родоначальник браузера Mosaic), а не HTML. Вставка тега <IMG> в серверную карту не требуется.
    Мы не разбирали ещё формат CERN (<Европейский Центр по Ядерным Исследованиям>, также один из главных основоположников Web), и не будем. Это ещё один вариант серверных карт, и синтаксис описания зон опять же отличен от такового для CSIM и NCSA (такие карты поддерживаются, например, сервером EMWAC HTTPS, но не поддерживаются в WebSite).