Карта-изображения в HTML. Рисуем карту изображения мышкой Навигационная карта в html

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

Даже начинающий пользователь, побродив по просторам Интернета, вскоре столкнется с картой-изображением. На рис. 6.1 показана Web-страница одной из крупнейших компьютерных фирм России. Основное меню на этой странице представляет собой карту-изображение с соответствующими ссылками.

Запуск известного поискового сервера Yahoo! также приводит к появлению страницы, содержащей карту-изображение. Самая верхняя часть изображения, приведенного на рисунке, содержит четыре кнопки, между которыми написано слово "Yahoo!". Курсор на рисунке показывает на первую из этих кнопок, причем форма курсора дает понять, что последний указывает на ссылку, адрес которой виден в строке статуса браузера. Ссылки, реализующиеся по этим кнопкам, и сделаны по технологии карт-изображений.

Однако не следует считать, что карты-изображения должны использоваться всюду, где требуется организовать переходы по ссылкам. Нужно обдумать, имеет ли смысл применение карт-изображений в том или ином случае, взвесив все "за" и "против". В данной главе содержатся все необходимые сведения, касающиеся использования карт-изображений.

В этой главе вы узнаете:

• Что такое карта-изображение, и как она работает
• Как создать файл конфигурации карты-изображения
• Как создать ссылки в HTML-документе, используя карту-изображение

Рис. 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-страницах, а именно, значительное увеличение времени загрузки по сравнению с чисто текстовыми документами.
• Неудачно спроектированные изображения могут внести путаницу. Иногда бывает трудно определить области, являющиеся активными на изображении. Особенно это трудно сделать в серверном варианте. При реализации клиентского варианта ситуация упрощается, так как есть возможность перемещать мышь в пределах изображения и следить за появляющимися адресами ссылок в нижней части окна браузера.
• При использовании карт-изображений браузер не имеет возможности отмечать другим цветом уже пройденные ссылки так, как это делается для текстовых ссылок.

Серверный вариант реализации карт-изображений

Использование на Web-страницах карт-изображений оказывается несколько более сложным делом, чем простое встраивание интересных графических изображений и связывание с ними ссылок. Для реализации серверного варианта карты-изображения необходимо, чтобы HTML-документ был размещен на сервере. Также требуется, чтобы на сервере была сконфигурирована поддержка CGI-сценариев (Common Gateway Interface, Общий интерфейс шлюза), которые выполняют обработку запросов, поступающих от браузера при работе с картой-изображением. Для каждой карты-изображения на сервере должен быть размещен файл, описывающий конфигурацию активных областей. При щелчке мышью в пределах изображения координаты места щелчка передаются браузером серверу, который обращается к конфигурационному файлу, являющемуся, по существу, поисковой таблицей активных областей. Результат поиска возвращается браузеру в виде URL-адреса или сообщения об отсутствии найденных активных областей, соответствующих указанному месту изображения.

Для обеспечения функционирования карты-изображения необходимо указать, что данное изображение является опорным для карты. Это выполняется заданием параметра ISMAP в тэге . Кроме того, карту-изображение необходимо сделать ссылкой на Web-странице, во многом подобно тому, как это делалось при использовании всего изображения в качестве отдельной ссылки.

Напомним, что встроенные изображения могут использоваться как гипертекстовые ссылки, если они включены в тег <А>. Например, чтобы сделать изображение с именем Myimage.gif графическим указателем ссылки на документ в том же самом каталоге с именем exampie.html, следует записать:

<А HREF=example.html >

Этот HTML-код сообщает серверу, что при щелчке на изображении Mylmage.gif браузеру должен быть возвращен Документ С именем example.html.

Параметр ISMAP, добавленный к тэгу для приведенного примера, активизирует карту-изображение. Ссылка в этом случае выполняется не к определенному документу, а к файлу конфигурации карты-изображения, содержащему координаты всех активных областей изображения. Файл конфигурации, обычно имеющий расширение MAP, анализируется CGI-программой на сервере вкупе с координатами точки щелчка на изображении. Тогда вместо приведенной строки следует записать:

