Як створити просте зображення для перекидання в Dreamweaver

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

Ви можете створити складніші ефекти зображення при наведенні на екран за допомогою параметра «Змінити зображення» на панелі «Поведінка». Параметр «Поміняти зображення» дозволяє змінювати декілька зображень одночасно.

Щоб створити простий ефект перемикання з двома зображеннями за допомогою діалогового вікна «Вставити зображення прокрутки» Dreamweaver, виконайте такі дії:

Помістіть курсор на сторінку, де ви хочете, щоб відображався курсор.

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

Виберіть «Вставка»→ «Зображення» → «Перевернути зображення».

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

З’явиться діалогове вікно «Вставити зображення перекидання».

У полі Ім’я зображення введіть назву свого зображення.

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

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

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

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

Знову ж таки, ви можете використовувати кнопку «Огляд», щоб знайти та вибрати зображення.

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

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

У полі Альтернативний текст введіть опис зображень.

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

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

Якщо ви не вкажете URL-адресу, Dreamweaver автоматично вставить знак # як заповнювач у код.

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

Натисніть кнопку OK.

Зображення автоматично налаштовуються як перемикання.

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

Ви можете побачити, як працює ваше переведення в режимі перегляду Dreamweaver або за допомогою параметра Live view. Коли ви натискаєте кнопку Live у верхньому лівому куті робочої області, ви по суті перетворюєте Dreamweaver у веб-браузер, який відображає сторінки, схожі на браузер Chrome.

Під час попереднього перегляду сторінки на своєму комп’ютері, яка містить зображення при наведенні курсора, деякі веб-переглядачі відображатимуть попередження про те, що ви повинні дозволити елементам керування ActiveX переглядати сторінку. Це попередження системи безпеки, яке з’являється лише тоді, коли сторінка відкривається на тому ж комп’ютері, де вона збережена.

Якщо ви публікуєте сторінку на веб-сервері, а потім переглядаєте її через Інтернет-з’єднання, ви та відвідувачі вашого сайту не побачите цю помилку.

Авторство: Ілюстрація від istockphoto.com