Карты ссылок в ImageReady
Теоретические аспекты создания Image Map
Создание Image Map с помощью инструментов
Создание Image Map на основе слоев
Ранее мы уже ознакомились с возможностью создания графических изображений, отдельные фрагменты которых связаны различными гиперссылками, путем разрезания картинок на слайсы. Это действительно очень интересный прием, успешно и часто применяемый на практике. Однако разрезать на слайсы можно только области строго прямоугольной формы — при другой форме активных областей необходимо создание карт ссылок, то есть использование специальной технологии разметки изображений Image Map, позволяющей размещать ссылки на областях произвольной формы. При этом отпадает необходимость разрезать изображение на куски, а затем располагать их в ячейках таблицы. Все оказывается гораздо проще: технология Image Map позволяет устанавливать ссылки на разных частях одного и того же графического файла. А получающееся в результате единое графическое изображение в HTML-коде при помощи координат просто разбивается на отдельные участки с различными ссылками.
Технология Image Map применяется в самых различных областях, но чаще всего при
графических меню (прежде всего графических «шапок» сайтов), когда создается
одно большое изображение с элементами меню и каждому его участку предписывается
какое-либо действие, а также при создании простых ГИС-подобных систем с картографическими
возможностями.
Теоретические аспекты создания Image Map
Стоит отметить, что ImageReady предлагает очень удобный способ создания карт ссылок, так как автоматически генерирует необходимый html-код на основе зон, определенных пользователем, или отдельных слоев изображения.
Для работы с областями Image Map в ImageReady существуют специальные инструменты: Rectangle Image Map (Прямоугольная карта ссылок), Circle Image Map (Круглая карта ссылок) и Polygon Image Map (Многоугольная карта ссылок), которые позволяют создавать зоны карты ссылок независимо от слоев документа (рис. 1). Определить конкретные зоны с помощью вышеназванных инструментов не сложнее, чем создать аналогичные выделенные области, а скорректировать созданные контуры конкретной зоны можно путем простого перемещения боковых и угловых маркеров ее рамки.
Дополняет вышеназванные инструменты Image Map Select (Выделение карты ссылок), обеспечивающий редактирование и выделение контуров зон. Чтобы выделить зону, достаточно щелкнуть инструментом внутри нее — вокруг выделенной зоны появится рамка с манипуляторами. При выделении нескольких зон необходимо удерживание клавиши Shift.
Изображение внутри рамки выделенной зоны выглядит немного более светлым, чем должно быть на самом деле (рис. 2). Таким способом ImageReady показывает зону карты ссылок. Выделение цветом активной зоны, так же как и рамка, — это лишь способ отображения зоны: цвета изображения на самом деле не меняются. Кроме того, вокруг всех сформированных зон карты ссылок появляются границы — в действительности на изображении их нет, и они становятся видны только в ImageReady.
Результаты определения прямоугольных и круглых областей можно сделать более точными, если заранее знать их размеры. Тогда перед выделением соответствующей зоны на панели опций следует установить флажок Fixed Size (Фиксированный размер) и ввести нужные значения. Для прямоугольной области определяются поля Width (Ширина) и Height (Высота), а для круглой — поле Radius (Радиус) (рис. 3).
Однако скорректировать границы прямоугольных и круглых зон можно и после их определения. Делается это либо вручную, простым перемещением соответствующих маркеров, либо с помощью полей X, Y, W (Width — Ширина), Н (Height — Высота) или X, Y, R (Radius — Радиус) в палитре Image Map (рис. 4). Второй вариант обеспечивает большую точность границ.
Сложнее дело обстоит с редактированием многоугольных зон, созданных при помощи инструмента Polygon Image Map (Многоугольная карта ссылок). В простом случае после формирования подобной области скорректировать ее границы можно с помощью инструмента Image Map Select (Выделение карты ссылок), перетащив саму область или отдельные ее точки-узлы. Кроме того, есть возможность создать дополнительные узлы, щелкнув мышью на границе области в месте создания узла при нажатой клавише Shift, или удалить ненужный узел путем щелчка по нему при нажатой клавише Alt.
Но, несмотря на наличие вышеперечисленных вариантов редактирования границ зон, точное размещение их на карте ссылок все равно может оказаться довольно трудоемким делом, ведь нередко отдельные зоны должны располагаться симметрично относительно границ или выравниваться по ним. Облегчить эту работу помогут дополнительные возможности выравнивания зон. Чтобы воспользоваться ими, необходимо выделить интересующие вас зоны, удерживая клавишу Shift, и щелкнуть на соответствующей кнопке в панели свойств инструмента Image Map Select (Выделение карты ссылок) — эта панель появляется в верхней части экрана при выборе инструмента. Например, зоны на рис. 5 имеет смысл выровнять по левой границе, щелкнув на кнопке Align Image Map Area Left Edges (Выравнивание выделенных областей карты ссылок по левой границе).
При желании режимы отображения карты ссылок можно изменить, воспользовавшись командой Edit > Preferences > Image Map (Редактирование > Установки > Image Map). Например, в поле Image Map Overlay (Наложение карты ссылок) задается величина осветления зон (рис. 6), хотя осветление можно вообще отменить, установив флажок Show Lines Only (Показывать только линии). Цвет рамки вокруг зоны карты ссылок несложно выбрать в списке Line Color (Цвет линий), а флажок Show Bounding Box (Показать габаритную рамку) включает показ габаритной рамки у круглых зон.
Следующий этап работы с зонами — назначение им ссылок, для чего используется дополнительная палитра Image Map (Карта ссылок). Она же позволяет определять типы контуров зон и особенности их описания. Если данная палитра отсутствует на экране, то ее можно открыть командой Window > Image Map (Окно > Карта ссылок).
В палитре Image Map в обязательном порядке указывается URL — адрес страницы, на которую должна указывать ссылка. При определении адреса префикс http:// обязателен. При необходимости здесь же можно указать такие параметры ссылки, как Target и Alt. Поле Target (Цель) доступно только тогда, когда в поле URL введен адрес, и определяет, в какой HTML-фрейм будет загружено содержимое ссылки и какие HTML-фреймы будут сохранены — пустая строка эквивалентна выбору в списке варианта _self, то есть того же фрейма, в котором находится сама карта ссылок. Поле Alt (Альтернативный текст) используется для текстового описания зоны, и оно будет видно в графическом браузере как всплывающая подсказка, а в текстовом — вместо изображения.
Затем нужно позаботиться о формате оптимизации. Теоретически картой ссылок может служить любое растровое изображение, записанное в одном из следующих форматов: gif, jpeg или png. Но в действительности оказывается, что далеко не всякий графический формат способен успешно справиться с этой ролью и предпочтение отдается формату gif, который и выбирается в палитре Optimize.
На последнем этапе следует сохранить Image Map с оптимизацией — команда File > Save Optimized (Файл > Сохранить с оптимизацией) с вариантом «HTML и Image». Результатом работы станет html-файл с соответствующим html-кодом и единственное gif-изображение карты ссылок в папке Images. Исключение составляет вариант внедрения в карту ссылок rollover-эффектов — в этом случае количество изображений соответственно увеличится.
Кроме того, разрабатывая карты ссылок, не стоит забывать о необходимости сохранения исходного кода — команда File > Save (Файл?Сохранить), так как в противном случае малейшие изменения дизайна, например при внедрении дополнительного пункта меню, потребуют от вас проделать всю работу заново.
 |