<А HREF=MyImage.map>< IMG SRC=MyImage.gif ISMAP>< /A>

Ссылка в этом примере представляет собой не адрес другого HTML-документа, а файл конфигурации карты-изображения, который содержит координаты для каждой активной области изображения с именем Myimage.gif.

Примечание

Порядок расположения параметров тега произволен, однако, параметр ISMAP обычно помещают последним.

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

Совет

Для каждой карты-изображения необходим отдельный файл конфигурации. Примите за правило сохранять файл конфигурации в том же самом каталоге и с тем же именем, что и связанное с ним изображение. Например: main_menu.gif и main menu.map.

Существуют два формата файлов конфигурации карт-изображений, разработанные в CERN и NCSA и носящие названия этих организаций. Оба этих формата содержат одинаковую информацию, но по-разному ее представляют. В обоих случаях используются одни и те же типы областей, о которых речь пойдет ниже. При разработке карт-изображений для использования на конкретном сервере необходимо получить у администратора системы сведения о принятом на данном сервере способе поддержки карт-изображений.

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

Для каждой области в файле конфигурации записывается URL-адрес, который будет возвращен пользователю, когда произойдет щелчок внутри данной области. Этот адрес может быть написан как в относительной, так и в абсолютной форме. Нужно учесть, что относительный URL-адрес должен быть определен по отношению к расположению файла конфигурации, а не файла изображения. Список активных областей в файле конфигурации читается, начиная с первой строки. Если две области перекрываются, то реализуется та ссылка, описание области действия которой встретится первым в файле конфигурации.

Совет

В файле конфигурации рекомендуется всегда задавать ссылку по умолчанию. Заданная по умолчанию связь будет реализовываться для областей изображения, не относящихся к активным. В простейшем случае URL-адрес, являющийся ссылкой по умолчанию, может просто указывать на страницу с полезной информацией об использовании данной карты.

Формат CERN

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

Национальный центр суперкомпьютерных приложений 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 тега . Значением параметра USEMAP является ссылка на описание конфигурации карты.

Примечание

Браузер Netscape не допускает использование отдельного файла для описания конфигурации карты.

Например:

В этом примере изображение, хранящееся в файле с именем l ogo.gif, является опорным для карты-изображения, реализуемой в клиентском варианте.

Описание конфигурации активных областей должно располагаться в том же файле, что и данная строка HTML-кода, и иметь для данного примера имя logo.

Тэг <МАР>

Для описания конфигурации областей карты-изображения используется специальный тег <МАР>, единственным параметром которого является NAME. Значение параметра NAME определяет имя, которое должно соответствовать имени в USEMAP. Тег <МАР> требует закрывающего тега . Внутри этой пары тегов должны располагаться описания активных областей карты, для чего используется специальный тег .

Тэг

Каждый отдельный тег задает одну активную область. Завершающий тег не требуется. Активные области могут перекрываться. В случае если некоторая точка относится одновременно к нескольким активным областям, то будет реализована та ссылка, описание которой располагается первым в списке областей.

Параметрами тега являются SHAPE, COORDS, HREF, NOHREF, TARGET, и ALT. Рассмотрим назначение этих параметров.

Параметр SHAPE

Параметр SHAPE определяет форму активной области. Допустимыми значениями являются rect, circle, poly, default. Эти значения задают области в виде прямоугольника, круга, многоугольника. Последнее значение - default - определяет все точки области. Если параметр SHAPE опущен, то по умолчанию предполагается значение rect, т. е. область в виде прямоугольника.

Предупреждение

Не следует путать область типа default, которая описывает все точки изображения, и значение параметра SHAPE по умолчанию, которым является rect.

Примечание

В отличие от серверного варианта, где область типа default определяла все точки на изображении, которые не относятся к какой-либо активной области, для клиентского варианта область типа default определяет вообще все точки изображения. Поэтому в данном случае описание области default должно располагаться последним в списке активных областей. Если, например, описание области default поставить первым, то всегда для клиентского варианта будет реализовываться ссылка, определяемая данной областью, а все остальные ссылки будут игнорироваться (именно так реализован данный тип области в Netscape). Для серверного варианта расположение описания области default не имеет значения. Это различие учитывается в примерах, приводимых в конце главы.

