Для создания ролловера требуется создание серии изображений. Этим и займемся в настоящем разделе. Для примера добавим ролловеры к карте Европы, которую вы раскрашивали при изучении первого раздела. Пусть при размещении курсора мыши в браузере над территорией изображенных на карте стран, появляются фотографии с их видами. Для решения этой задачи кроме изображения карты нам понадобятся фотографии с характерными видами. Эти фотографии находятся на прилагаемой дискете: england.jpg, Sweden.jpg, france.jpg, holland.jpg, germany.jpg и italy.jpg.

1. Откройте документ europe.psd и сохраните его под именем europe_ rollover.psd с помощью команды Save As из меню File.
2. Сведите слои изображения командой Flatten Image из меню Layer.
3. Откройте все шесть файлов с видами стран.
4. Выберите инструмент Move из палитры инструментов.
5. Скопируйте каждый из них на отдельный слой документа europe_sliced.psd, перетаскивая с помощью мыши изображение из окна очередного документа или его палитры слоев.
6. Дайте каждому слою имя, совпадающее с названием страны, вид которой изображен на фотографии (England, Sweden, France, Holland, Germany и Italy). Слой с картой назовите Europe. На эти имена и будем ссылаться в дальнейшем.
7. Чтобы точно разместить изображения на карте, построим несколько направляющих. ImageReady имеет для этого замечательную команду Create Guides из меню View. Она открывает диалоговое окно, изображенное на рис. 10.49.

Рис. 10.49. Диалоговое окно Create Guides

8. Диалоговое окно Create Guides имеет две идентичные области Horizontal Guides и Vertical Guides, отвечающие за построение горизонтальных и вертикальных направляющих, соответственно. Размещение нескольких направляющих по обоим направлениям можно производить одним из двух способов, равномерным распределением (<> guides, evenly spaced), с заданным интервалом (<> pixels between guides) Также можно разместить и одиночную направляющую, указав ее координату по вертикали (<> pixels from top (single guide)) или по горизонтали (<> pixels from left (single guide)). Выбор определяется положением переключателя в соответствующей области. В поле рядом с активной позицией переключателя вводят численные значения в пикселах.

Примечание
Если в диалоговом окне Create Guides установить флажок ClearExisting Guides, то перед размещением все уже существующие в документе направляющие будут удалены

Нам потребуется равномерно разместить по горизонтали три направляющие линии. Для этого установите флажок Horizontal Guides и сбросьте флажок Vertical Guides. Затем установите переключатель в верхнее положение. <> guides evenly spaced и в соседнее поле введите 3. Чтобы заранее просмотреть результат размещения направляющих в окне документа, установите флажок Preview. Если все сделано верно, нажмите кнопку ОК.

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

Рис. 10.50. Размещение фотографий с видами стран на карте

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

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

Рис. 10.51. Изображение разрезано на фрагменты

1. Переключитесь в режим показа фрагментов кнопкой Show Slices в палитре инструментов.
2. Выберите команду Divide Slice из меню Slices
3. Разделите изображение на восемь фрагментов: четыре по вертикали и два по горизонтали. Для этого в диалоговом окне Divide Slice установите оба флажка Divide Horizontally Info и Divide Vertically Info. Затем введите значение 4 в поле. <> slices down, evenly spaced и значение 2 в поле <> slices across, evenly spaced. Нажмите кнопку ОК. Изображение разделено на фрагменты.
4. Выберите инструмент Slice Select из палитры инструментов.
5. Скорректируйте положение границ фрагментов таким образом, чтобы все фотографии с видами оказались на отдельных фрагментах. Внимательно следите за тем, чтобы фотографии не пересекали границ фрагментов. В противном случае впоследствии вы получите лишние ролловеры. У вас должно получиться 11 фрагментов, как показано на рис. 10.51. Шесть из них, по числу фотографий с видами, должны быть пользовательские, а пять — автоматические. Лишние пользовательские фрагменты выделяйте инструментом Slice Select и удаляйте командой Delete Slice из меню Slice или нажатием клавиши <Delete>.