|
Карты-изображенияВ последнее время многие Web-страницы для организации ссылок используют так называемые карты-изображения. Реализация этой возможности предусмотрена языком HTML и позволяет привязывать гипертекстовые ссылки к различным областям изображения. Такой подход нагляднее, чем применение обыкновенных текстовых связей, поскольку пользователь может не читать словесное описание связи, а сразу понять ее смысл по графическому образу. Даже начинающий пользователь, побродив по просторам Интернета, вскоре столкнется с картой-изображением. На рис. 6.1 показана Web-страница одной из крупнейших компьютерных фирм России. Основное меню на этой странице представляет собой карту-изображение с соответствующими ссылками. Запуск известного поискового сервера Yahoo! также приводит к появлению страницы, содержащей карту-изображение. Самая верхняя часть изображения, приведенного на рисунке, содержит четыре кнопки, между которыми написано слово "Yahoo!". Курсор на рисунке показывает на первую из этих кнопок, причем форма курсора дает понять, что последний указывает на ссылку, адрес которой виден в строке статуса браузера. Ссылки, реализующиеся по этим кнопкам, и сделаны по технологии карт-изображений. Однако не следует считать, что карты-изображения должны использоваться всюду, где требуется организовать переходы по ссылкам. Нужно обдумать, имеет ли смысл применение карт-изображений в том или ином случае, взвесив все "за" и "против". В данной главе содержатся все необходимые сведения, касающиеся использования карт-изображений. В этой главе вы узнаете:
Рис. 6.1. Пример Web-страницы, в которой основное меню сделано с помощью карты-изображения
Основы использования карт-изображений Карты-изображения предоставляют пользователям дружественный интерфейс для перехода на другие Web-страницы. Чтобы выполнить переход по такой ссылке, следует просто выбрать нужное место на изображении и щелкнуть мышью. Наличие такого развитого графического интерфейса является одним из значительных преимуществ Web-страниц по сравнению с другими ресурсами Интернета. Вместо текстовых меню, подобных интерфейсу клиентов системы Gopher, пользователи получают наглядное графическое представление информации (рис. 6.2). 
Рис. 6.2. Наглядное представление ссылок (на страницы, рассказывающие о семи чудесах света) с помощью карты-изображения Карта-изображение внешне выглядит как обычное встроенное изображение, но при выборе с помощью курсора мыши той или иной области на этом изображении выполняется переход на другие страницы. Обычно на изображении указывается, где следует сделать щелчок, чтобы перейти на ту или иную страницу. Существует несколько путей указания границ областей, реализующих различные ссылки. Часто используется рамка или какой-либо иной разделитель. Рассмотрим основные понятия, связанные с использованием карт-изображений. Imagemap, Image Map, Area Map, Clickable Map, Sensitive Map — все эти англоязычные термины используются в справочной литературе для обозначения одной и той же возможности — использование встроенного в HTML-документ изображения, для которого определены "горячие" (или активные) точки или области, имеющие ссылки на различные URL-адреса. Будем описывать эту возможность словосочетанием "карта-изображение", подразумевая под этим совокупность нескольких компонентов, обеспечивающих реализацию данной концепции. Основными компонентами являются: само изображение, которое будем называть опорным для данной карты-изображения; описание конфигурации активных областей; а также соответствующее программное обеспечение. Графическое представление карты-изображения Карта-изображение фактически представляет собой обычное встроенное графическое изображение на Web-странице. Эти изображения могут иметь любой допустимый формат (GIF или JPG). При этом в формате GIF может использоваться прозрачный цвет, а также режим чередования строк. Для того чтобы изображение могло использоваться в качестве опорного для карты-изображения, формально не накладывается никаких дополнительных ограничений. Описание конфигурации карты-изображения Конфигурация карты-изображения записывается в виде обычного текста, который в зависимости от используемого формата может быть сохранен в отдельном файле или являться частью HTML-документа. Описание конфигурации содержит координаты для каждой из активных областей изображения, а также URL-адреса, связанные с каждой из этих областей. Активные области могут иметь форму прямоугольников, кругов и многоугольников. Допускается любая комбинация этих фигур. Также может задаваться одно значение URL-адреса, определенное для случая, когда пользователь выполняет щелчок в пределах изображения, но вне любой из заданных активных областей. Конкретные правила записи конфигурации области зависят от выбранного варианта реализации и будут представлены далее. Варианты реализации карт-изображений Концепция карты-изображения на Web-страницах может быть реализована в двух различных вариантах — серверный вариант (server-side imagemap) и клиентский вариант (client-side imagemap). Последнее название часто используют в виде аббревиатуры CSIM. Исторически первым появился и получил распространение серверный вариант карт-изображений, который впервые был реализован в браузере Mosaic. Серверный вариант позволяли использовать первые версии всех трех ведущих браузеров. Серверный вариант может быть реализован в двух различных форматах, которые получили свое наименование по названиям организаций-разработчиков — NCSA и CERN. В последнее время все большее развитие получает клиентский вариант, который впервые был реализован в браузере Microsoft Internet Explorer. Начиная с версии 2.0, этот вариант также поддерживает браузер Netscape. Данный вариант имеет свои неоспоримые преимущества и становится все более популярным. Преимущества и недостатки карт-изображений В использовании карт-изображений есть как положительные, так и отрицательные моменты. Большинство из них носит эстетический характер, но некоторые имеют и технические аспекты. Для создания хороших Web-страниц важно понимать преимущества и недостатки карт-изображений. Карты-изображения наиболее удобно использовать в следующих ситуациях:
HTML-документов, поскольку будет использоваться один и тот же файл описания ссылок. Вместо того, чтобы на каждой странице устанавливать связи с различными частями начальной страницы, достаточно сослаться на общее меню. Такое меню также облегчит навигацию для пользователя. Несмотря на то, что карты-изображения стали необычайно популярны, очевидно, что они не являются неотъемлемым атрибутом Web-страниц и используются далеко не на всех страницах. Есть ситуации, когда не следует использовать карты-изображения. К недостаткам карт-изображений можно отнести следующие:
Серверный вариант реализации карт-изображений Использование на Web-страницах карт-изображений оказывается несколько более сложным делом, чем простое встраивание интересных графических изображений и связывание с ними ссылок. Для реализации серверного варианта карты-изображения необходимо, чтобы HTML-документ был размещен на сервере. Также требуется, чтобы на сервере была сконфигурирована поддержка CGI-сценариев (Common Gateway Interface, Общий интерфейс шлюза), которые выполняют обработку запросов, поступающих от браузера при работе с картой-изображением. Для каждой карты-изображения на сервере должен быть размещен файл, описывающий конфигурацию активных областей. При щелчке мышью в пределах изображения координаты места щелчка передаются браузером серверу, который обращается к конфигурационному файлу, являющемуся, по существу, поисковой таблицей активных областей. Результат поиска возвращается браузеру в виде URL-адреса или сообщения об отсутствии найденных активных областей, соответствующих указанному месту изображения. Для обеспечения функционирования карты-изображения необходимо указать, что данное изображение является опорным для карты. Это выполняется заданием параметра ISMAP в тэге <IMG>. Кроме того, карту-изображение необходимо сделать ссылкой на Web-странице, во многом подобно тому, как это делалось при использовании всего изображения в качестве отдельной ссылки. Напомним, что встроенные изображения могут использоваться как гипертекстовые ссылки, если они включены в тег <А>. Например, чтобы сделать изображение с именем Myimage.gif графическим указателем ссылки на документ в том же самом каталоге с именем exampie.html, следует записать: <А HREF=example.html ><IMG SRC=MyImage.gif></A> Этот HTML-код сообщает серверу, что при щелчке на изображении Mylmage.gif браузеру должен быть возвращен Документ С именем example.html. Параметр ISMAP, добавленный к тэгу <IMG> для приведенного примера, активизирует карту-изображение. Ссылка в этом случае выполняется не к определенному документу, а к файлу конфигурации карты-изображения, содержащему координаты всех активных областей изображения. Файл конфигурации, обычно имеющий расширение MAP, анализируется CGI-программой на сервере вкупе с координатами точки щелчка на изображении. Тогда вместо приведенной строки следует записать: <А HREF=MyImage.map><IMG SRC=MyImage.gif ISMAP></A> Ссылка в этом примере представляет собой не адрес другого HTML-документа, а файл конфигурации карты-изображения, который содержит координаты для каждой активной области изображения с именем Myimage.gif. Примечание Порядок расположения параметров тега <IMG> произволен, однако, параметр ISMAP обычно помещают последним. Файл конфигурации изображения-карты — это обычный текстовый файл, который содержит информацию об активных областях данного изображения. Для каждого изображения, которое будет использоваться в режиме карты, требуется отдельный конфигурационный файл. Совет Для каждой карты-изображения необходим отдельный файл конфигурации. Примите за правило сохранять файл конфигурации в том же самом каталоге и с тем же именем, что и связанное с ним изображение. Например: main_menu.gif и main menu.map. Существуют два формата файлов конфигурации карт-изображений, разработанные в CERN и NCSA и носящие названия этих организаций. Оба этих формата содержат одинаковую информацию, но по-разному ее представляют. В обоих случаях используются одни и те же типы областей, о которых речь пойдет ниже. При разработке карт-изображений для использования на конкретном сервере необходимо получить у администратора системы сведения о принятом на данном сервере способе поддержки карт-изображений. В обоих форматах используются активные области в виде прямоугольников, кругов и многоугольников, а также может задаваться так называемая область по умолчанию (default), которая характеризует все точки области, не принадлежащие ни к одной из активных областей. Если пользователь выполняет щелчок внутри изображения, но вне любой из заданных активных областей, то в качестве URL-адреса будет взято значение, определяемое типом default. Для каждой области в файле конфигурации записывается URL-адрес, который будет возвращен пользователю, когда произойдет щелчок внутри данной области. Этот адрес может быть написан как в относительной, так и в абсолютной форме. Нужно учесть, что относительный URL-адрес должен быть определен по отношению к расположению файла конфигурации, а не файла изображения. Список активных областей в файле конфигурации читается, начиная с первой строки. Если две области перекрываются, то реализуется та ссылка, описание области действия которой встретится первым в файле конфигурации. Совет В файле конфигурации рекомендуется всегда задавать ссылку по умолчанию. Заданная по умолчанию связь будет реализовываться для областей изображения, не относящихся к активным. В простейшем случае URL-адрес, являющийся ссылкой по умолчанию, может просто указывать на страницу с полезной информацией об использовании данной карты. Далее рассмотрим особенности записи и использования различных форматов серверного варианта карт-изображений. CERN — это европейский научный центр, тематика исследований которого весьма широка. Именно здесь была разработана концепция системы World Wide Web, которая явилась толчком всех разработок в области WWW. По праву CERN можно считать родиной Web. Когда возникла необходимость разработки структуры файлов конфигурации карт-изображений, в CERN был предложен следующий формат: тип области координаты URL-адрес Значения пар координат X и Y разделяются запятой и заключаются в круглые скобки. Формат CERN не допускает использования комментариев для пояснения ссылок, связанных с той или иной областью. Могут использоваться следующие типы областей: rect, circle, poly и default. Этот формат допускает двоякое написание названий типов областей — как в сокращенной, так и в полной форме. Наряду с приведенными названиями типов могут использоваться названия rectangle, circ и polygon. Приведем пример записи информации об участках на карте-изображении в формате CERN: rect (56,47) (357,265) http://www.anywhere.com/ circ (366,147) 109 http://www.anywhere.com/ polygon (534,62) (699,62) (698,236) (626,261) (534,235) (534,62) http://www.anywhere.com/ Национальный центр суперкомпьютерных приложений NCSA (National Center for Supercomputing Applications) университета штата Иллинойс также внес значительный вклад в развитие Web. Здесь был создан первый популярный графический браузер — программа Mosaic. В NCSA был предложен формат конфигурационного файла, отличающийся по форме записи от формата CERN. Этот формат имеет следующий вид: тип_области URL-адрес координаты Могут использоваться следующие типы областей: rect, circle, poly, default и point. Координаты X и Y отделяются запятыми, но не заключаются в круглые скобки. В этом формате допускается использование строк комментариев. Любая строка, начинающаяся с символа #, будет рассматриваться как комментарий, и ее содержимое будет игнорироваться программой интерпретации. Формат NCSA предлагает несколько отличный способ для задания круговых областей (по сравнению с форматом CERN и рассматриваемым ниже клиентским вариантом). Круговая область задается координатами двух точек — центра и любой точки, лежащей на окружности. Примечание Формат NCSA допускает использование типа области point (точечная область). Этот тип области не применяется ни в формате CERN, ни при использовании клиентского варианта карт-изображений. Замысел создателей формата заключался в том, что при наличии ряда точечных областей по щелчку мыши активизировалась ссылка, находящаяся ближе других. Однако, наличие такого типа области, по существу, входит в противоречие с типом области default, так как при одновременном использовании областей point и default реализация ссылки, определенной типом point, возможна только при точном попадании в данную точку мышью. Это довольно трудно и вряд ли создаст комфортные условия при работе с таким документом. В настоящее время тип 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 Клиентский вариант карты-изображения Клиентский вариант карты-изображения позволяет разместить всю информацию о конфигурации карты в HTML-файле, в который встроено изображение. В случае же применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Это может потребовать дополнительных затрат времени на ожидание. При клиентском варианте число обращений к серверу уменьшается, и увеличивается скорость доступа к информации. В этом варианте также для редактирования конфигурации карты нет необходимости обращения к серверу, поэтому вся работа по созданию карты-изображения может быть выполнена локально, одновременно с редактированием HTML-файла. В отличие от серверного варианта, в котором для каждой карты-изображения требовался отдельный конфигурационный файл, в этом варианте конфигурация карты может располагаться непосредственно в том же HTML-документе, в котором задана ссылка на опорное изображение. Чаще всего именно так и поступают, хотя допустимо сохранять конфигурацию карты в отдельном файле и давать на него ссылку. Для указания того, что встроенное изображение является опорным для карты, используется параметр USEMAP тега <IMG>. Значением параметра USEMAP является ссылка на описание конфигурации карты. Примечание Браузер Netscape не допускает использование отдельного файла для описания конфигурации карты. Например: <IMG SRC=logo.gif USEMAP=#logo> В этом примере изображение, хранящееся в файле с именем logo.gif, является опорным для карты-изображения, реализуемой в клиентском варианте. Описание конфигурации активных областей должно располагаться в том же файле, что и данная строка HTML-кода, и иметь для данного примера имя logo. Для описания конфигурации областей карты-изображения используется специальный тег <МАР>, единственным параметром которого является NAME. Значение параметра NAME определяет имя, которое должно соответствовать имени в USEMAP. Тег <МАР> требует закрывающего тега </МАР>. Внутри этой пары тегов должны располагаться описания активных областей карты, для чего используется специальный тег <AREA>. Каждый отдельный тег <AREA> задает одну активную область. Завершающий тег не требуется. Активные области могут перекрываться. В случае если некоторая точка относится одновременно к нескольким активным областям, то будет реализована та ссылка, описание которой располагается первым в списке областей. Параметрами тега <AREA> являются SHAPE, COORDS, HREF, NOHREF, TARGET, и ALT. Рассмотрим назначение этих параметров. Параметр SHAPE определяет форму активной области. Допустимыми значениями являются rect, circle, poly, default. Эти значения задают области в виде прямоугольника, круга, многоугольника. Последнее значение — default — определяет все точки области. Если параметр SHAPE опущен, то по умолчанию предполагается значение rect, т. е. область в виде прямоугольника. Предупреждение Не следует путать область типа default, которая описывает все точки изображения, и значение параметра SHAPE по умолчанию, которым является rect. Примечание В отличие от серверного варианта, где область типа default определяла все точки на изображении, которые не относятся к какой-либо активной области, для клиентского варианта область типа default определяет вообще все точки изображения. Поэтому в данном случае описание области default должно располагаться последним в списке активных областей. Если, например, описание области default поставить первым, то всегда для клиентского варианта будет реализовываться ссылка, определяемая данной областью, а все остальные ссылки будут игнорироваться (именно так реализован данный тип области в Netscape). Для серверного варианта расположение описания области default не имеет значения. Это различие учитывается в примерах, приводимых в конце главы. Совет Отметим также, что не все браузеры поддерживают тип области default. В частности, Microsoft Internet Explorer вообще не разрешает использовать данный тип области. Поэтому вместо области типа default можно рекомендовать задание прямоугольной области с размерами, равными размерам всего изображения. Естественно, что такая область должна описываться последней. Именно так поступают некоторые программы редактирования карт-изображений, которые будут рассматриваться ниже. Параметр COORDS задает координаты отдельной активной области. Значением параметра является список координат точек, определяющих активную область, разделенных запятыми. Координаты записываются в виде целых неотрицательных чисел. Начало координат располагается в верхнем левом углу изображения, которому соответствует значение 0,0. Первое число определяет координату по горизонтали, второе — по вертикали. Список координат зависит от типа области. Для области типа rect задаются координаты верхнего левого и правого нижнего углов прямоугольника. Для области типа circle задаются три числа — координаты центра круга и радиус. Для области типа poly задаются координаты вершин многоугольника в нужном порядке. Заметим, что последняя точка в списке координат не обязательно должна совпадать с первой. Если они не совпадают, то при интерпретации данных для этой формы области браузер автоматически соединит последнюю точку с первой. Различные редакторы карт-изображений в этом отношении работают по-разному — одни добавляют первую точку в конец списка, а другие — нет. Количественные ограничения на число вершин довольно велики и покрывают практически все мыслимые потребности. По крайней мере многоугольник, имеющий 100 вершин, уверенно обрабатывается всеми ведущими браузерами. Есть ограничение, связанное с самим языком HTML, согласно которому список не может содержать более 1024 значений. Многоугольник вполне может быть невыпуклым. Область типа default не требует задания координат. Параметры HREF и NOHREF являются взаимоисключающими. Если не задан ни один из этих параметров, то считается, что для данной области не имеется ссылки. То же самое явно определяет параметр NOHREF, не требующий значения. Параметр HREF определяет адрес ссылки, который может записываться в абсолютной или относительной форме. Правила записи полностью совпадают с правилами записи ссылок в тэге <А>. Параметр NOHREF полезно использовать для исключения части активной области. Пусть, например, необходимо создать активную область в виде кольца. Такой тип области не предусмотрен в списке возможных областей, однако он может быть реализован путем задания двух круговых областей. Для этого сначала следует задать область меньшего радиуса и указать в качестве параметра NOHREF. Далее нужно задать область большего радиуса с центром в той же точке и указать нужную ссылку. Тогда область внутри кольца, определенная двумя окружностями различного радиуса, будет иметь необходимую ссылку. Использование подхода, основанного на взаимном перекрытии областей, позволит строить области весьма разнообразной формы. Параметр TARGET употребляется при работе с фреймами. Его назначение — указать имя фрейма, в который будет размещен документ, загружаемый по данной ссылке. Более подробную информацию об использовании этого параметра можно получить из главы, посвященной работе с фреймами. Параметр ALT позволяет записать альтернативный текст для каждой из активных областей изображения. По существу этот текст будет играть лишь роль комментария для создателя документа. Если альтернативный текст, записанный для всего изображения (в тэге <IMG>), служит для выдачи его на экран при работе с отключенной загрузкой изображений, то альтернативный текст для активных областей никогда на экране не появится. Приведем пример задания областей различных типов: <МАР NAME="logo"> <AREA SHAPE=rect COORDS="33,60,191,246" HREF="r.htm" ALT="Прямоугольная область"> <AREA SHAPE=circle COORDS="366,147,109" HREF="c.htm" ALT="Круговая область"> <AREA SHAPE=poly COORDS="534,62,699,62,698,236,626,261,534,235" HREF="p.htm" ALT="Многоугольник"> <AREA SHAPE=default HREF="default.htm"> </MAP> Этот фрагмент кода размещается в HTML-файле. Часто все описания карт-изображений одного документа сводятся вместе и размещаются в начале раздела <BODY> документа. Такой подход близок программистам, которые обычно при написании программ разносят описательную часть программы и исполняемую, что упрощает понимание записанного кода, а иногда и определяется требованиями компилятора. Комбинация клиентского и серверного вариантов Допустимо использование комбинированного варианта, при котором для одного и того же изображения определены оба параметра — USEMAP и ISMAP, что предполагает использование данного изображения в качестве опорного как для клиентского, так и для серверного варианта. Параметр USEMAP является доминирующим. Это означает, что браузер, который поддерживает клиентский вариант, будет использовать USEMAP, игнорируя указания параметра ISMAP. Те браузеры, которые не поддерживают клиентский вариант и не поймут назначение параметра USEMAP, согласно общим правилам HTML проигнорируют его наличие и будут реализовывать серверный вариант, обнаружив присутствие параметра ISMAP. Комбинированный вариант является более надежным, однако требует наличия данных для конфигурации областей для обоих вариантов. В настоящее время необходимость использования комбинированного варианта все более снижается, так как все ведущие браузеры осуществляют поддержку клиентского варианта. Тем не менее, начальные странички компании Netscape, с которыми наверняка сталкивался любой пользователь браузера Netscape, сделаны именно в комбинированном варианте. Приведем пример комбинированного варианта: <А HREF="http://www.anywhere.com/testmap/logo.map"> <IMG SRC="logo.gif" USEMAP="#logo" ISMAP></A> Примечание Параметр USEMAP также является доминирующим по отношению к ссылке, определяемой тэгом <А>. Так, если изображение, используемое для реализации концепции карты-изображения в клиентском варианте, записано внутри области действия тега <А HREF>, то ссылка, определяемая последним тэгом, будет проигнорирована браузерами, поддерживающими клиентский вариант. Пусть, например, имеется следующий фрагмент: <А HREF=NoMaps.htm> <IMG SRC="example.gif" USEMAP="#map" </A>. С одной стороны, все изображение является ссылкой на документ с именем NoMaps.htm. С другой стороны, наличие параметра USEMAP определяет данное изображение как опорное для соответствующей карты-изображения. Ссылка на документ NoMaps.htm будет игнорироваться уже благодаря присутствию параметра USEMAP и вне зависимости от других факторов. Особенности использования карт-изображений Отметим некоторые особенности в использовании карт-изображений в клиентском варианте. Когда пользователь перемещает мышь в пределах изображения, реализующего клиентский вариант, то в строке состояния в нижней части браузера Netscape отображается соответствующий URL-адрес. В серверном варианте URL-адрес не отображается, потому что эта информация размещена на сервере, которая недоступна до тех пор, пока пользователь не щелкнет мышью на изображении. Первый вариант более информативен, поскольку пользователь видит адреса ссылок, а также может определить места изображения без ссылок. В серверном варианте отображаются цифры, являющиеся относительными координатами мыши на изображении и не дающие никакой информации о ссылках и об их наличии. Альтернативные средства навигации Применение карт-изображений стало общепринятым, однако не следует забывать о том, что еще не все пользователи Web могут использовать графику или же хотят работать в режиме отключения загрузки изображений для уменьшения времени передачи файлов. Поэтому нужно предусмотреть для них какие-либо другие, альтернативные средства навигации на странице. В противном случае пользователи вообще не смогут обнаружить на странице и, соответственно, реализовать те ссылки, которые определены только картой-изображением. В качестве альтернативного варианта можно создать отдельный раздел с текстовым описанием ссылок и соответствующих URL-адресов. Можно также создать ссылку на текстовое меню, которое имеет те же самые связи, что и карта-изображение. При любом подходе, какой бы ни был избран, нужно убедиться, что для текстового режима браузера доступны все ссылки. Приведем пример реально существующего документа, в котором решены эти вопросы. На одной из страниц известной фирмы Hewlett-Packard показан фрагмент , в котором есть карта-изображение. В середине страницы располагается перечень десяти различных типов оборудования, для каждого из которых задана ссылка на соответствующий документ. На самом деле на странице располагается картинка, которая является опорным изображением для карты. На этом изображении выделены десять прямоугольных зон, являющимися активными областями. Если загрузить данную страницу при отключенном режиме загрузки изображений, то вы увидите картинку, где вместо карты-изображения присутствует лишь маленькая пиктограмма, показывающая местоположение изображения и. текст, который был задан в качестве альтернативного для всего данного изображения. Очевидно, воспользоваться ссылками здесь не удастся. Для решения этого вопроса ниже изображения располагается обычное текстовое меню, которое полностью повторяет список, приведенный на изображении, с соответствующими ссылками. Поэтому при отключенной загрузке изображений пользователь все же сможет реализовать необходимые переходы по ссылкам, воспользовавшись дублирующим текстовым меню. В случае загрузки изображения текстовое меню лишь дублирует возможности выбора ссылок. Средства создания карт-изображений Создание карт-изображений требует двух шагов: подготовки опорного изображения, на котором впоследствии будут заданы активные области, и разработки файла конфигурации, описывающего геометрические параметры активных областей. Подготовка изображения, которое будет являться основой для карты-изображения, ничем не отличается от работы по подготовке обычных изображений, встраиваемых на Web-страницах. Для этого можно воспользоваться любым графическим редактором или использовать готовое изображение. На втором шаге необходимо отметить активные области на изображении и сопоставить им соответствующие адреса ссылок. Подготовка файла конфигурации является наиболее трудным шагом в создании карт-изображений. В принципе возможен ручной способ задания границ активных областей на изображении. Например, при работе в графическом редакторе можно отмечать отдельные точки, записывать их координаты и затем создавать файл описания геометрических параметров выбранных областей. Однако такой подход крайне неудобен и громоздок. Для автоматизации процесса разметки областей на изображении существует ряд программ, большинство из которых очень похожи друг на друга. Они позволяют создавать и изменять файлы конфигурации, работая непосредственно с изображением на экране. Большинство программ представляют собой отдельные утилиты, работающие автономно и, по существу, являющиеся дополнением к HTML-редакторам. Эти программы позволяют сохранять создаваемый конфигурационный файл либо в буфере обмена Windows, либо в файле на диске. В первом случае типичным вариантом является совместная работа программы редактирования карты-изображения и какого-либо HTML-редактора или обычного текстового редактора. Если же программа позволяет сохранять конфигурационный файл на диске, то она может использоваться полностью автономно. Все программы позволяют размечать на изображении области трех основных типов — rect, circle и poly. Некоторые редакторы поддерживают тип default. Пожалуй, единственным критерием выбора программы редактирования карт-изображений является удобство ее использования, так как по функциональным свойствам все программы очень близки. Если интерфейс программы покажется вам неудобным, можно отказаться от ее использования и выбрать другую. Рассмотрим некоторые из существующих программ. Одной из наиболее простых и известных программ редактирования конфигурационных файлов является утилита MapEdit, разработанная Томасом Бу-теллом (Thomas Boutell). Эта программа существует уже на протяжении нескольких лет и реализована для различных платформ. В частности, имеются версии для Windows 3.x и Windows 95/98/NT. Как и для большинства программ, существовал ряд версий данной утилиты. На текущий момент последней доступной версией для Windows 95/98/NT является версия 2.6 (сентябрь 1999 г.). Информацию о программе можно получить по адресу: http://www.boutell.cora/mapedit/ Программа MapEdit является условно-бесплатной (shareware) и имеет 30-дневный оценочный период, по истечении которого необходима ее регистрация. Программа невелика по размеру — дистрибутив занимает около 300 Кб, и при этом обладает практически всеми необходимыми возможностями. Программа позволяет редактировать конфигурационные файлы как для серверного варианта (в форматах NCSA и CERN), так и для клиентского. Есть возможность визуального создания активных областей в форме прямоугольников, кругов и многоугольников, а также определения адреса ссылки для области по умолчанию. Рассмотрим вкратце основные возможности данной программы. После запуска MapEdit выдается основное окно, содержащее заставку (рис. 6.3) и меню. Имеется возможность редактирования существующих файлов как для серверного, так и для клиентского вариантов карт-изображений. Есть возможность также создания нового файла конфигурации, однако это касается только серверного варианта. Для клиентского варианта необходимо наличие исходного HTML-файла со ссылками на встроенные изображения, которые будут использоваться в качестве опорных для карт-изображений. Примечание Невозможность создания нового HTML-файла с помощью программы MapEdit можно легко обойти. Для этого следует запустить программу в режиме создания файла в одном из форматов серверного варианта (NCSA и CERN), выполнить все необходимые действия, а затем сохранить полученные результаты в режиме Save as, указав при этом формат Client Side Map. Будет создан HTML-файл, который в дальнейшем можно использовать в качестве готового фрагмента HTML-документа. Пусть нам необходимо создать новый конфигурационный файл для серверного варианта карт-изображений. Выберем пункт Open/Create Map из меню File. Появится диалоговое окно (рис. 6.4), в котором следует задать имя создаваемого файла конфигурации (например, Blazons.map), указать существующий файл с изображением и формат создаваемого файла (NCSA или CERN). Файл изображения может иметь формат GIF, JPG или PNG. 
Рис. 6.3. Заставка MapEdit 
Рис. 6.4. Диалоговое окно Open/Create Map для создания конфигурационного файла Примечание Многие из программ интерпретации файлов конфигурации для серверного варианта требуют, чтобы файл имел расширение MAP. Можно рекомендовать всегда придерживаться этого правила. Программа загрузит выбранный файл с изображением, на котором можно будет произвести разметку активных областей (рис. 6.5). Для этого нужно выбрать форму активной области — прямоугольник, круг или прямоугольник путем нажатия соответствующей пиктограммы или выбора нужного пункта из меню Tools (рис. 6.6). Дальнейшие действия производятся непосредственно на изображении путем отметки точек мышью. Для прямоугольной области отмечают левый верхний и правый нижний углы, для круговой области — центр и одну из точек на окружности, для многоугольника задаются его вершины. Для примера на рис. 6.5 показан случай, когда на изображении уже размечены три активных области различной формы. Заметим, что линии, ограничивающие активные области, служат лишь для их визуализации при работе в редакторе и никак не изменяют файл с изображением. Изображение в данном примере по существу содержит три отдельных картинки (изображены гербы городов Санкт-Петербург Томск и Якутск), что обычно не характерно для реалистических изображений. Однако для изображений, содержащих, например, набор кнопок управления, такая ситуация довольно типична. 
Рис. 6.5. Изображение с размеченными активными областями различного типа 
Рис. 6.6. Меню Tools 
Рис. 6.7. Диалоговое окно Object URL для задания URL-адреса и необязательного комментария После разметки любой из областей следует задать адрес ссылки, соответствующий данной области, а также комментирующую информацию (рис. 6.7). Можно задать адрес ссылки для области по умолчанию, который будет peaлизовываться для части области изображения, не входящей ни в одну из активных областей (рис. 6.8). После разметки областей можно визуально проконтролировать или изменить созданные активные области, воспользовавшись пунктом Test меню Edit. Последним шагом работы является сохранение результатов в виде файла конфигурации (пункт Save меню File). Можно также использовать пункт Save As, в котором задать требуемый формат сохранения файла (рис. 6.9). 
Рис. 6.8. Диалоговое окно Default URL для задания URL-адреса для области по умолчанию 
Рис. 6.9. Диалоговое окно команды Save As Примечание Старые версии редактора MapEdit содержали небольшую ошибку, связанную с заданием формата сохраняемого файла конфигурации. Если при создании файла был указан формат CERN, то при сохранении данных в режиме Save файл все равно будет сохранен в формате NCSA. Создать файл формата CERN удается только при использовании режима Save as с указанием требуемого формата. Для рассматриваемого примера будет создан файл с именем Blazons.map, содержащий следующую информацию (формат NCSA): #Герб города Томск rect www.ifmo.ru/sergeev/tomsk.htm 35,58 187,244 #Герб города Якутск circle www.ifmo.ru/sergeev/jakutsk.htm 364,150 468,150 #Герб города Санкт-Петербург poly www.ifmo.ru/sergeev/Spb.htm 537,61 700,61 700,230 618,256 537,231 Те же данные, сохраненные редактором в формате CERN, будут выглядеть следующим образом: rect (35,58) (187,244) www.ifmo.ru/sergeev/tomsk.htm circle (364,150) 104 www.ifmo.ru/sergeev/jakutsk.htm poly (537,61) (700,61) (700,230) (618,256) (537,231) www.ifmo.ru/sergeev/Spb.htm Заметим, что комментарии в данном формате не допускаются, поэтому при сохранении файла эта информация будет утрачена. Рассмотрим задачу создания клиентского варианта карты-изображения. Для решения этой задачи необходимо наличие исходного HTML-файла, содержащего хотя бы одно встроенное изображение. Данный исходный файл может быть создан заранее любым текстовым редактором или специальным HTML-редактором. Пусть имеется файл с именем CSIM.HTM, содержащий следующий код: <HTML> <HEAD> </HEAD> <BODY> <IMG SRC=Blazons.gif> </BODY> </HTML> Этот файл следует открыть в редакторе MapEdit (рис. 6.10). В отличие от варианта, в котором выполнялось создание конфигурационного файла, здесь не требуется указание имени файла с изображением в пункте меню Open/Create Map. 
Рис. 6.10. Диалоговое окно Open/Create Map для открытия существующего HTML-файла 
Рис. 6.11. Диалоговое окно Select Inline Image Редактор после открытия исходного HTML-файла выдаст диалоговое окно с перечнем всех встроенных изображений, из которого необходимо выбрать нужное (рис. 6.11). Конечно, файл с выбранным изображением должен существовать. Дальнейшая работа по разметке активных областей полностью идентична предыдущему случаю. После сохранения результатов разметки исходный файл будет изменен, и для приведенного примера будет иметь следующий вид: <HTML> <HEAD> </HEAD> <BODY> <IMG SRC="Blazons.gif" usemap="#Blazons"> <map name="Blazons"> <area shape="rect" alt='Герб города Томск" coords="35,58,187,244" href="tomsk.htm"> <area shape="circle" alt='Герб города Якутск" coords="364,150,104" href="jakutsk.htm"> <area shape="poly" alt='Герб города Санкт-Петербург" coords="537,61,700,61, 700, 230, 618, 256, 537,231" href="Spb.htm"> <area shape="default" nohref> </map> </BODY> </HTML> Обратите внимание, что редактор автоматически присваивает имя для описания карты-изображения, которое совпадает с именем файла опорного изображения. Для данного примера файл с изображением имел имя Blazons.gif, поэтому параметру name тега <тар> было присвоено значение "Blazons". Примечание Редактор MapEdit не совсем корректно работает с символами русского алфавита. Часть русских букв при сохранении файла исчезают и на их месте оказываются пробелы. Самым простым выходом из этой ситуации является добавление русского текста после завершения работы в редакторе. Еще одной утилитой создания и редактирования конфигурационных файлов карт-изображений является программа Map THIS!, информацию о которой можно получить по адресу: http://galadriel.ecaetc.ohio-state.edu/tc/mt/. Работа с данной программой по идеологии схожа с программой MapEdit. Основой работы с программой является визуальное конструирование активных областей с дальнейшим сохранением результатов в файле в одном из выбранных форматов. Редактор поддерживает оба формата серверного варианта карт-изображений (NCSA и CERN) и клиентский вариант. Изображения могут загружаться из файлов в форматах GIF и JPG. Приведем примеры файлов конфигурации, созданных данной программой. Для примера, приведенного в предыдущем разделе, файл, сохраненный в формате NCSA, будет иметь следующий вид: #$MTIMFH #$-:Image Map file created by Map THIS! #$-:Map THIS! free image map editor by Todd C. Wilson #$-:Please do not edit lines starting with "#$" #$VERSION:1.30 #$TITLE: Blazons #$DESCRIPTION:Серверный вариант карты-изображения #$AUTHOR:Сергеев #$DATE:Tue Sep 14 12:10:42 1999 #$PATH:С:\Program Files\Mapthis\ #$GIF:Blazons.gif #$FORMAT:ncsa #$EOH default default.htm # Герб города Томск rect Tomsk.htm 33,60 191,246 # Герб города Якутск circle Jakutsk.htm 366,147 366,256 # Герб города Санкт-Петербург poly Spb.htm 534,62 699,62 698,236 626,261 534,235 534,62 В отличие от программы MapEdit, данный редактор записывает в выходной файл довольно много комментирующей информации, включающей краткие сведения о самой программе, дате создания файла и др. При этом после символа #, означающего начало строки комментария, редактор добавляет символ $ для строк-комментариев, создаваемых самим редактором. Обратите внимание на четвертую строчку приведенного кода, в которой содержится просьба не редактировать комментарии, вставленные редактором. Тот же пример, сохраненный в формате CERN, будет иметь вид: rect (4096,4096) (4096,4096) mt:#$MTIMFH rect (4096,4096) (4096,4096) mt:#$-:Image Map file created by Map THIS! rect (4096,4096) (4096,4096) mt:#$-:Map THIS! free image map editor by Todd C. Wilson rect (4096,4096) (4096,4096) mt:#$-:Please do not edit lines starting with "#$" rect (4096,4096) (4096,4096) mt:#$VERSION:1.30 rect (4096,4096) (4096,4096) mt:#$TITLE: Blazons rect (4096,4096) (4096,4096) mt:#$DESCRIPTION: Серверный вариант карты-изображения rect (4096,4096) (4096,4096) mt:#$AUTHOR:Сергеев rect (4096,4096) (4096,4096) mt:#$DATE:Tue Sep 14 12:10:42 1999 rect (4096,4096) (4096,4096) mt:#$PATH:С:\Program Files\Mapthis\ rect (4096,4096) (4096,4096) mt:#$GIF:Blazons.gif rect (4096,4096) (4096,4096) mt:#$FORMAT:cern rect (4096,4096) (4096,4096) mt:#$EOH default default.htm rect (4096,4096) (4096,4096) mt:# Герб города Томск rectangle (33,60) (191,246) Tomsk.htm rect (4096,4096) (4096,4096) mt:# Герб города Якутск circ (366,147) 109 Jakutsk.htm rect (4096,4096) (4096,4096) mt:# Герб города Санкт-Петербург polygon (534,62) (699,62) (698,236) (626,261) (534,235) (534,62) Spb.htm Как видно из приведенного выше кода, редактор использует несколько искусственный прием для сохранения комментариев, как введенных пользователем, так и генерируемых самой программой. Напомним, что формат CERN не позволяет задавать строки комментариев, поэтому редактор создает строку вида rect (4096,4096) (4096,4096), в конце которой можно расположить любой текст. В сущности, такая строка описывает прямоугольник, который заведомо располагается за пределами экрана, поэтому его наличие не играет роли. Конечно, при этом текст конфигурационного файла становится гораздо более громоздким и неудобным для чтения, что, правда, не мешает работе программ. Этот прием сохранения комментариев может быть взят на вооружение. Тот же пример, сохраненный в виде HTML-файла (для клиентского варианта карт-изображений) будет иметь вид: <BODY> <МАР NAME="Blazons"> <!-- #$-:Image Map file created by Map THIS! --> <!-- #$-:Map THIS! free image map editor by Todd C. Wilson --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- AVERSION: 1.30 --> <!-- #$DESCRIPTION:Клиентский вариант карты-изображения --> <!-- #$AUTHOR:Сергеев --> <!-- #$DATE:Tue Sep 14 12:10:42 1999 --> <!-- #$PATH:С: \Program Files\Mapthis\ --> <!-- #$GIF:Blazons.gif --> <AREA SHAPE=RECT COORDS="33,60,191,246" HREF="Tomsk.htm" ALT='Герб города Томск"> <AREA SHAPE=CIRCLE COORDS="366,147,109" HREF="Jakutsk.htm" ALT="Герб города Якутск"> <AREA SHAPE=POLY COORDS="534, 62,699,62,698,236,626,261,534,235,534,62" HREF="Spb.htm" ALT='Герб города Санкт-Петербург"> <AREA SHAPE=default HREF="default.htm"> </MAP> </BODY> Здесь, в отличие от программы MapEdit, имя карты-изображения необходимо задавать вручную, поэтому оно может и не совпадать с именем файла с опорным изображением. Программа-редактор конфигурационных файлов CrossEye, созданная известной австралийской компанией Sausage Software. Эта программа будет встречена с радостью поклонниками популярного HTML-редактора HotDog, поскольку она создана той же компанией и имеет весьма привлекательный, выполненный с юмором, интерфейс. Информация о пакете CrossEye может быть получена по адресу: http://www.sausage.com.au. Отличительными особенностями программы является довольно большой размер дистрибутива (около 2,5 Мб), а также небольшой период времени (14 дней), в течение которого можно ее эксплуатировать в режиме оценки. Большой размер программ характерен для всего программного обеспечения, создаваемого компанией Sausage Software, что, видимо, обусловлено выбором инструментария, используемым для разработки (Visual Basic). К сожалению, программа не обладает рядом необходимых свойств. Например, отсутствует возможность чтения существующего HTML-файла, поэтому невозможно отредактировать уже имеющуюся карту-изображение, которая была создана ранее. Также невозможно выполнить сохранение результатов работы непосредственно в HTML-файле. Сохранение результатов возможно лишь в файле со специальным расширением EYE, который имеет двоичный вид и может использоваться в дальнейшем только в этом редакторе. Сгенерированный HTML-код записывается в буфер обмена Windows, откуда он может быть скопирован в любой текстовый редактор. Как и во всех редакторах, описанных выше, создание и редактирование активных областей осуществляется непосредственно на изображении, однако загрузка изображения осуществляется в окно, размеры которого по непонятным причинам невозможно изменить. Если изображение больше размеров окна, то для просмотра изображения можно использовать прокрутку, но задать активную область, выходящую за пределы окна просмотра, становится невозможно. Для клиентского варианта карты-изображения редактор вообще не предлагает задать URL-адрес для области по умолчанию. Возможно, это сделано специально, так как не все браузеры поддерживают тип области default. Тем не менее, редакторы, описанные выше, эту проблему решают весьма изящно, автоматически заменяя область по умолчанию на прямоугольную область с размерами, равными размерам изображения. Недостатки в некотором смысле компенсируются отдельными дополнительными свойствами редактора. В частности, можно узнать, что попугая, который виден в правом верхнем углу приведенного рисунка, зовут Полли. Он весьма разговорчив, и пользователи, работающие на компьютере, оснащенном звуковой картой, время от времени будут слышать возгласы попугая, которые, правда, никак не связаны с выполняемыми действиями. А в одном из диалоговых окон настройки редактора есть даже специальный пункт, позволяющий заткнуть рот бедному попугаю. Вот пример сервиса высшего разряда. Видимо, благодаря перечисленным свойствам, рейтинг этого редактора по оценкам http://www.tucows.com, весьма высок, чего нельзя сказать о двух описанных выше программах. В конечном итоге выбор редактора для создания карт-изображений остается за пользователем. ← к предыдущей главе
|
|
|||||
 Обратная@связь | ||||||
