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

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

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

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

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

В прошлом видео уроке мы как раз начали знакомство с картами изображений в HTML . Посмотрели, как она должна выглядеть в конечном итоге, правда, с применением скриптов. Немного поговорили о координатах. То есть о том, как мы их будем определять. Как Вы можете помнить, я остановил свой выбор на одном из способов, это способ с использованием атрибута ismap , так как, на мой взгляд, именно этот метод определения координат является самым простым и менее сложным, а значит именно он нам подходит.

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

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

Начнем с изучения еще двух HTML-тегов, это теги

HTML-тег map.

Тег

Данный тег имеет обязательный атрибут name . В котором мы должны указать имя нашей карты изображения. Кроме того стоит отметить что этот тег не является блочным элементом, а значит необходимо его прописывать внутри блочного элемента, например тега абзаца или универсального тега div .

HTML-тег area.

Тег отвечает за указание активных областей внутри контейнера

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

Определение координат квадрата, прямоугольника, круга и многоугольника.

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

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

После чего на живом примере мы определим координаты квадрата и прямоугольника. Затем определим координаты окружности. И наконец, укажем координаты треугольника, который свою очередь играет роль многоугольника.

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

Видео урок: Создание карты избражения в HTML.

HTML-справочник и другие материалы можно и нужно скачать !

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

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

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

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

1. Тег

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

Или