Изменение графического изображения (Swap Image). Восстановление всех изначальных изображений (Swap Image Restore).

Dreamweaver предоставляет вам возможность изменить рисунок, отображающийся в любом имеющемся на странице элементе графического изображения. Для этого используется поведение swap image; специальный Web-сценарий меняет значение атрибута SRC тега <IMG>. Это будет полезно во многих случаях.

Выберите пункт Swap Image меню поведений. На экране появится диалоговое окно Swap Image, показанное на рис. 13.32.

Рис. 13.32. Диалоговое окно Swap Image

Все имеющиеся на странице графические изображения перечислены в списке Images. Выберите нужное. После этого введите имя файла нового изображения в поле ввода Set Source to; также вы можете нажать кнопку Browse и выбрать нужный файл в появившемся на экране диалоговом окне Select File.

Если вы хотите изменить сразу несколько изображений, выполните вышеприведенную последовательность действий для всех нужных элементов. Созданный Dreamweaver Web-сценарий выполнит все эти замены одновременно.

Если включен флажок Preload Images (а он включен по умолчанию), Dreamweaver создаст еще один сценарий, выполняющий предварительную загрузку нужных файлов изображений. (Фактически для этого он создаст поведение Preload images.) Если вы отключите этот флажок, то сами должны будете выполнить их предзагрузку, либо мириться с задержками при изменении изображений.

Если вы привязываете поведение swap image к событию onMouseOver, то Dreamweaver автоматически создаст поведение swap image Restore, восстанавливающее все изначальные изображения, и привязывает его к событию onMouseOut. Если вы не хотите, чтобы он так делал, отключите флажок Restore Images onMouseOut.

Закончив работу, нажмите кнопку ОК.

Восстановление всех изначальных изображений (Swap Image Restore)

Если вы хотите после вызова поведения swap image восстановить изображения, отображавшиеся на странице изначально, создайте поведение Swap image Restore. Для этого выберите пункт Swap Image Restore меню поведений. На экране появится небольшое окно-предупреждение; нажмите кнопку ОК, чтобы закрыть его. Нажатие кнопки Cancel позволит вам отказаться от создания этого поведения.

Внимание
Создавать поведение Swap image Restore можно только после создания поведения Swap Image.

Написание своих Web-сценариев. Особые случаи создания поведений. Привязка поведений к тексту.

Как видите, Dreamweaver предлагает достаточно ограниченный набор поведений и, стало быть, Web-сценариев, которые могут быть созданы на страницах. Конечно, они покрывают 95% нужд начинающего и даже опытного Web-дизайнера, и у вас, возможно, очень и очень нескоро появится потребность писать JavaScript-код самим. И все же…

Но вспомните, что Dreamweaver – гибридный Web-редактор! Он предоставляет не только удобный интерфейс для визуального создания и редактирования Web-страниц, но и такой же удобный доступ к их исходному HTML-коду. Поэтому вы можете без труда "вписать" туда свои сценарии, реализующие все, что вашей душе угодно. Правда, Dreamweaver в этом случае никак облегчить вашу работу не сможет…

Особые случаи создания поведений

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

Привязка поведений к тексту

Мы знаем, как привязать поведение к элементу страницы, например гиперссылке или графическому изображению. Но что делать, если мы хотим привязать его, к фрагменту текста в абзаце?

Если вы готовы пожертвовать совместимостью с Navigator, можете использовать такой прием:

<P>Это <SPAN onClick="doSomething();">текст, по которому можно щелкать</span>.</P>

function doSomething() {Что-тоделаем… }

Как видите, нужный фрагмент текста выделен тегом <SPAN> и привязан к этому тегу обработчик события onclick. Это работать будет, но только в Internet Explorer. Этот Web-обозреватель предоставляет Web-программисту доступ к любому элементу страницы и, соответственно, может обрабатывать события, происходящие в них.

Это можно сделать и в среде Dreamweaver, воспользовавшись диалоговым окном Tag Chooser. Выделите нужный фрагмент текста и выберите пункт Tag меню Insert или нажмите комбинацию клавиш CTRL + E. В левом списке окна Tag Chooser разверните ветвь HTML Tags и выберите пункт Formatting and Layout, далее выберите в правом списке пункт span и нажмите кнопку Insert. После этого выделенный вами фрагмент текста будет "взят" втег<SPAN>. Вы можете поставить в него текстовый курсор и привязать к нему любое поведение.

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

<FONT SIZE="+2" onClick="doSomething();">Это текст, по которому можно щелкать.</FONT>

И в этом случае Dreamweaver придет вам на помощь. Вам останется только поставить текстовый курсор на нужный текст и создать поведение.

Но это будет работать только в Internet Explorer.

