Rollover

Вы когда-нибудь делали графическое меню, которое в зависимости от манипуляций мышью выглядело по-разному? Тогда вы знаете, сколько неудобств связано с созданием для каждой кнопки отдельных файлов для каждого состояния: мышь над кнопкой, щелчок, мышь за пределами кнопки, и др. Знаете, какая бывает путаница, особенно если вы "адаптируете" скрипт вручную для своей страницы.

Photoshop позволяет создавать и сохранять кнопки и варинты для различных ее состояний в одном файле. Ничего нового. Те же слои. Но для каждого состояния можно сделать невидимым "лишний" слой, и при сохранении Photoshop автоматически выполнит сведение видимых слоев в каждом случае и сохранит все варианты в отдельные файлы и сгенерирует HTML-код, и вам почти ничего не придется делать.

Для работы нам понадобятся Photoshop и ImageReady. При написании статьи использовались последнии версии обеих программ.

Пример:

Я решил определить четыре различных состояния для будущей кнопки.

1. Normal - нормальное -  то, что будет видно сразу после загрузки страницы
2. Over - мышь над кнопкой
3. Down - нажата левая или правая кнопка мыши (и не отпущена)
4. Out - в таком виде кнопка будет после того, как курсор мыши выйдет за ее  границы, т.е. к состоянию Normal кнопка уже не вернется до следующей перезагрузки страницы.

Будьте внимательны, т.к. различные браузеры и различные их версии не одинаково обрабатывают разные события. Поэтому протестируйте результат в разных версиях.

Вот как все воплощалось технически.

Photoshop

Во вновь созданном файле размером 200 Х 200 пикслей я
 

1. Создал новый слой (Ctrl+Shift+N) с названием apple normal
     и нарисовал на нем нечто похожее на яблоко.
       
2. Затем сделал дубль слоя (Layer/Duplicate layer... Клавиатурного сокращения нету), обозвав его apple over, и попытался изобразить надкус.
      
3. По логике следующее состояние укушенного яблока - это огрызок. Технически он делался не простым урезанием предыдущего слоя, но в данном случае это не принципиально. Слой с огрызком носит имя apple down. 

 4. Ну и сюрприз, который ожидает многих ценителей яблок - большой червяк. Имя слоя apple out.

5. Теперь инструментом Slice Tool (см.) вырезаю яблоко.
       Эта область и будет кнопкой, а остальные части - статичные.

Отправляю результат в ImageReady нажатием кнопки на панели инструментов

ImageReady

Внизу на палитре открываю закладку Rollover и нажимая на кнопочку "create new rollover state", создаю четыре состояния:


 

Теперь поочередно нажимая мышью на пиктограмму каждого состояния, я на закладке Layers делаю невидимыми лишние слои из числа тех четырех, которые изображают нашу кнопку в разных видах. Т.е. для  Normal, видимым я оставил apple normal, для Over - apple over, и так далее. На закладке rollover, на пиктограммках отображаются изменения. Например, для состония Down закладка Layers (в ImageReady) выглядит так:

Для предварительного просмотра в браузере на панели инструментов есть кнопка:

Если вас все устраивает, то осталось только оптимизировать размер изображения и сохранить результат.

А вот то что получилось у меня (тестировалось в MSIE 5.5 и NC 4.7 - работает одинаково):

© 2000, Виталий Чупаев