Як створити заміни з кількома зображеннями в Dreamweaver

Перш ніж почати створювати більш складний дизайн сторінки за допомогою поведінки Dreamweaver Swap Image, подивіться на готову сторінку. За допомогою поведінки Swap Image ви можете замінити будь-які або всі зображення на сторінці.

Коли ви використовуєте поведінку «Поміняти зображення», важливо, щоб усі зображення, які ви будете змінювати, однакового розміру (висота та ширина). Якщо зображення не однакового розміру, усі зображення, крім першого, будуть розтягнуто або стиснуто, щоб помістити місце, яке займає перше зображення, вставлене на сторінку.

Якщо ви використовуєте поведінку «Поміняти зображення» з серією зображень, які не мають однакової висоти та ширини, у вас є кілька варіантів:

Обріжте більші зображення, щоб усі зображення були однакового розміру.

Зробіть так, щоб горизонтальні та вертикальні зображення займали однаковий простір у вашому дизайні, об’єднавши два вертикальні зображення для кожного горизонтального. Просто створіть файл у такій програмі, як Photoshop, вставте два вертикальні зображення в один і той самий файл поруч, а потім розмір цього зображення так, щоб файл був такого ж розміру, як і одне горизонтальне зображення.

Створіть один файл зображення розміром з найбільше зображення, встановіть нейтральний колір фону, наприклад чорний або білий, а потім вставте всі інші зображення на фон, щоб ви могли зберегти їх усі з однаковим розміром файлу.

Виконайте наведені нижче дії, щоб використовувати поведінку Swap Image:

1Створіть дизайн сторінки з усіма зображеннями, які ви хочете спочатку відображати.

Кожна з трьох фотографій у дизайні сторінки Тауерського мосту в Лондоні має дві копії: одну мініатюру та одну збільшену версію. Коли сторінка вперше завантажується у веб-браузері, усі три ескізи розташовуються внизу сторінки, а перша з відповідних більших версій відображається в головній області трохи вище ескізів.

2 Назвіть свої зображення в інспекторі властивостей.

Щоб націлити зображення за допомогою JavaScript, а саме так працює поведінка, спочатку надайте кожному зображенню унікальний ідентифікатор. Ідентифікатор зображення не збігається з назвою файлу зображення чи текстовим тегом, хоча ви можете використовувати ті самі або схожі імена. Ідентифікатори зображень не повинні містити пробілів або будь-яких спеціальних символів.

3 Виберіть «Вікно»→ «Поведінка».

Відкриється панель поведінки. Ви можете перетягнути панель «Поведінки» в інше місце на сторінці, а також розгорнути її, перетягнувши її нижню частину або бічну частину. Ви також можете закрити будь-які інші відкриті панелі, щоб звільнити простір, натиснувши темно-сіру панель у верхній частині будь-якої панелі.

4 Виберіть зображення.

Виберіть зображення на сторінці, яке послужить тригером для дії.

5 Виберіть поведінку Swap Image.

Вибравши зображення активатора в робочій області, клацніть знак «плюс» на панелі «Поведінка», щоб відкрити розкривний список дій, і виберіть дію, яку потрібно застосувати.

6 У діалоговому вікні «Поміняти зображення» вкажіть зображення для заміни.

У списку Зображення виберіть ідентифікатор зображення, яке буде замінено. Натисніть кнопку Огляд, щоб вибрати зображення, яке замінює основне зображення. Якщо зображення ще не збережено в папці локального сайту, Dreamweaver запропонує скопіювати його туди для вас.

7У нижній частині діалогового вікна «Поміняти зображення» виберіть параметр «Попереднє завантаження зображень», щоб наказати браузеру завантажити всі зображення в кеш під час завантаження сторінки.

Якщо ви не виберете цей параметр, може виникнути затримка під час використання заміни зображення.

8Якщо хочете, зніміть прапорець «Відновити зображення OnMouseOut».

Параметр «Відновити зображення OnMouseOut» означає, що після завершення події (наприклад, коли миша відсувається від мініатюри, що запускається), вихідне зображення замінюється. За замовчуванням Dreamweaver попередньо вибирає цей параметр для поведінки Swap Image. Ви можете скасувати цей параметр, якщо ви вважаєте, що заміна вихідного зображення щоразу, коли ви наводите курсор на іншу мініатюру, відволікає.

9 Після того, як ви вкажете всі параметри поведінки, натисніть OK.

Нова поведінка з’явиться на панелі «Поведінки».

10 Укажіть подію для поведінки.

Після застосування дії ви можете повернутися назад і вказати, яка подія ініціює дію. За замовчуванням Dreamweaver застосовує подію OnMouseOver, коли ви використовуєте дію «Змінити зображення», але ви можете змінити цю подію на будь-яку доступну, наприклад OnClick, яка вимагає, щоб користувач клацнув зображення, щоб ініціювати дію «Змінити зображення».

11 Застосовуйте додаткову поведінку.

Щоб застосувати поведінку «Поміняти зображення» до інших зображень на сторінці, повторіть кроки 5–10, клацнувши, щоб вибрати зображення, яке ви хочете використовувати як тригер, а потім вказавши відповідне зображення, яке потрібно поміняти місцями.

12 Перевірте свою роботу в браузері.

Ви не зможете побачити наслідки такої поведінки, доки не натиснете кнопку «Перегляд у реальному часі» у верхньому лівому куті робочого простору Dreamweaver або не переглянете свою сторінку у веб-браузері.