У Navigator поддержка Web-программирования значительно ограничена. Он дает доступ к ограниченному набору элементов: гиперссылкам, графическим изображениям, внедренным элементам, фреймам, свободно позиционируемым элементам и еще кое-чему. К обычным абзацам текста и уж тем более элементам <SPAN> нашему брату Web-программисту путь заказан.

Что делать?

Есть один способ. Если уж Navigator требует гиперссылки, дадим ему гиперссылку.

Взгляните на следующий код:

<P>Это <A HREF="javascript:;" onClick="doSomething();">текст, по которому можно щелкать</A>.</P>

Мы преобразовали нужный нам фрагмент текста в гиперссылку, привязали к ней обработчик события onclick. В качестве значения интернет-адреса мы задали "javascript:;", чтобы Web-обозреватель при щелчке по такой гиперссылке никуда не переходил. Можете проверить – такой код будет работать и в Internet Explorer, и в Navigator.

Чтобы созданная нами гиперссылка совсем уж не походила на гиперссылку, вы можете вставить в Тег<А> стиль. Задайте атрибуту стиля text-decoration значение попе, чтобы отключить подчеркивание, а атрибуту color – значение цвета вашего текста. И пусть после этого кто-нибудь скажет, что это гиперссылка!

Конечно, все вышеописанные манипуляции вы можете выполнить и в среде Dreamweaver. Вы можете ввести текст javascript:; в поле ввода Link редактора свойств, поставить в только что созданную гиперссылку текстовый курсор и воспользоваться панелью Behaviors. Автор описал все это в HTML, чтобы вам было понятнее.

Поведения и анимации

Вы познакомились с двумя, можно сказать, "детищами" Dreamweaver: анимацией и поведением. Они называются так потому, что не являются возможностями ни HTML, ни JavaScript, ни объектной модели документа DOM. И анимация, и поведения "придуманы" самим Dreamweaver, чтобы помочь вам создавать сложные Web-сценарии, решающие весьма непростые задачи. Вы работаете с анимациями и поведениями, используя удобный интерфейс Web-редактора, создаете их, изменяете и удаляете, а Dreamweaver за вашей спиной выполняет над кодом довольно сложные действия.

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

Давайте еще раз откроем панель Timelines, выбрав пункт Timelines подменю Others меню Window, или иным способом. И еще раз посмотрим на нее (см. рис. 12.1). Над серой линейкой с отметками времени (в кадрах) вы можете увидеть еще один канал анимации, пока еще нами не использованный. Это канал поведений. Он обозначен буквой В, от англ, behavior – поведение.

Чтобы привязать к какому-либо кадру анимации поведение, сначала выберите необходимый кадр в канале поведений. В результате этот кадр будет выделен черным. Далее выберите в меню поведений нужный пункт, например, Show-Hide Layers. Как обычно, на экране появится диалоговое окно задания параметров выбранного поведения, в нашем случае – Show-Hide Layers. Введите параметры и нажмите кнопку ОК. И поведение, привязанное к кадру анимации, будет создано.

Против соответствующего кадра анимации в канале поведений появится небольшой значок (рис. 13.33). А в списке панели Behaviors – новое поведение, привязанное к событию оnFramе<номер кадра> (рис. 13.34). Такого события в объектной модели документа не предусмотрено; Dreamweaver сам создал его так же, как создал анимации и поведения.

Рис. 13.33. Кадр анимации в канале поведений, к которому привязано поведение

Рис. 13.34. Поведение, привязанное к кадру анимации, в списке панели Behaviors

Таким образом, вы можете создать сколько угодно поведений, привязанных к кадрам анимации. Чтобы просмотреть поведения, привязанные к какому-либо кадру, просто выберите его в канале поведений панели Timelines. Имейте в виду, что выбирать можно только кадры, помеченные знаком, показанным на рис. 13.33. Также вы можете привязать к одному кадру несколько поведений, просто добавив их в список поведений при выбранном кадре.

Вы можете изменить параметры привязанного к кадру анимации поведения, дважды щелкнув по соответствующей строке в списке поведений. Чтобы удалить ненужное поведение, либо удалите его из списка поведений, либо используйте пункт Remove Behavior контекстного меню панели Timelines или одноименный пункт подменю Timeline меню Modify.

Вы можете удивиться, почему автор не использовал для создания поведений пункт Add Behavior контекстного меню панели Timelines. (Кроме того, в подменю Timeline меню Modify есть пункт Add Behavior to Timeline.) Если вы выберете этот пункт, Dreamweaver выведет на экран предупреждение, предлагающее вам воспользоваться для создания поведения тем самым путем, который мы описали. Зачем разработчикам Dreamweaver это понадобилось, непонятно.

Ну, вот и все о создании поведений и о написании Web-сценариев вообще. Поговорим о следующем, последнем шаге работы над любой программой – об отладке.