|
Image Map на практике
Теоретически работу по созданию карты ссылок можно разбить на три части: разбиение изображения на отдельные зоны и их корректировка, определение ссылок в палитре Image Map и сохранение карты ссылок с оптимизацией.
Для осуществления первого этапа можно пойти двумя путями: либо с применением соответствующих инструментов, либо на основе предварительно созданных слоев. Рассмотрим их оба, учитывая, что для одних случаев предпочтителен первый вариант, а для других — второй. Что же касается второго и третьего этапов, то они абсолютно идентичны — независимо от выбранного варианта выделения зон.
Мы остановимся на наиболее общих примерах создания карт ссылок. Желающим ознакомиться с вопросом более подробно стоит обратиться по адресам: http://iit.bloomu.edu/multimedia/ImageReady/imagemaps/,
http://carbon.cudenver.edu/mume/director/studio/lessons/six.html#, http://www.metamorephosis.com/, http://www.creativepro.com/story/feature/9920.html,
http://www.webdesignskolan.com/photoshop/imageready_imagemap/imageready_imagemap.htm,
http://www.adobe.com/web/tips/imgrmap/pdfs/imgrmap.pdf/.
|
|
Создание Image Map с помощью инструментов
Возьмем в качестве изображения рис. 7, полученный с сайта http://www.grantasticdesigns.com/, — он идеально подойдет для того, чтобы освоить вариант создания карты ссылок с помощью инструментов Rectangle Image Map (Прямоугольная карта изображения) и Circle Image Map (Круглая карта изображения).
Откройте данное изображение в ImageReady и выберите, удерживая клавишу Alt, инструмент Circle Image Map. Попробуйте определить нужную область. Обратите внимание, что сразу же после формирования некой области, которая сначала абсолютно не соответствует желаемой, вокруг нее появляются маркеры, которые несложно перемещать (рис. 8), добиваясь нужного результата.
После этого можно приступить к определению всех остальных областей. Учитывая, что часть из них имеет одинаковый размер, удобнее не выделять каждую область вручную, а продублировать их. Для этого щелкните правой кнопкой на первой сформированной области и выберите из всплывающего меню команду Duplicate Image Map Area (Дублировать область Image Map) (рис. 9). В итоге появится новая область. Переместите продублированную область на место следующей кнопки и т.д. После определения всех круглых областей смените инструмент на Rectangle Image Map и с его помощью определите области прямоугольной формы. В результате изображение примет вид как на рис. 10.
Затем инструментом Image Map Select (Выделение карты ссылок) выделите первую область, активизируйте палитру Image Map и введите адрес страницы (включая префикс http://), на которую должна указывать ссылка (рис. 11). В этом же окне определите значение поля Alt, чтобы в дальнейшем при наведении мыши на ссылку всплывала соответствующая подсказка.
Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов, и перейдите в окно браузера. В открывшемся окне вы увидите не только работающую карту ссылок, но и HTML-код. Поперемещайте курсор по всем областям карты ссылок и убедитесь, что внизу, в строке состояния браузера, ссылки меняются.
Сохраните созданную графическую карту с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией), выбрав вариант «HTML и Image». В итоге будут получены файл Пример1.html и графическое изображение карты ссылок в папке Images.
А теперь перейдем к работе с более сложным изображением, воспользовавшись фрагментом интерактивной карты мира, взятой с сайта http://www.mirkart.ru/ (рис. 12). Будем исходить из предположения, что нам необходимо создать свой вариант карты ссылок на страницы с подробной информацией о каждой из присутствующих на карте стран. Иными словами, щелчок курсором мыши на территории любой страны в этой карте должен приводить к отдельной Web-странице.
Откройте данное изображение в ImageReady. Учитывая, что перед нами географическая карта, то есть объект с фрагментами сложной формы, для определения нужных зон воспользуемся инструментом Poligon Image Map Tool (Полигональная карта ссылок) (рис. 13). Определять области сложной формы лучше при увеличенном масштабе изображения.
Аналогичным образом определите и все остальные зоны. В результате изображение станет напоминать рис. 14. Затем активизируйте палитру Image Map и для каждой из областей определите адрес страницы, на которую должна указывать ссылка. В данном случае, учитывая, что созданная нами графическая карта должна работать с диска и не имеет реального адреса в Интернете, мы укажем в качестве адреса имя Web-страницы с диска (рис. 15).
Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов, и перейдите в окно браузера. В открывшемся окне вы увидите не только работающую карту ссылок, но и HTML-код. Проверьте работу ссылок, перемещая курсор по фрагментам карты изображений и щелкая на областях, имеющих ссылки.
Сохраните созданную графическую карту с оптимизацией командой File?Save Optimized (Файл?Сохранить с оптимизацией), выбрав вариант «HTML и Image». В итоге будут получены файл Пример2.html и графическое изображение в папке Images.
|
|
Создание Image Map на основе слоев
Подготовьте картинки, которые в дальнейшем должны иметь собственные ссылки, и разместите их на различных слоях в Photoshop (рис. 16, 17).
Перейдите в программу ImageReady и на панели Layers выберите слой Layer1, который будет использоваться для формирования области. Воспользуйтесь командой Layer > New Layer Based Image Map Area (Слой > Новая область ссылок на слое) — в результате станет доступной палитра Image Map, где и будет необходимо указать URL для ссылки. В данном случае создаваемая нами графическая карта не имеет реального адреса в Интернете и будет работать просто с диска, поэтому мы укажем не URL, а имя Web-страницы с диска (рис. 18).
Аналогичным образом поступите с оставшимися тремя слоями, последовательно выделяя каждый из них, формируя область и указывая адрес.
Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов, и перейдите в окно браузера. Проверьте работу ссылок, перемещая курсор по фрагментам карты изображений и щелкая на областях со ссылками.
Сохраните созданную графическую карту с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией), выбрав вариант «HTML и Image». В итоге будут получены файл Пример3.html и графическое изображение в папке Images.
Создание карты ссылок на основе слоев очень удобно использовать и в том случае, если планируется внедрение rollover-эффектов, что широко применяется при разработке самых разных элементов навигации.
Попробуем создать навигационное меню с rollover-эффектом, аналогичное тому, что мы видим на большинстве сайтов Сети, например на Rambler.ru, когда при наведении мыши на ту или иную ссылку цвет последней меняется.
Пусть исходный фон для предполагаемого меню будет выглядеть как на рис. 19. В данном случае просто скопирован фрагмент страницы http://www.rambler.ru/ и с него удалены только мешающие нам ссылки. Откройте это изображение в Photoshop.
Теперь скопируйте со страницы Rambler.ru на отдельные слои прямоугольные области со ссылками (рис. 20). Всего получится 11 слоев (рис. 21).
Перейдите в программу ImageReady и на панели Layers выберите слой Layer2, который будет использоваться для формирования первой зоны. Воспользуйтесь командой Layer > New Layer Based Image Map Area (Слой > Новая область ссылок на слое) и укажите URL для ссылки. Аналогичным образом поступите со всеми остальными слоями (рис. 22, 23).
После формирования карты ссылок окно Rollovers примет следующий вид (рис. 24).
Теперь для каждой области необходимо создать дополнительно состояние Over State (Наведенное состояние). Для этого выделите в палитре Rollovers нормальное состояние, соответствующее первой зоне, нажмите правую кнопку и выберите из всплывающего меню команду Add Rollover State (Добавить Rollover-состояние) (рис. 25, 26).
Теперь следует изменить внешний вид изображения для состояния Over State. Для этого выберите из меню команду Layer > Layer Options (Слой > Опции слоя) и измените непрозрачность слоя соответствующим образом, например как показано на рис. 27. Изображение приобретет вид как на рис. 28. Проделайте аналогичные операции по созданию наведенного состояния мыши и корректировке для него параметров слоя для всех остальных областей (рис. 29).
Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов, и перейдите в окно браузера. Проверьте, изменяются ли ссылки и яркость надписи при перемещении курсора с одной области на другую.
Сохраните созданную графическую карту с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией), выбрав вариант «HTML и Image». В итоге будут получены файл Пример4.html и серия графических изображений в папке Images.
В рассмотренном примере rollover-эффект заключается в том, что при наведении курсора на ссылку надпись становится более бледной за счет изменения степени непрозрачности слоя. Можно было пойти и другим, более долгим путем и добиться изменения цвета надписи, например, на красный, как в действительности и выглядят ссылки Rambler.ru. при наведении на них курсора мыши. В этом случае придется последовательно печатать все надписи-ссылки на отдельных слоях (рис. 30, 31).
Перейдите в программу ImageReady и на панели Layers выберите слой Layer2. Примените команду Layer > New Layer Based Image Map Area (Слой > Новая область ссылок на слое) и укажите URL для ссылки. Проделайте то же самое со всеми остальными слоями.
После этого для каждой области создайте состояние Over State (наведенное состояние), последовательно выделяя в палитре Rollovers нормальное состояние, соответствующее области, нажимая правую кнопку и выбирая из всплывающего меню команду Add Rollover State (Добавить Rollover-состояние), — рис. 32.
Измените цвет надписи в состоянии Over State для каждой из областей. Это можно осуществить, воспользовавшись командой Layer > Layer Style > Color Overlay (Слой > Стиль слояaЗаливка) и изменив параметры слоя соответствующим образом, например как показано на рис. 33 при выбранном состоянии Over State для конкретной зоны. Изображение примет вид как на рис. 34. Проделайте аналогичные операции по корректировке параметров слоя при наведенном состоянии мыши для всех остальных областей.
Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов, и перейдите в окно браузера. Проверьте, изменяются ли ссылки и цвет надписи при перемещении курсора из одной области в другую.
Сохраните созданную графическую карту с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией), выбрав вариант «HTML и Image». В итоге будут получены файл Пример5.html и серия графических изображений в папке Images.
