Об Adobe Image Ready (часть 2 - RollOvers). Библиотека I2R. На странице не только важно найти место для меню и логотипа, но и сделать управляющие элементы (кнопки, ссылки) активными. Отчего же не позволить любезному IR сгенерить тот самый JavaScript код для всех интерактивных элементов странички?

Автор: Татьяна Вукс
NunDesign: Материалы для web разработчиков

Представляем Вам продолжение к статье «Собственно об Adobe Image Ready» -

2. RollOvers

В прошлый раз вы могли убедиться, что IR действительно способен упростить за вас работу по форматированию страниц с большим количеством графики. И все же в большей мере на странице не только важно найти место для меню и логотипа, но и сделать управляющие элементы (кнопки, ссылки) активными. Для подобных целей веберы наиболее часто используют язык сценариев JavaScript, поскольку этот язык поддерживается подавляющим большинством новых браузеров на всех платформах. Проще всего опять-таки для этих целей взять готовый скрипт (ну не обязательно веб-дизайнер являет из себя еще и программера!) и подогнать его под свою графику… только не всегда срабатывает так, как видится… опять же, подгонять по размерам все эелементы… опять же – не понравилось – перерисовывать все кнопки…

И другой вариант – когда страница монтируется по объектом в, например, PhotoShop`e, все объекты расположены на отдельных слоях – и уже переброшена страничка в IR – и порезана на слайсы, отчего же не позволить любезному IR сгенерить тот самый JavaScript код для всех интерактивных элементов странички?

Будущие наши кнопки изменяют свое состояние (внешний вид) в броузере в зависимости от событий:

отсутствие событий – нормальное состояние (Normal или Out);
курсор мыши находится на элементе (Over – Сверху);
Курсор мыши находится на элементе и нажата левая кнопка мыши (Down – Вниз);
Курсор мыши находится на элементе и левая кнопка мыши отпущена (Сlick – Щелчек);

Элементы, соответствующие этим состояниям, и называются RollOver. Обработкой событий – смены состояний кнопок занимается сценарий JavaScript.

Наиболее часто изменение вида кнопок используют на состоянии Over - т.е. когда курсор мыши находится над графическим объектом, тот изменяется.

Итак, откройте в IR вашу страницу;
· Определите навигационные элементы таким образом, чтобы КАЖДАЯ кнопка находилась на отдельном слое (свиток layers);
· Задайте имя каждому слою - это необходимо для того, что бы вы не путались со слоями, когда будете создавать RollOvers;

	-menu1 (Layer1)
	-menu2 (Layer2)
	-menu3 (Layer3)

· Определите "сетку" слайсов с помощью направляющих линий (вытягивая их из линейки - Rules), выделив каждый элемент будущего меню в отдельный слайс;
· Создайте слайсы (Slices--»Create Slices from Guides);
Cовет: в свитке Slice задайте имя (name) будущему элементу меню - это поможет вам разобраться в том коде, который для вас "сам напишет" ImageReady, если у вас возникнет такая необходимость. · Создайте дубликаты тех слоев, на которых находятся ваши элементы навигации (правой кнопкой мыши клик на слое с кнопкой - выбираете Duplicate Layer);

	-menu1Over (Layer1 copy)
	-menu2Over (Layer2 copy)
	-menu3Over (Layer3 copy)

· Измените картинки на слоях menu1Over (Layer1 copy), menu2Over (Layer2 copy), menu3Over (Layer3 copy) так, как это планируется по дизайну сайта, допустим, добавив эффект для слоя. Если ваше навигационное меню имеет много пунктов (и, соответственно, много слоев), удобно применить эффект для одного слоя, подобрать параметры этого эффекта, скопировать (кликните правой кнопкой мыши на слое, где эффект уже применен, Copy Effects) и применить этот эффект со всеми настройками ко всем остальным слоям с картинками наших будущих Overs (Past Effects) - таким образом у вас нет необходимости запоминать все параметры эффекта или набора эффектов для всех остальних слоев.
· Когда вы подготовили все заготовки для навигационного меню, можно приступать к генерации RollOvers; Включите все слои (Visible) для тех изображений, которые должны быть видимы на страничке, когда она загружена. Все слои с изображениями menu1Over (Layer1 copy), menu2Over (Layer2 copy), menu3Over (Layer3 copy) сделайте невидимыми (отключите для них свойство Visible).
· Инструментом "Выбрать слайс"

запустите из меню Window--»Show Rollover – вы видите свой первый ролловер с одним только состоянием Normal. rollovers

Внизу на панельке ролловеров пиктограмма – такая же как на панели Layers для создания нового слоя. Нажмите – и вот у вас уже есть второе состояние – Over – т.е. кнопка активизировалась, когда вы провели над ней мышой. Теперь измените вид этого слайса, в нашем примере необходимо для этого отключить свойство Visible для слоя Layer1 и включить Visible для уже подготовленного слоя Layer1 copy; Таким образом вы можете менять изображения ваших элементов меню в рамках состояний Normal, Over, Down, Click, Out, Up, None. Конечно же, желательно каждому Slice задать не только имя, но и ссылку (абсолютную или относительную), alt-тег и таргет. Когда все готово – оптимизируйте и запоминайте полученный шедевр (File--»Save Optimized As), и не забудьте включить check box для Save HTML File и Save Images и дать имя папке, где будут лежать ваши картинки (например, традиционное Images). Имейте ввиду, что картинок будет тем больше, чем больше событий назначаете вы кнопкам.

Откройте полученный .html в редакторе – вы увидите, IR сгенерировал работающий код с обработкой событий, регистрацией и загрузкой картинок:

При этом в тег будет вставлена функция onload="preloadImages();", a элемент навигации, для которого создавался RollOver будет выглядеть примерно так:


<a href="ваша ссылка"
onmouseover="changeImages('menu1', 'images/menu1_over.gif'); return true;"

onmouseout="changeImages('menu1', 'images/menu1.gif'); return true;">
<img name="menu1" src="images/menu1.gif" width="ваш размер" height="ваш размер" border=0 alt="альт вашей картинки - если задан"></a>

и вы получили безупречный html-код со всеми интерактивными элементами навигации!

Удачных вам интерактивных навигационных меню!

Статьи по теме:

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Об Adobe Image Ready (часть 2 - RollOvers)