Как сделать карту изображения html. Построение изображения-карты

Рассмотрим пример как выглядит карта изображений в html:

При наведении курсора мышкой на области зеленого прямоугольника видно, что она является ссылкой на "#green_link " (метка выбрана для примера, можно сделать ссылку на любую страницу в интернете). У красного квадрата на "#red_link ", а у синего круга соответственно на "#blue_link ".

Код этого примера:

img/primer-kartu-izobrazheniy-1.jpg ">

Как видно из примера код не такой уж и сложный. Разберем теги для создания карты ссылок изображения.

Описание примера

1. Необходимо создать связку изображения и карты

При создании карты ссылок атрибут usemap является обязательным для тега img.

2. Описание карты

3. Каждый элемент карты описывается с помощью тега , в котором указывается тип объекта с помощью атрибута shape (прямоугольник, круг или многоугольник) и его координаты.

Примечание

Области могут перекрывать друг друга. В этом случае ссылка будет вести на тот объект, что описан последним.

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

1. Атрибут shape="тип_объекта" - задает тип объекта. Может принимать следующие значения:

• circle - круг;
• rect - прямоугольник;
• poly - многоугольник;

2. Атрибут coords="значения_координат" - определяет геометрическое расположение объекта и его размеры.

Точкой отчета изображения является верхний левый угол. Т.е. если вы указали отступ 10 по высоте, то это означает 10 пикселей вниз.

В зависимости от типа объекта нужно задавать значения координат в разных форматах. Все значения указывается в пикселях (пометку px писать не нужно).

• Для типа circle: coords = (x,y,r) , где x,y координаты центра круга, а r - радиус круга;
• Для типа rect: coords = (x1,y1,x2,y2) , где x1,y1 координаты левой верхней точки прямоугольника, x2,y2 - координаты нижний правой точки прямоугольника;
• Для типа poly: coords = (x1,y1,x2,y2,...,xn,yn) , последовательно указываются координаты x,y каждой точки многоугольника;

3. Атрибут href="адрес_перехода" - задает ссылка для перехода (аналогично ). Помимо адреса перехода можно использовать функции JavaScript для выполнения какого-то действия.

4. Атрибут target="значение" - аналогично тегу определяет действие перехода по ссылке. Может принимать значения:

• _blank - открывает страницу в новом окне
• _self - загружает страницу в текущее окно
• _parent - загружает страницу во фрейм-родитель
• _top - отменяет все фреймы и загружает страницу в полном окне браузера

5. Атрибут title="подсказка" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »

6. Атрибут nohref - делает область неактивной. Используется при перекрытии объектов. Используется довольно редко, но иногда это может стать незаменимым решением. Например можно сделать маленький круг внутри большого круга неактивным.

Обязательно область nohref должна идти первой.

Пример кода:

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

Тег

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

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

Если тег

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

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

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

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

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

01.12.2015

Всем привет!
Продолжаем изучать основы HTML. . Карту изображений еще называют навигационной картой, но это не так уж и важно.
Давайте выясним, что такое карта изображения (навигационная карта) и где ее можно использовать на практике.

Карта изображения (навигационная карта ) – это картинка, на которой размещается одна или несколько указанных областей для ссылок.

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

В примере использовалась одна картинка, где область и путь перехода разный

Вот сейчас научимся создавать что-то подобное.

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

Как сделать карту изображения в HTML

Чтобы создать карту изображения в HTML, вставьте вот такой каркас:

○ тег map

Тег - это главный контейнер для создания карты изображения, внутри которого содержатся другие теги, такие как .
Закрывающий тег обязательный.

* атрибуты тега map

○ название карты
Обязательно карте нужно дать имя и для этого используют атрибут «name» :

○ тег area

Тег - этот тег предназначен для указания геометрической области со ссылкой.

* атрибуты тега area

○ как определить форму области

Чтобы определить форму области (прямоугольник, круг, многоугольник) используют для тега атрибут «shape» с такими значениями:

• rect - Прямоугольник. Пример: shape="rect" ;
• circle - Круг. Пример: shape="circle" ;
• poly - Многоугольник. Пример: shape="poly"

○ как указать расположение геометрической формы

Чтобы указать расположение геометрической формы (прямоугольником, кругом, многоугольником) используют для тега атрибут «coords» .

В атрибуте «coords» и задаются все параметры размещения геометрической фигуры по такой схеме:

Coords="x1,y1,x2,y2"

Обратите внимание на вертикальную ось «y » и горизонтальную ось «x ». Вот по этим осям и задаются параметры.

Coords="x,y,R"

Coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5"

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

К примеру, у меня есть вот такая картинка прямоугольников:

Вставим картинку в html документ:

Теперь создаем блок для карты изображения и даем ему любое название через атрибут «name» , к примеру «karta1»

Имя карты обязательно должно быть через решетку «# »:

Теперь в теге указываем координаты, геометрическую форму и ссылку для перехода.

Вот координаты первого прямоугольника:

x1=25, y1=36, x2=114, y2=98

а вот такие будут ко второму:

x1=153, y1=11, x2=219, y2=127

Вот готовый код:

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

А мы смотрим на результат, что же у меня вышло. Попробуйте навести на прямоугольник №1, а потом на №2 (можно нажать, они кликабельны):

Круг

К примеру, у меня есть вот такая картинка круга:

Вот координаты первого круга:

x=46, y=48; а длина радиуса - R=35

а вот такие будут для второго круга:

Прежде, чем посмотреть готовый код, попробуйте сами написать HTML код и сверить его с моим.

Готовый код будет вот таким:

Еще раз повторюсь в разъяснениях, что я делал в коде:

Строка №1
Вставил картинку в HTML файл и привязал изображение к карте с помощью атрибута «usemap» :

Строка №2
Создал блок для карты изображения и дал карте название для привязки к картинке с помощью атрибута «name» :

Обратите внимание, название карты (name="имя" ) должно совпадать с привязкой картинки (usemap="#имя" ). Это важно, так как карта изображений работать не будет.

Строка №3 и №4
Указал фигуру и ее координаты, а также привязал к фигуре ссылку

Итак, если вы все правильно сделали, результат будет таким:

Попробуйте навести на круг №1, а потом на №2 (можно нажать, они кликабельны)!!!

Многоугольник

К примеру, у меня есть вот такая картинка фигуры с несколькими углами:

Вот координаты первого многоугольника:

x1=168, y1=9, x2=232, y2=29, x3=200, y3=97, x4=223, y4=129, x5=153, y5=119

а вот такие будут для второго многоугольника:

x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58

Готовый код будет вот таким:

Результат будет вот таким:

Хочу дополнить, что углов может быть столько, сколько вы хотите и сколько вы укажите:

Разъяснение:

x1, y1 - координаты первого угла;
x2, y2 - координаты второго угла;
xN, yN - координаты последнего угла

ДОПОЛНЕНИЕ:

Комбинированная карта изображений

Карту изображений можно комбинировать сразу с разными фигурами. Что я имею в виду? На одной картинке, могут быть указаны различные области разных фигур.
Вот, к примеру, так:

В примере я указал область для круга и для прямоугольника.

Для каждой выбранной области можно прописать подсказки, которые будут появляться, если навести курсор мышки. Для подсказки используют атрибут «title» к тегу «area» :

Вот результат:

Наведите курсор мыши на круг, а потом на прямоугольник. Вы увидите, как появятся подсказки, на кружке – «wordpress» , а на прямоугольнике - «Автор блога» .

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

Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.

Предыдущая запись
Следующая запись

Мы с Вами уже говорили о том как сделать рисунок ссылкой.. в этой главе поговорим о том как сделать фрагмент, область рисунка ссылкой на тот или иной документ, а так же о том как сделать различные области одного и того же рисунка ссылками на различные документы.

Для осуществления данной задачи нам не обойтись без так называемых навигационных карт.

Предположим, у нас имеется такой рисунок:

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

В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap тега (я думаю Вам не стоит напоминать о том что тег имеет обязательный атрибут src который указывает путь к той или иной картинке )

Назовём наш рисунок/карту именем panel . Это будет выглядеть так:

usemap="#panel" >

Не забываем по правилам синтаксиса поставить знак # решётки перед именем..

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

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

href - указывает путь к открываемому документу (точно так же как в теге )
shape - форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:

• rect - прямоугольная область
• poly - область представляет собой некий многоугольник
• circle - область заданная окружностью

coords - координаты формы

Прямоугольная область

Теперь наша карта приобретает такой вид:

По сути теперь "зелёная" квадратная кнопка стала рабочей.

В чем Вы можете убедится нажав на неё в этом примере:

usemap="#panel">

Немного поспешил с примером толком не объяснив суть написанного.. Заострим внимание на атрибутах тега .

href="primer1.html" - здесь думаю понятно, это путь к документу, который должен открыться при нажатии на "зелёную кнопку".

Так как кнопка у нас квадратная, а квадрат как известно это "правильный" прямоугольник, форму области рисунка назначаем прямоугольной shape="rect" .