Совет

Отметим также, что не все браузеры поддерживают тип области default. В частности, Microsoft Internet Explorer вообще не разрешает использовать данный тип области. Поэтому вместо области типа default можно рекомендовать задание прямоугольной области с размерами, равными размерам всего изображения. Естественно, что такая область должна описываться последней. Именно так поступают некоторые программы редактирования карт-изображений, которые будут рассматриваться ниже.

Параметр COORDS

Параметр COORDS задает координаты отдельной активной области. Значением параметра является список координат точек, определяющих активную область, разделенных запятыми. Координаты записываются в виде целых неотрицательных чисел. Начало координат располагается в верхнем левом углу изображения, которому соответствует значение 0,0. Первое число определяет координату по горизонтали, второе - по вертикали. Список координат зависит от типа области.

Для области типа rect задаются координаты верхнего левого и правого нижнего углов прямоугольника.

Для области типа circle задаются три числа - координаты центра круга и радиус.

Для области типа poly задаются координаты вершин многоугольника в нужном порядке. Заметим, что последняя точка в списке координат не обязательно должна совпадать с первой. Если они не совпадают, то при интерпретации данных для этой формы области браузер автоматически соединит последнюю точку с первой. Различные редакторы карт-изображений в этом отношении работают по-разному - одни добавляют первую точку в конец списка, а другие - нет. Количественные ограничения на число вершин довольно велики и покрывают практически все мыслимые потребности. По крайней мере многоугольник, имеющий 100 вершин, уверенно обрабатывается всеми ведущими браузерами. Есть ограничение, связанное с самим языком HTML, согласно которому список не может содержать более 1024 значений. Многоугольник вполне может быть невыпуклым.

Область типа default не требует задания координат.

Параметры HREF и NOHREF

Параметры HREF и NOHREF являются взаимоисключающими. Если не задан ни один из этих параметров, то считается, что для данной области не имеется ссылки. То же самое явно определяет параметр NOHREF, не требующий значения. Параметр HREF определяет адрес ссылки, который может записываться в абсолютной или относительной форме. Правила записи полностью совпадают с правилами записи ссылок в тэге <А>.

Параметр NOHREF полезно использовать для исключения части активной области. Пусть, например, необходимо создать активную область в виде кольца. Такой тип области не предусмотрен в списке возможных областей, однако он может быть реализован путем задания двух круговых областей. Для этого сначала следует задать область меньшего радиуса и указать в качестве параметра NOHREF. Далее нужно задать область большего радиуса с центром в той же точке и указать нужную ссылку. Тогда область внутри кольца, определенная двумя окружностями различного радиуса, будет иметь необходимую ссылку. Использование подхода, основанного на взаимном перекрытии областей, позволит строить области весьма разнообразной формы.

Параметр TARGET

Параметр TARGET употребляется при работе с фреймами. Его назначение - указать имя фрейма, в который будет размещен документ, загружаемый по данной ссылке. Более подробную информацию об использовании этого параметра можно получить из главы, посвященной работе с фреймами.

Параметр ALT

Параметр ALT позволяет записать альтернативный текст для каждой из активных областей изображения. По существу этот текст будет играть лишь роль комментария для создателя документа. Если альтернативный текст, записанный для всего изображения (в тэге ), служит для выдачи его на экран при работе с отключенной загрузкой изображений, то альтернативный текст для активных областей никогда на экране не появится.

Приведем пример задания областей различных типов:

<МАР NAME="logo">

HREF="p.htm" ALT="Многоугольник">

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

Комбинация клиентского и серверного вариантов

