2. Создание карты ссылок на изображении

Для организации ссылок с изображения возможно использование так называемых карт изображений. При этом ссылка создается не со всего изображения в целом, а с отдельных областей (одной или нескольких).

Для создания карты ссылок необходимо выделить на изображении активные области (hotspot). В Dreamweaver можно создавать области трех видов - прямоугольные , круглые и произвольной конфигурации . Для этого нужно нажать одну из кнопок и при помощи мыши выделить необходимую область на изображении. Параметры активной области будут отображены на панели свойств (рис 1.3).

Рисунок 1.3 - Параметры активной области на карте изображения

Поле Map указывает имя карты, к которой относится данная область. Поля Link и Target задают, как обычно, параметры ссылки, а поле Alt -альтернативный текст. Для добавления дополнительных областей нужно выбрать необходимый инструмент выделения и повторить описанные действия. Созданные области можно перемещать по изображению, удерживая левую кнопку мыши.

Созданные ранее активные области можно редактировать: передвигать и изменять их размеры. Так же можно копировать изображения с активными областями из одного документа в другой - их параметры при этом сохраняются. Можно копировать активные области с одного изображения на другое. Для выполнения какой-либо операции над областью необходимо выделить ее. Для этого предназначен инструмент Pointer Hotspot Tool .

.

3. Вставка изменяющегося изображения

Для создания изображений, изменяющих свой вид при прохождении курсора мыши, используется скрипт Rollover Image.

Для вставки изменяющегося изображения необходимо кнопку Images на панели объектов и в открывшемся списке выбрать Rollover Image (рис. 1.1) или выполнить команду Insert=>Image Objects=>Rollover Image.

В диалоговом окне (рис. 1.4) необходимо указать имена файлов, которые будут использоваться при работе изменяющегося изображения: Original image - путь к начальному файлу с изображением, Rollover image - путь к файлу с изображением, которое будет появляться, когда курсор мыши окажется над областью изображения.

Рисунок 1.4 - Диалоговое окно для настройки скрипта Rollover Image

Имя интерактивного элемента (Image name) используется при работе скриптов. Если не предусматривается взаимодействие с этим объектом или изменение алгоритмов работы скриптов, то имя можно оставить заданным по умолчанию.

Если включить флажок Preload rollover image, то в HTML-документ будет вставлен скрипт для предварительной загрузки файлов с изображениями в кэш­память браузера.

Изменяющееся изображение можно сделать ссылкой, если в поле When clicked, Go to URL указать адрес Internet-ресурса.

4. Определение интерактивных свойств объектов

Практически любой объект HTML-документа можно сделать интерактивным. Любой участок текста, любое изображение, ячейки таблиц и слои могут изменять свои свойства при выполнении учеником каких-либо действий на клавиатуре или мышью. Изменение свойств объектов осуществляется с помощью программ на языке JavaScript. Благодаря тесной интеграции с форматом HTML, программы на языке JavaScript могут получить доступ к свойствам всех объектов HTML-страницы. А использование технологии событийного программирования позволяет отслеживать события, происходящие на HTML-странице, и выполнять те или иные действия.

HTML-редактор Dreamweaver с помощью специального инструмента Behaviors позволяет управлять поведением объектов в зависимости от происходящих на странице событий, а также предоставляет набор готовых, часто используемых скриптов.

Вызов окна инструмента Behaviors выполняется по команде Window=>Behaviors.

Выделив объекты, поведение которых будет изменяться в зависимости от происходящих событий, в окне Behaviors (рис. 1.5) необходимо указать, какие действия (Actions) будут выполняться после возникновения того или иного события (Events). Параметры управления поведением элемента станицы будут, в конечном итоге, установлены для соответствующего тега HTML. Имя текущего выделенного в поле документа тега отображается в заголовке окна Behaviors (рис. 1.5). Если для одного и того же события было назначено несколько реакций, то они перечисляются в порядке своего выполнения.

Рисунок 1.5 - Окно для определения поведения объектов и назначения реакции на события

Кнопку следует использовать для назначения действия, применимого к выделенному объекту, а кнопку - для отмены назначенного ранее действия. Порядок выполнения действий можно изменить с помощью кнопок и .

Список основных заранее предусмотренных действий перечислен в таблице 1.1. Список основных событий, после которых можно назначить выполнение определенных действий, перечислен в таблице 1.2. Рассмотрим назначение некоторых из них.

Таблица 1.1 - Список основных действий