А теперь самое интересное coords="15,15,82,82" - координаты.. Для прямоугольника они задаются двумя точками по принципу "Х1,У1,Х2,У2" Где Х1,У1- первая точка и соответственно Х2,У2 -вторая. Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0,У=0, а самый нижний правый Х=300,У=100. Если не понятно, окунёмся в геометрию за пятый класс..

Взгляните на рисунок:

Так, выбрав прямоугольную форму shape="rect" для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения "рабочей" области всей кнопки.

Полигон (многоугольник).

Займёмся "жёлтой кнопкой", она у нас представлена в виде треугольника. Для того чтобы выделить её "рабочую" область из нашего рисунка, присвоим атрибуту shape значение poly - полигон, которое определит эту область как некий многоугольник, где координаты через запятую будут являться его вершинами, их может быть сколь угодно много "Х1,У1,Х2,У2,Х3,У3,Х4,У4… Х124,У124" фигура образованная этими точками вершинами углов может иметь вид любого многоугольника как правильного, так и неправильного. В нашем случае угла всего три, на то он и треугольник, следовательно его координаты будут заданы тремя парами значений "Х1,У1,Х2,У2,Х3,У3"

Значит всё вместе пишем так:

shape="poly" coords="148,15,185,82,110,82" >

А вот рисунок который наглядно показывает откуда берутся координаты точек..

Окружность

Ну и последняя "красная кнопка" она у нас круглая.. значит форма области будет круглой shape= "circle" . На сей раз с координатами дело обстоит немного иначе. Нам понадобится три значения Х,У,R. Х и У это координаты центра нашей окружности, а R - это длина радиуса в пикселях.

Вот рисунок:

А вот пример:

Доводим до ума..

Теперь немного о том, что ещё желательно было бы сделать с нашей картой прежде чем "монтировать" её в какую либо страницу.

Определим фиксированные размеры рисунка-карты атрибутами width и height

Напишем альтернативный текст, как для всего рисунка карты, так и для её отдельных областей используя атрибут alt , а также описание элементов атрибутом title .

Избавимся от рамки бордюра.. сделаем border="0" ..(ну если Вам с бордюром больше нравится, можете этого не делать.. я не настаиваю..)

В конце должно выглядеть примерно вот так:

width="300" height="100" border="0" alt="Панель управления" title="Панель управления">

Пересечение областей

Иногда удобно формировать "рабочую" область изображения "смешивая" разные формы..

Предположим, наша очередная кнопка имеет такой вид:

Конечно, можно определить форму как многоугольник, но придется задать уйму координат для округлой части такой кнопки (ну это если нужна особая точность в навигационной карте).

А можно определить в этом примере две формы прямоугольник rect и окружность circle как показано на рисунке:

А в коде указать путь к одному и тому же документу:

"Не область"

Рассмотрим на примере.. предположим необходимо изготовить вот такую кнопку:

Как быть с отверстием в ней?

Тег помимо атрибута href имеет противоположенный по значению атрибут nohref - неактивная область, то есть если пользователь нажмет на такую область, то ровным счетом ничего не произойдёт, чего нам собственно и необходимо добиться при изготовлении "отверстия" в нашей карте.

Карта будет задана двумя областями, неактивной окружностью circle и активной прямоугольной областью rect и как показано на рисунке чертеже иметь следующие координаты:

Как уже говорилось ранее, при пересечении областей наибольшим приоритетом будет пользоваться та область, которая в коде внутри тега указана первой

Следовательно, пример будет иметь такой вид:

Карта на сервере.

Отрывок из справочника (атрибуты тега ):

usemap - изображение является навигационной картой на стороне клиента.
ismap - изображение является навигационной картой на сервере.

Непонятно? Тогда читаем..

С атрибутом usemap мы вроде бы разобрались.. Смотрите, пользователь (клиент) открыв Вашу страницу, одновременно со всем остальным содержанием, загружает "на свою сторону" как сам рисунок, так и навигационную карту к нему и всё это дело обрабатывается его браузером.

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

Пишется так:

Где адрес навигационной карты на каком либо сайте.. размещённом на том или ином сервере..

Всё равно непонятно? Если да, то тогда не стоит заморачивотся по этому поводу.. используйте usemap , на мой взгляд такое решение будет лучшим в большинстве случаев при использовании навигационных карт.

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

При создании страницы с навигационной картой тег всегда должен быть выше самой карты То есть писать вот так:



Можно, но не нужно.. потому что при загрузке страницы могут возникнуть проблемы, так как карта с разметкой уже загрузилась, а самого рисунка ещё нет..

И ещё что касается загрузки..



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

А писать здесь, так как во время загрузки страницы, пользователь не дождавшись её окончания, может пытаться нажимать на кнопки указанные в навигационной карте которая к этому времени еще не загрузилась..