В предыдущей главе мы рассмотрели технологию DHTML, которая позволяет создавать различные элементы интерактивности без использования специализированных программ, выполняющихся на стороне сервера. Следует отметить, что Adobe GoLive позволяет создавать подобные сценарии, пользуясь, в частности, технологией Active Server Pages (ASP), но для ее применения следует все же быть квалифицированным программистом. Поэтому в этой главе мы рассмотрим вопросы создания интерактивных элементов, пользуясь встроенными средствами Adobe GoLive.
Начнем с изображений, которые могут менять свой внешний вид, когда пользователь наводит на них курсор мыши. Для таких изображений существует англоязычный термин — rollover. В качестве русскоязычной замены мы будем использовать термин динамическое изображение.
Естественно, динамическое изображение включено в состав основных объектов Adobe GoLive. Анимационный эффект возникает, когда браузер переключается между двумя (или тремя) различными вариантами одного и того же изображения. Вы можете легко создать эти изображения в программах типа Adobe Photoshop.
Внимание
Изображения должны быть точно одного и того же размера, иначе вы не получите соответствующего результата во всех браузерах. Первый вариант определяет стандартный внешний вид изображения, т. е. то, как оно выглядит, пока указатель мыити находится где-нибудь в другом месте страницы. Второй вариант обычно является подсвеченной версией изображения, которое отображается, когда указатель мышки находится на нем. Третий вариант изображения появляется, когда пользователь производит на нем щелчок мышью.
Естественно, реализуются подобные динамические изображения при помощи JavaScript. Следует также отметить, что эффект изменения изображения будет работать только когда будут загружены все версии изображения.
Чтобы создать динамическое изображение, перетащите с помощью мыши пиктограмму Rollover (Динамическое изображение) с панели Smart (Разумные объекты) палитры объектов в ваш документ. Основные параметры динамического изображения задаются при помощи палитры Inspector (Инспектор), вид которого показан на рисунке 8.1.