15.2. Image Map

Изображения, чувствительные к нажатию мыши, часто используются в веб для получения каких-нибудь эффектов, когда определённые области активируются указателем мыши. Очевидно, что самым используемым эффектом является динамическая ссылка на другую веб-страницу, срабатывающая по нажатию на одну из чувствительных областей. С помощью этого «фильтра» можно легко разработать чувствительные области изображения. Это является стандартной возможностью всех приложений для разработки сайтов, и в GIMP это делается аналогичным способом.

15.2.1. Общая информация

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

Этот сложный инструмент более подробно описан на странице GIMP Grokking [GROKKING02]. Здесь приводятся наиболее важные данные.

15.2.2. Activating the Filter

This filter is found in the main menu under FiltersWebImage Map….

Появится следующее окно:

  • слева находится вертикальная группа пиктограмм, одна из которых для указания, три для инструментов создания разных форм, одна для редактирования свойства зон и одна для удаления выделеной зоны; эти функции можно вызвать из меню карты,

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

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

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

15.2.3. Параметры

Рисунок 17.407. Image Map filter options

Image Map filter options

Image map window


15.2.3.1. Планка меню

The menu bar is similar to the main menu, only a few menus or menu entries are different:

Файл
Save, Save As

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

[Подсказка] Подсказка

С помощью меню ВидИсточник можно просмотреть содержимое этого текстового файла.

Open, Open recent

Дополнение позволяет открывать сохранённые файлы. Области, записанные в файле покажутся поверх изображения; если показываемое изображение не оригинал или другого размера, то GIMP запросит поменять масштаб.

Редактировать
Изменить данные об области

Рисунок 17.408. Editing an image map area

Editing an image map area

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

Просмотр

Это меню предлагает особые функции:

Area List

Здесь можно показать и скрыть область выделения.

Source…

Здесь можно видеть необработанные данные, какие сохраняются или считываются с файла.

Color, Gray

Здесь можно выбрать режим изображения и потом работать в сером режиме.

Mappings

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

Стрелка

Здесь стрелка представляет инструмент перемещения. При активации этого инструмента можно выделять и перемещать области в изображении.

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

Rectangle, Circle, Polygon

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

Edit Map Info…

Рисунок 17.409. Editing the image map data

Editing the image map data

С помощью этого простого диалога можно ввести некоторые данные, которые сохранятся в файл вывода либо как комментарий (Автор, Описание), либо как значения атрибутов тэгов HTML (Имя изображения, Надпись, URL по умолчанию).

Инструменты

С помощью меню «Инструменты» можно создать направляющие и даже равноудалённые прямоугольные области.

Grid, Grid Settings…

Рисунок 17.410. Параметры сетки

Параметры сетки

Здесь можно включить и выключить сетку а также настроить её параметры.

Use GIMP Guides…, Create Guides…

Линии направляющих создаются по краям изображения, но передвигать их можно, нажав на красные квадраты каждой линии сродне с линиями направляющих GIMP.

Создать направляющие

Рисунок 17.411. Параметры направляющих

Параметры направляющих

Параметры направляющих


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

15.2.3.2. Панель инструментов

Большинство пунктов здесь просто ссылки на уже описаные функции, кроме:

Move Area to Front, Move Area to Bottom

Here you can move an area entry to the bottom or top of the area list.

15.2.3.3. Рабочая область

Рисунок 17.412. Рабочая область

Рабочая область

In the main area of the image map window, on the left side, you will find your working area where you can draw all the shapes areas you want with the relevant tools.

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

[Внимание] Внимание

Заметьте, что области не должны перекрываться.

15.2.3.4. Область выделения

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

Рядом находится вертикальная группа пиктограмм; их использование очевидно, но всплывающая подсказка даёт информацию о каждой функции.

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