
- •Карты-изображения
- •Основы использования карт-изображений
- •Терминология
- •Графическое представление карты-изображения
- •Описание конфигурации карты-изображения
- •Варианты реализации карт-изображений
- •Серверный вариант
- •Формат cern
- •Формат ncsa
- •Клиентский вариант карты-изображения
- •Особенности использования карт-изображений
- •Преимущества и недостатки карт-изображений
- •Альтернативные средства навигации
Формат ncsa
Разработан центром приложений для суперкомпьютеров National Center for Supercomputing Applications и предлагает несколько иной формат записи конфигурации карт-изображений:
тип_области адрес координаты
Координаты X и Y отделяются запятыми, но не заключаются в круглые скобки.
В этом формате допускается использование строк комментариев. Любая строка, начинающаяся с символа #, будет рассматриваться как комментарий, и ее содержимое будет игнорироваться программой интерпретации.
Могут использоваться следующие типы областей:
rect, circle, poly, default и point.
Приведем пример записи конфигурационного файла формата NCSA:
# Пример записи конфигурационного файла
rect http://www.anywhere.com/ 56,47 357,265
circle http://www.anywhere.com/ 366,147 366,256
poly http://www.anywhere.com/ 534,62 699,62 698,236 626,261 534,235 534,62
rect http://www.site.ru/ 54,127 45,344
Файл конфигурации изображения-карты — это обычный текстовый файл, который содержит информацию об активных областях данного изображения. Для каждого изображения, которое будет использоваться в режиме карты, требуется отдельный конфигурационный файл.
Клиентский вариант карты-изображения
Клиентский вариант карты-изображения позволяет разместить всю информацию о конфигурации карты в HTML-файле, в который встроено изображение. В случае же применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Это может потребовать дополнительных затрат времени на ожидание. При клиентском варианте число обращений к серверу уменьшается, и увеличивается скорость доступа к информации. В этом варианте также для редактирования конфигурации карты нет необходимости обращения к серверу, поэтому вся работа по созданию карты-изображения может быть выполнена локально, одновременно с редактированием HTML-файла. В отличие от серверного варианта, в котором для каждой карты-изображения требовался отдельный конфигурационный файл, в этом варианте конфигурация карты может располагаться непосредственно в том же HTML-документе, в котором задана ссылка на опорное изображение. Чаще всего именно так и поступают, хотя допустимо сохранять конфигурацию карты в отдельном файле и давать на него ссылку.
Для указания того, что встроенное изображение является опорным для карты, используется параметр USEMAP тэга <IMG>. Значением параметра USEMAP является ссылка на описание конфигурации карты.
В связи с тем что клиентский вариант на сегодня распространен более широко и к тому же более доступен, подробно рассмотрим процесс конфигурации карты-изображения на примере Client-Side Imagemap.
Тэг <МАР>
Для описания конфигурации областей карты-изображения используется специальный тэг <МАР>, единственным параметром которого является NAME.
Значение параметра NAME определяет имя, которое должно соответствовать имени в USEMAP. Тэг <МАР> требует закрывающего тэга </МАР>. Внутри этой пары тэгов должны располагаться описания активных областей карты, для чего используется специальный тэг <AREA>.
Необходимо отметить, что описание карты-изображения следует сразу же после указания тега рисунка <IMG>:
<IMG SRC="picture.gif" USEMAP="#mymap">
<MAP NAME="mymap">
Координаты активных областей...
</MAP>
Тэг <AREA>
Каждый отдельный тэг <AREA> задает одну активную область. Завершающий тэг не требуется.
Активные области могут перекрываться. В случае если некоторая точка относится одновременно к нескольким активным областям, то будет реализована та ссылка, описание которой располагается первым в списке областей.
Параметры тэга <AREA>
Параметр |
Назначение |
||||||||||
SHAPE |
определяет форму активной области;
Допустимыми значениями являются rect, circle, poly, default. Эти значения задают области в виде прямоугольника, круга, многоугольника. Последнее значение — default -определяет все точки области. Поэтому в данном случае описание области default должно располагаться последним в списке активных областей.
Если параметр SHAPE опущен, то по умолчанию предполагается значение rect. |
||||||||||
COORDS |
задает координаты отдельной активной области
Значением параметра является список координат точек, определяющих активную область, разделенных запятыми. Координаты записываются в виде целых неотрицательных чисел. Начало координат размещается в верхнем левом углу графического изображения, которому соответствует начальное значение 0, 0; Первое число определяет координату по горизонтали, второе — по вертикали. Список координат зависит от типа области.
|
||||||||||
HREF |
наличие гиперссылки для данной области; . Правила записи полностью совпадают с правилами записи ссылок в тэге <А>. |
||||||||||
NOHREF |
отсутствие гиперссылки для данной области. |
||||||||||
TARGET |
используется при работе с фреймами Его назначение - указать имя фрейма, в который будет размешен документ, загружаемый по данной ссылке. |
||||||||||
ALT |
позволяет записать альтернативный текст для каждой из активных областей изображения. Альтернативный текст для активных областей никогда на экране не появится |
Параметры HREF и NOHREF являются взаимоисключающими. Если не задан ни один из этих параметров, то считается, что для данной области не имеется ссылки. То же самое явно определяет параметр NOHREF, не требующий значения. Параметр NOHREF полезно использовать для исключения части активной области. Пусть, например, необходимо создать активную область в виде кольца. Такой тип области не предусмотрен в списке возможных областей, однако он может быть реализован путем задания двух круговых областей. Для этого сначала следует задать область меньшего радиуса и указать в качестве параметра NOHREF. Далее нужно задать область большего радиуса с центром в той же точке и указать нужную ссылку. Тогда область внутри кольца, определенная двумя окружностями различного радиуса, будет иметь необходимую ссылку. Использование подхода, основанного на взаимном перекрытии областей, позволит строить области весьма разнообразной формы.
Отметим также, что не все браузеры поддерживают тип области default. В частности, Microsoft Internet Explorer вообще не разрешает использовать данный тип области. Поэтому вместо области типа default можно рекомендовать задание прямоугольной области с размерами, равными размерам всего изображения. Естественно, что такая область должна описываться последней.
Пример карты-изображения (клиентский вариант)
<IMG SRC="box.jpg" BORDER="1" WIDTH="300" HEIGHT="234" ALT="" USEMAP="#gift">
<MAP NAME="gift">
<AREA SHAPE="rect" COORDS="60, 26, 222, 98" HREF="bantik.html" ALT ="Бантик">
<AREA SHAPE="rect" COORDS="63, 88, 135, 188" HREF="left.html" ALT="Левая сторона">
<AREA SHAPE="rect" COORDS="151, 102, 225, 200" HREF="right.html" ALT="Правая сторона">
</MAP>
В завершение следует добавить, что возможно совмещение серверного и клиентского вариантов карты-изображения. В этом случае в теге рисунка <IMG> необходимо указывать оба параметра — ISMAP и USEMAP. При этом следует помнить, что параметр USEMAP будет доминирующим.
Такой комбинированный вариант можно применять во избежание трудностей, связанных с отсутствием поддержки данной технологии некоторыми браузерами (хотя таких — считанные единицы). Если браузер не поддерживает Client-Side Imagemap, то параметр USEMAP проигнорируется, а реализован будет серверный вариант (при наличии конфигурационного файла на сервере и поддержке последним CGI).
Приведем пример комбинированного варианта:
<А HREF="http://www.anywhere.com/testmap/logo.map">
<IMG SRC="logo.gif" USEMAP="#logo" ISMAP></A>