Изображения на Web-страницах часто используются как карта ссылок (image map). Щелчки курсором мыши в окне браузера на различных участках такого изображения приводят к загрузке разных страниц. Для реализации этого механизма отдельным фрагментам изображения необходимо сопоставить различные гипертекстовые ссылки.

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

ImageReady предлагает удобный способ создания карт ссылок. Она автоматически генерирует необходимый код на основе разбивки на фрагменты, выполненной пользователем. Каждый фрагмент, которому назначается отдельная ссылка, должен занимать свой слой. Таким образом, URL-ссылка является атрибутом слоя. Для его ввода используется палитра Layer Options/Effects.

1. Откройте документ europe.psd и сохраните его под именем europe_map.psd с помощью команды Save As из меню File.
2. В палитре Layers выделите слой, соответствующий территории одной из стран, например, Holland.
3. В палитре Layer Options/Effects установите флажок Image Map. Он включает режим создания карты ссылок и открывает поля Shape и URL.
4. В поле URL вводится ссылка на какой-либо сетевой ресурс, которая сработает при щелчке курсором мыши на выбранном объекте в браузере. Допустим, вы предполагаете, что должна открыться страница holland.html, расположенная на сервере в том же каталоге, что и изображение с картой ссылок. В этом случае достаточно просто ввести имя файла документа в поле URL. Введите в это поле "holland.html".
5. Список Shape предоставляет выбор формы области изображения, откликающегося на щелчок курсором мыши в браузере. Это может быть прямоугольник (Rectangle), круг (Circle) или многоугольник (Polygon). Если форма фрагмента близка к одному из первых двух примитивов, то выбирайте соответствующий. Если форма области изображения более сложная, как и в нашем случае, то выберите последний вариант. Испльзование прямоугольной или круглой форм предпочтительно, поскольку приводит к генерации более компактного HTML-кода, а следовательно и более быстрой загрузке страницы.
6. Аналогичным образом введите имена документов для остальных стран. В качестве имени документа исполльзуте имя слоя . Обратите внимание, что имя показывается в палитре слоев непосредственно под именем каждого слоя (рис. 10.48.)
 

      
Рис. 10.48. Ссылка на ресурс в палитре
Layer Options/Effects и в палитре Layer

Карта ссылок определена. Функция Preview in позволяет протестировать карту ссылок еще до экспорта HTML-кода и самого изображения.

1. Выберите установленный на вашем компьютере браузер из списка Preview in, находящегося в меню File. Image Ready запустит выбранный браузер и загрузит в него изображение с картой ссылок. Ниже изображения вы увидите весь HTML-код, который понадобился для этого.
2. Подведите курсор мыши к любой из из выделенных цветом стран. Он примет вид, характерный для гипертекстовой ссылки. Рядом с курсором возникнет подсказка, которую Image Ready автоматически сгенерировал из имен слоев. В результате, пользователь увидит название страны, на которую указывает курсором. В строке состояния браузера вы обнаружите URL-сылки на ассоциированный документ.
3. Нажмите левую кнопку мыши и не отпускайте ее. Если вы пользуетесь Microsoft Internet Explorer 4.0 и выше, то увидите границы текущей области карты ссылок.

Отпустите кнопку мыши. Браузер попытается открыть документ, соответствующий ссылке, но не сможет этого сделать и выдаст ошибку №404. Если вы хотите серьезно протестировать карту ссылок, то создайте серию пробных HTML-документов с названиями, которые вводили при создании карты ссылок.

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

1. Убедитесь, что для текущего изображения установлены параметры оптимизации в палитре Optimized.
2. Выберите команду Save Optimized As из меню File.
3. В открывшемся диалоговом окне введите имя файла (вы можете использовать то же имя, что и в предыдущем разделе).
4. Проверьте установку флажка Save HTML File. Если флажок установлен, то ImageReady генерирует HTML-файл, который содержит код, необходимый для функционирования карты ссылок.
5. Нажмите кнопку HTML Options.... Она открывает одноименное диалоговое окно, доступное также по команде HTML из списка установок Preferences, находящегося в меню File (см. рис. 10.43). Из многочисленных установок параметров генерируемого HTML-кода нас теперь будет интересовать только список Image Maps. Он задает тип используемой карты ссылок. Дело в том, что карты ссылок могут обрабатываться либо сервером (server side), либо браузером посетителя (client side). Первый способ требует написания специального CGI-сценария, который автор страницы должен разместить на сервере. Второй способ лишен этого недостатка, поскольку вся информация, необходимая для обработки карты ссылок, предоставляется браузеру клиента и не требует участия со стороны сервера, В свою очередь, для карт ссылок, обрабатываемых сервером, существуют два стандартных формата CERN и NSCA. Список. Image Maps позволяет выбрать вариант кодирования карты ссылок. В подавляющем большинстве случаев следует использовать клиентскую обработку (Client-Side). Она имеет только один недостаток: не поддерживается старыми браузерами, ориентированными только на HTML 2.0. , К счастью, число пользователей таких браузеров достаточно мало, чтобы им было можно пренебречь. Закройте окно HTML Options нажатием кнопки ОК.
6. Нажмите кнопку Save, и оба файла (графический и HTML) будут сохранены в выбранной папке. Они имеют одинаковые имена, но разные расширения.
7. Откройте файл europe_map.html в браузере и оттестируйте готовую карту ссылок.
Если вам не нужен готовый HTML-документ, а только код самой карты ссылок, воспользуйтесь командой Copy HTML Code из меню Edit. Код карты ссылок копируется в системный буфер обмена и может быть вставлен в текст Web-страницы, загруженной в любой редактор.