Photoshop 4-5 - учебный курс

       

Кнопки с двумя фиксированными состояниями


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

Я не собираюсь в этой книге углубляться в дебри JavaScript, но поместил фрагмент описания Web-ресурсов в кодах данного языка (позаимствованный с Web-узла издательства Hayden - http://www.hayden.com) на сопроводительный компакт-диск. Этот фрагмент, если его включить в HTML-документ, обеспечит в нужный момент замену одного изображения кнопки на другое.

Основная идея состоит в том, что, если после загрузки документа в броузер "несчастная жертва", обратившаяся к вашему Web-узлу, укажет курсором на какую-то из кнопок или на иной элемент оформления, связанный со сценарием JavaScript, броузер будет знать, что следует вывести на экран другой вариант изображения этой кнопки или элемента оформления.

Иными словами, в момент размещения указателя мыши над одним из объектов, специально описанных в документе, броузер выводит на экран другой вариант изображения этих участков. Обычно, поскольку изображения малы по размерам, это происходит очень быстро, так что кнопка меняет вид, имитируя эффект нажатия.

Первое, что следует сделать, - это изменить вид кнопки так, чтобы у вас получилось два варианта ее графического образа: в обычном и в активном ("нажатом") состоянии.

Существует множество способов изменения внешнего вида кнопки, но в данном случае воспользуемся следующим:

  • Если вы не закончили предыдущее упражнение, откройте файл Button.jpg, помещенный на сопроводительный компакт-диск.
  • Увеличьте масштаб изображения примерно до 300%, чтобы лучше видеть то, что будете делать.
  • Выберите инструмент Волшебная палочка (Magic Wand), показанный на рис. 14.42.

  • Рис. 14.42. Инструмент Волшебная палочка (Magic Wand)

  • Щелкните на белом поле изображения. Все оно будет выделено, как показано на рис. 14.43.

  • Рис. 14.43. Выделение фона инструментом Волшебная палочка (Magic Wand)

  • Выберите команду меню Выделение - Инверсия (Select - Inverse). Результат показан на рис. 14.44.


  • Содержание раздела