Допустимо использование комбинированного варианта, при котором для одного и того же изображения определены оба параметра - USEMAP и ISMAP, что предполагает использование данного изображения в качестве опорного как для клиентского, так и для серверного варианта. Параметр USEMAP является доминирующим. Это означает, что браузер, который поддерживает клиентский вариант, будет использовать USEMAP, игнорируя указания параметра ISMAP. Те браузеры, которые не поддерживают клиентский вариант и не поймут назначение параметра USEMAP, согласно общим правилам HTML проигнорируют его наличие и будут реализовывать серверный вариант, обнаружив присутствие параметра ISMAP. Комбинированный вариант является более надежным, однако требует наличия данных для конфигурации областей для обоих вариантов. В настоящее время необходимость использования комбинированного варианта все более снижается, так как все ведущие браузеры осуществляют поддержку клиентского варианта. Тем не менее, начальные странички компании Netscape, с которыми наверняка сталкивался любой пользователь браузера Netscape, сделаны именно в комбинированном варианте.

Приведем пример комбинированного варианта:

<А HREF="http://www.anywhere.com/testmap/logo.map">

Примечание

Параметр USEMAP также является доминирующим по отношению к ссылке, определяемой тэгом <А>. Так, если изображение, используемое для реализации концепции карты-изображения в клиентском варианте, записано внутри области действия тега <А HREF>, то ссылка, определяемая последним тэгом, будет проигнорирована браузерами, поддерживающими клиентский вариант. Пусть, например, имеется следующий фрагмент:

<А HREF=NoMaps.htm> .

С одной стороны, все изображение является ссылкой на документ с именем NoMaps.htm. С другой стороны, наличие параметра USEMAP определяет данное изображение как опорное для соответствующей карты-изображения. Ссылка на документ NoMaps.htm будет игнорироваться уже благодаря присутствию параметра USEMAP и вне зависимости от других факторов.

Особенности использования карт-изображений

Отметим некоторые особенности в использовании карт-изображений в клиентском варианте. Когда пользователь перемещает мышь в пределах изображения, реализующего клиентский вариант, то в строке состояния в нижней части браузера Netscape отображается соответствующий URL-адрес. В серверном варианте URL-адрес не отображается, потому что эта информация размещена на сервере, которая недоступна до тех пор, пока пользователь не щелкнет мышью на изображении. Первый вариант более информативен, поскольку пользователь видит адреса ссылок, а также может определить места изображения без ссылок. В серверном варианте отображаются цифры, являющиеся относительными координатами мыши на изображении и не дающие никакой информации о ссылках и об их наличии.

Альтернативные средства навигации

Применение карт-изображений стало общепринятым, однако не следует забывать о том, что еще не все пользователи Web могут использовать графику или же хотят работать в режиме отключения загрузки изображений для уменьшения времени передачи файлов. Поэтому нужно предусмотреть для них какие-либо другие, альтернативные средства навигации на странице. В противном случае пользователи вообще не смогут обнаружить на странице и, соответственно, реализовать те ссылки, которые определены только картой-изображением.

В качестве альтернативного варианта можно создать отдельный раздел с текстовым описанием ссылок и соответствующих URL-адресов. Можно также создать ссылку на текстовое меню, которое имеет те же самые связи, что и карта-изображение. При любом подходе, какой бы ни был избран, нужно убедиться, что для текстового режима браузера доступны все ссылки.

Приведем пример реально существующего документа, в котором решены эти вопросы. На одной из страниц известной фирмы Hewlett-Packardпоказан фрагмент, в котором есть карта-изображение. В середине страницы располагается перечень десяти различных типов оборудования, для каждого из которых задана ссылка на соответствующий документ. На самом деле на странице располагается картинка, которая является опорным изображением для карты. На этом изображении выделены десять прямоугольных зон, являющимися активными областями.

Если загрузить данную страницу при отключенном режиме загрузки изображений, то вы увидите картинку, где вместо карты-изображения присутствует лишь маленькая пиктограмма, показывающая местоположение изображения и. текст, который был задан в качестве альтернативного для всего данного изображения. Очевидно, воспользоваться ссылками здесь не удастся. Для решения этого вопроса ниже изображения располагается обычное текстовое меню, которое полностью повторяет список, приведенный на изображении, с соответствующими ссылками. Поэтому при отключенной загрузке изображений пользователь все же сможет реализовать необходимые переходы по ссылкам, воспользовавшись дублирующим текстовым меню. В случае загрузки изображения текстовое меню лишь дублирует возможности выбора ссылок.

