Онлайн учебники на TEPKA.ru

Учебник по HTML 4

       

Создание карт-изображений
Программа 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, содержащий следующий код:

<HTML>

<HEAD>

</HEAD>

<BODY>

<IMG SRC=Blazons.gif>

</BODY>

</HTML>

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

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

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

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

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

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

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

<HTML>

<HEAD>

</HEAD>

<BODY>

<IMG SRC="Blazons.gif" usemap="#Blazons">

<map name="Blazons">

<area shape="rect" alt='Герб города Томск" coords="35,58,187,244"

href="tomsk.htm">

<area shape="circle" alt='Герб города Якутск" coords="364,150,104"

href="jakutsk.htm">

<area shape="poly" alt='Герб города Санкт-Петербург"

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

<area shape="default" nohref>

</map>

</BODY>

</HTML>

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

Примечание

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

 

 

 

Top.Mail.Ru
Top.Mail.Ru