Call JavaScript	вызов любой программы на JavaScript
Change Property	изменение свойств любого объекта
Check Browser	проверка версии браузера
Check Plugin	проверка наличия Plugin на Web-клиенте
Drag Layer	перемещение слоя
Go to URL	переход к другому файлу или Internet-ресурсу
Open Browser Window	создание нового окна с заданными параметрами
Play Sound	вставка в документ звуковых фрагментов
Popup Message	вывод окна с сообщением
Preload Images	предварительная загрузка изображений в кэш­память браузера
Set Nav Bar Image	изменение свойств навигационной панели
Set Text of Frame	динамический вывод HTML-текста во фрейм
Set Text of Layer	динамический вывод HTML-текста в слой
Set Text of Status Bar	динамический вывод текста в строку состояния
Set Text of Text Field	динамический вывод текста в текстовое поле
Show-Hide Layers	показать/скрыть слои
Swap Image	изменить изображение
Swap Image Restore	восстановить измененное изображение
Validate Form	проверка соответствия типа данных, введенных в поля формы

Таблица 1.2 - Список основных действий

onLoad	Загрузка документа завершилась
onAbort	Пользователь остановил загрузку документа
onError	Ошибка при загрузке документа
onUnload	Пользователь завершил просмотр и переходит к другому документу
События окна браузера
onResize	Размеры окна или фрейма изменились
onMove	окно или фрейм перемещается по экрану
onScroll	Пользователь прокручивает документ
OnHelp	Пользователь выбрал пункт меню Help в окне браузера
События на клавиатуре
OnKeyDown	Пользователь нажал клавишу на клавиатуре
OnKeyUp	Пользователь отпустил клавишу на клавиатуре
OnKeyPress	Пользователь нажал и отпустил клавишу на клавиатуре
События на мыши
OnClick	над объектом сделан щелчок кнопкой мыши
OnDblClick	над объектом сделан двойной щелчок кнопкой мыши
OnMouseDown	над объектом нажата кнопка мыши
OnMouseUp	Кнопка мыши отпущена над объектом
OnMouseMove	курсор мыши движется над объектом
OnMouseOut	курсор мыши вышел за границы объекта
OnMouseOver	курсор мыши вошел в пределы объекта
События на элементах управления
OnReset	Очистка значений элементов формы по кнопке Reset
OnSubmit	Подтверждение значений полей элементов формы по кнопке Submit
OnBlur	Элемент управления теряет фокус
OnFocus	Элемент управления получает фокус
OnChange	Изменилось содержимое элемента управления
OnSelect	Пользователь выделил участок текста

Действие Go To URL

Для выполнения переходов не по гипертекстовым ссылкам, а по определенным событиям можно использовать действие Go To URL. При назначении этого действия необходимо заполнить диалоговое окно, представленное на рисунке 1.6.

Рисунок 1.6 - Окно для определения поведения объектов и назначения реакции на события

В списке Open in необходимо выбрать имя окна или фрейма (по умолчанию в этом же окне Main window), в котором открывать Internet-ресурс, расположенный по адресу, указанному в поле URL.

Действие Open Browser Window

Скрипт Open Browser Window предназначен для создания нового окна, в которое будет загружен указанный Internet-ресурс. Диалоговое окно для настройки работы этого скрипта представлено на рисунке 1.7.

Рисунок 1.7 - Диалоговое окно для настройки скрипта Open Browser Window

В поле URL to display задается адрес Internet-ресурса или имя файла, который должен быть открыт в новом окне браузера (путь к файлу можно также указать по кнопке Browse...). В полях Window width и Window height задаются ширина и высота нового окна. Группа элементов управления Attributes определяет наличие у нового окна навигационной панели инструментов (Navigation toolbar), меню (Menu bar), строка адреса (Location toolbar), полос прокрутки (Scrollbar as needed), строки состояния (Status bar). Флажок Resize handles определяет возможность изменения размеров нового окна браузера. В поле Windows name можно указать имя окна для использования в других скриптах.

Действие Play Sound

Скрипт Play Sound позволяет вставить в документ звуковые фрагменты. На диалоговом окне для настройки скрипта (рис. 1.8) в поле Play sound необходимо указать имя звукового файла. Путь звуковому файлу можно указать с использованием кнопки Browse...

Рисунок 1.8 - Диалоговое окно для настройки скрипта Play Sound

Действие Popup Message

Для вывода небольшого диалогового окна с сообщением можно воспользоваться готовым скриптом Popup Message. Для настройки этого скрипта на диалоговом окне (рис. 1.9) в поле Message необходимо ввести текст сообщения, который будет отображаться при выводе окна.

Рисунок 1.9 - Диалоговое окно для настройки скрипта Popup Message