Средства создания карт-изображений

Создание карт-изображений требует двух шагов: подготовки опорного изображения, на котором впоследствии будут заданы активные области, и разработки файла конфигурации, описывающего геометрические параметры активных областей. Подготовка изображения, которое будет являться основой для карты-изображения, ничем не отличается от работы по подготовке обычных изображений, встраиваемых на Web-страницах. Для этого можно воспользоваться любым графическим редактором или использовать готовое изображение.

На втором шаге необходимо отметить активные области на изображении и сопоставить им соответствующие адреса ссылок. Подготовка файла конфигурации является наиболее трудным шагом в создании карт-изображений. В принципе возможен ручной способ задания границ активных областей на изображении. Например, при работе в графическом редакторе можно отмечать отдельные точки, записывать их координаты и затем создавать файл описания геометрических параметров выбранных областей. Однако такой подход крайне неудобен и громоздок.

Для автоматизации процесса разметки областей на изображении существует ряд программ, большинство из которых очень похожи друг на друга. Они позволяют создавать и изменять файлы конфигурации, работая непосредственно с изображением на экране. Большинство программ представляют собой отдельные утилиты, работающие автономно и, по существу, являющиеся дополнением к HTML-редакторам. Эти программы позволяют сохранять создаваемый конфигурационный файл либо в буфере обмена Windows, либо в файле на диске. В первом случае типичным вариантом является совместная работа программы редактирования карты-изображения и какого-либо HTML-редактора или обычного текстового редактора. Если же программа позволяет сохранять конфигурационный файл на диске, то она может использоваться полностью автономно. Все программы позволяют размечать на изображении области трех основных типов - rect, circle и poly. Некоторые редакторы поддерживают тип default. Пожалуй, единственным критерием выбора программы редактирования карт-изображений является удобство ее использования, так как по функциональным свойствам все программы очень близки. Если интерфейс программы покажется вам неудобным, можно отказаться от ее использования и выбрать другую.

Рассмотрим некоторые из существующих программ.

Программа MapEdit

Одной из наиболее простых и известных программ редактирования конфигурационных файлов является утилита 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, содержащий следующий код:

Этот файл следует открыть в редакторе MapEdit (рис. 6.10 ). В отличие от варианта, в котором выполнялось создание конфигурационного файла, здесь не требуется указание имени файла с изображением в пункте меню Open/Create Map.

Рис. 6.10 . Диалоговое окно Open/Create Map для открытия существующего HTML-файла

Рис. 6.11 . Диалоговое окно Select Inline Image

Редактор после открытия исходного HTML-файла выдаст диалоговое окно с перечнем всех встроенных изображений, из которого необходимо выбрать нужное (рис. 6.11 ). Конечно, файл с выбранным изображением должен существовать.

Дальнейшая работа по разметке активных областей полностью идентична предыдущему случаю. После сохранения результатов разметки исходный файл будет изменен, и для приведенного примера будет иметь следующий вид:

href="tomsk.htm">

href="jakutsk.htm">

coords="537,61,700,61, 700, 230, 618, 256, 537,231" href="Spb.htm">

Обратите внимание, что редактор автоматически присваивает имя для описания карты-изображения, которое совпадает с именем файла опорного изображения. Для данного примера файл с изображением имел имя Blazons.gif, поэтому параметру name тега <тар> было присвоено значение "Blazons".

Примечание

Редактор MapEdit не совсем корректно работает с символами русского алфавита. Часть русских букв при сохранении файла исчезают и на их месте оказываются пробелы. Самым простым выходом из этой ситуации является добавление русского текста после завершения работы в редакторе.

Программа Map THIS!

Еще одной утилитой создания и редактирования конфигурационных файлов карт-изображений является программа 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:Серверный вариант карты-изображения

#$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:#$

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-файла (для клиентского варианта карт-изображений) будет иметь вид:

<МАР NAME="Blazons">

ALT="Герб города Томск">

ALT="Герб города Якутск">

HREF="Spb.htm" ALT="Герб города Санкт-Петербург">

Здесь, в отличие от программы MapEdit, имя карты-изображения необходимо задавать вручную, поэтому оно может и не совпадать с именем файла с опорным изображением.

Программа CrossEye

Программа-редактор конфигурационных файлов 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 , весьма высок, чего нельзя сказать о двух описанных выше программах.

В конечном итоге выбор редактора для создания карт-изображений остается за пользователем.

В этой статье мы с Вами рассмотрим как составить клиентскую изображение-карту, при клике на определенную область которой, мы сможем перейти по определенной ссылке. Составление изображений-карт можно редко встретить на сайтах, так как этот процесс довольно-таки трудоемкий, но если вы хотите удивить ваших посетителей необычной формой для ссылок и у вас есть в распоряжении свободное время для самообразования, то эта статья для вас.

Тег

Атрибут name элемента

Атрибутами тега мы указываем как координаты области (атрибут coords ), так и тип необходимой нам фигуры (атрибут shape ):

Пример использования

Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):

Выбери фигуру:

"Доступны 4 фигуры для выбора" >

И так по порядку, что мы сделали в этом примере:

• Разместили изображение (тег ), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе
• Размещаем изображение-карту (тег
• Размещаем четыре тега , которые определяют интерактивные области в изображении-карте:
  • Первой мы задаем прямоугольную область (атрибут shape со значением "rect" ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
  • Второй указываем круглую область (атрибут shape со значением "circle" ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x , а второе по оси y , третее определяет радиус ).
  • Что касается третей и четвертой фигуры , то они составлены по принципу многоугольной области (атрибут shape со значением "poly" ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).

Обращаю Ваше внимание на то, что если у тега Практическое задание № 26.

Нюанс : для чистоты практического задания предлагаю в качестве первой точки использовать вершину звезды и двигаться по часовой стрелке. В качестве значения атрибута href я указал # в этом случае она выступает как заглушка (вы остаетесь на той же странице), вы можете сделать переход на любую страницу.

Подсказка : чтобы получить координаты изображения воспользуйтесь редактором изображений, даже самый простой редактор, например, Paint , отображет координаты курсора. Выпишите координаты на листок или в отдельный файл и внесите значения на страницу.

Если у Вас возникнут трудности с выполнением задания, то проинспектируйте код страницы, открыв пример в отдельном окне и внимательно его изучите.

Влад Мержевич

Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение.

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

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

Пример 1. Использование карты-изображения

Для указания браузеру, что изображение является картой, применяется атрибут usemap . Он является ссылкой на описание конфигурации карты, которая задается тегом

Атрибуты тега AREA

shape

Определяет форму активной области. Форма может быть в виде окружности (circle ), прямоугольника (rect ), полигона (poly ).

alt

Добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится.

coords

Задает координаты активной области. Координаты отсчитываются в пикселах от левого верхнего угла изображения, которому соответствует значение 0,0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.

Для окружности задаются три числа — координаты центра круга и радиус.

Для прямоугольника — координаты левого верхнего и правого нижнего угла.

Для полигона задаются координаты его вершин (рис. 2).

Рис. 2. Координатные точки для полигона

href

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

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

1. Карты позволяют задать любую форму области ссылки. Учитывая, что изображения по своей природе прямоугольны, сделать графическую ссылку сложной формы, например для указания географического района, без карт-изображений не представляется возможным. Как правило, в географической тематике карты-изображения и применяются наиболее часто.

2. С одним файлом удобней работать — не приходится заботиться о состыковке отдельных фрагментов и рисунок легко можно поместить в нужное место.

Недостатки

1. Нельзя установить всплывающую подсказку и альтернативный текст для отдельных областей. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Для карт-изображений эта особенность является актуальной, ведь если отключить просмотр изображений, что делают многие пользователи, то в итоге увидим лишь один пустой прямоугольник.

2. При сложной форме области ссылки увеличивается объем кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико. Справедливости ради, следует отметить, что сложные формы являются частным случаем и применяются достаточно редко.

3. С картами-изображениями нельзя сделать разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.

Юзабилити

С позиции удобства пользователей, карты-изображения имеют только одно преимущество — ссылки разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей. Во всех остальных отношениях от них проку нет — обычные текстовые ссылки более информативны и им не страшно отключение показа картинок в браузере. Тот факт, что одно изображение загружается быстрее, чем та же картинка, но порезанная на фрагменты и сохраненная в виде набора графических файлов, легко обходится. Каждый из таких конечных файлов можно уменьшить, используя индивидуальные настройки оптимизации. В итоге, общий объем всех фрагментов будет занимать меньше места, чем одно изображение. Не стоит сбрасывать со счетов и психологический фактор — человеку кажется, что набор маленьких картинок загружается быстрее, чем одна большая.

Основной недочет карт — нет четко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами уже на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематичным.

Альтернативные варианты

Не всегда есть острая необходимость использовать карты-изображения, поэтому следует обратить внимание на то, что существуют и другие возможные варианты выполнения поставленной задачи.

Использование FLash

Во flash-роликах можно создавать разные области ссылок, используя возможности векторной графики. Благодаря широким возможностям, на Flash можно создавать потрясающие меню и средства навигации. Но тут тоже требуется осторожность, чтобы не потерять за деревьями леса.

Разрезание изображений

Это одно из популярных средств в дизайне. Одно изображение в этом случае разрезается с помощью специальных программ на фрагменты, которые окончательно сводятся вместе, создавая иллюзию цельной картинки. Хотя области разрезания могут быть только прямоугольные, в большинстве случаев этого вполне достаточно для создания ссылок. Для каждого фрагмента можно выбрать наиболее подходящий графический формат, в котором он будет сохранен, параметры оптимизации, добавить альтернативный текст. Тогда даже при отключенном показе картинок, будут хорошо видны границы областей и замещающий изображение текст.

Резюме

Как выяснилось, причина использовать карты-изображения только одна — сложная форма ссылок, продиктованная задачами дизайна. Типичное применение — регионы географической карты, которые служат ссылками. Во всех остальных случаях можно обойтись и текстовыми ссылками, а при необходимости создания графической навигации, одно изображение для удобства можно разрезать на фрагменты. Такой подход создаст больше удобства пользователям, особенно тем, которые в силу разных причин отключают показ изображений в браузере. О них тоже нужно помнить.

Тег

Внутри контейнера

• один или более элементов < >. Эти элементы не имеют содержимого, но определяют геометрические регионы карты изображений и гиперссылки, ассоциированные с каждым регионом
• содержимое уровня блока. Это содержимое должно включать < >, которые специфицируют геометрические регионы карты и ссылки, ассоциированные с каждым регионом

Если тег

Если регионы перекрываются, элемент, определяющий регион, который появился раньше в документе, имеет приоритет.

HTML : 3.2 | 4 / XHTML : 1.0 | 1.1

Синтаксис

Атрибуты

class	определяет имя используемого класса
dir	определяет направление символов: ltr — слева направо rtl — справа налево
id	уникальный идентификатор
lang	определяет язык отображаемого документа
name	имя карты изображения. Используется, как значение параметра usemap тега
onblur	потеря фокуса элементом
onclick	щелчок на элементе
ondblclick	двойной щелчок на элементе
onfocus	получение фокуса элементом
onkeydown	нажатие клавиши, когда элемент имеет фокус
onkeypress	нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup	освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown	нажатие кнопки мыши, когда элемент имеет фокус
onmousemove	движение указателя мыши, когда элемент имеет фокус
onmouseout	смещение указателя мыши с элемента
onmouseover	помещение указателя мыши на элемент
onmouseup	освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style	задает встроенную таблицу стилей
title	всплывающая подсказка

Пример

• закрывающий тег обязателен ()
• атрибут id является обязательным
• рекомендуется предоставлять текстовую альтернативу графической карте для тех случаев, когда графика недоступна или пользователь не может её получить
• не рекомендуется использовать карту-изображений в качестве основной навигации, из-за слабой поддержки старыми и голосовыми браузерами

Тег — элемент уровня блока, т.е. содержимое тега всегда начинается с новой строки. После тега также добавляется перенос строки.

HTML-изображения добавляются на веб-страницы с помощью тега . Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.

С помощью HTML-тегов

Вставка изображений в HTML-документ

1. Тег

Элемент представляет изображение и его резервный контент, который добавляется с помощью атрибута alt . Так как элемент является строчным, то рекомендуется располагать его внутри блочного элемента, например,

Или

.

Тег имеет обязательный атрибут src , значением которого является абсолютный или относительный путь к изображению:

Для тега доступны следующие атрибуты:

Таблица 1. Атрибуты тега

Атрибут	Описание, принимаемое значение
alt	Атрибут alt добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение. Синтаксис: alt="описание изображения" .
crossorigin	Атрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения: anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено. use-credentials — Cross-origin запрос выполняется с передачей учетных данных. Синтаксис: crossorigin="anonymous" .
height	Атрибут height задает высоту изображения в px . Синтаксис: height="300" .
ismap	Атрибут ismap указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент является потомком элемента с действительным атрибутом href . Синтаксис: ismap .
longdesc	URL расширенного описания изображения, дополняющее атрибут alt . Синтаксис: longdesc="http://www.example.com/description.txt" .
src	Атрибут src задает путь к изображению. Синтаксис: src="flower.jpg" .
sizes	Задаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset . Значением атрибута является одна или несколько строк, указанных через запятую.
srcset	Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута src . Значением атрибута является одна или несколько строк, разделенных запятой.
usemap	Атрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа # . Значение ассоциируется со значением атрибута name или id тега
width	Атрибут width задает ширину изображения в px . Синтаксис: width="500" .

1.1. Адрес изображения

Адрес изображения может быть указан полностью (абсолютный URL), например:
url(http://anysite.ru/images/anyphoto.png)

Или же через относительный путь от документа или корневого каталога сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.

Это интерпретируется следующим образом:
../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.

1.2. Размеры изображения

Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height . Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.

1.3. Форматы графических файлов

Формат JPEG (Joint Photographic Experts Group) . Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.

Формат GIF (Graphics Interchange Format) . Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.

Формат PNG (Portable Network Graphics) . Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.

Формат APNG (Animated Portable Network Graphics) . Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.

Формат SVG (Scalable Vector Graphics) . SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.

Формат BMP (Bitmap Picture) . Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.

Формат ICO (Windows icon) . Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.

2. Тег

Тег

Для тега доступен атрибут name , который задает имя карты. Значение атрибут name для тега

Элемент

3. Тег

Тег описывает только одну активную область в составе карты изображений на стороне клиента. Элемент не имеет закрывающего тега. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.

Таблица 2. Атрибуты тега

Атрибут	Краткое описание
alt	Задает альтернативный текст для активной области карты.
coords	Определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми: для круга — координаты центра и радиус круга; для прямоугольника — координаты верхнего левого и правого нижнего углов; для многоугольника — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.
download	Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения.
href	Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки.
hreflang	Определяет язык связанного веб-документа. Используется только вместе с атрибутом href . Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка.
media	Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
rel	Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения: alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало). author — ссылка на автора документа. bookmark — постоянный URL-адрес, используемый для закладок. help — ссылка на справку. license — ссылка на информацию об авторских правах на данный веб-документ. next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности. nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке. noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта. prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш. search — указывает, что целевой документ содержит инструмент для поиска. tag — указывает ключевое слово для текущего документа.
shape	Задает форму активной области на карте и ее координаты. Может принимать следующие значения: rect — активная область прямоугольной формы; circle — активная область в форме круга; poly — активная область в форме многоугольника; default — активная область занимает всю площадь изображения.
target	Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения: _self — страница загружается в текущее окно; _blank — страница открывается в новом окне браузера; _parent — страница загружается во фрейм-родитель; _top — страница загружается в полное окно браузера.
type	Указывает MIME-тип файлов ссылки, т.е. расширение файла.

4. Пример создания карты-изображения

1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint .

Рис. 1. Пример разметки изображения для создания карты

2) Задаем имя карты, добавив его в тег

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
Рис. 2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описанием