Ролловер - це зображення, яке змінюється на інше зображення, коли ви або ваш клієнт наводите на нього покажчик миші. Вони зазвичай використовуються для створення інтерактивного відчуття, такого як кнопки або вкладки. Але ви можете створювати ролловери з усього, що завгодно.
Це керівництво призначене для того, щоб допомогти вам створити зображення ролловера в Dreamweaver. Він призначений для використання людьми, які використовують такі версії Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Вимоги для цього уроку
- Dreamweaver
Одна з версій, перерахованих вище. - Вихідне зображення Обов'язково
оптимізуйте зображення. Це допоможе вашим сторінкам завантажуватися швидше. - Зображення під час перегортання
Це зображення має бути того ж розміру, що і вихідне зображення. І, як і оригінальне зображення, слід оптимізувати час завантаження сторінки. - Веб-сторінка Це
HTML-сторінка, на яку ви помістите своє зображення ролловера.
Почати
- Запустити Dreamweaver
- Відкрийте веб-сторінку, де ви хочете, щоб ваш ролловер
Вставте об'єкт зображення Rollover
Dreamweaver дозволяє легко створювати ролловери.
- У меню «Вставка» перейдіть до підменю «Об'єкти зображення».
- Виберіть Image rollover або Rollover image.
Деякі старі версії Dreamweaver замість цього називають об'єкти зображень «Інтерактивні зображення».
Скажіть Dreamweaver, які зображення використовувати
Dreamweaver відкриває діалогове вікно з полями, які необхідно заповнити, щоб створити зображення для ролловера.
Назва зображення
Виберіть назву зображення, яке є унікальним для сторінки. Це має бути все одне слово, але ви можете використовувати цифри, підкреслення (_) і дефіси (-). Це буде використано для ідентифікації зображення для зміни.
Вихідне зображення
Це URL або місце розташування зображення, яке буде починатися на сторінці. Ви можете використовувати відносні або абсолютні адреси URL у цьому полі. Це має бути зображення, яке існує на вашому веб-сервері або яке ви завантажите разом зі сторінкою.
Rollover Image
Це зображення, яке з'явиться, коли ви наведете курсор миші на зображення. Як і вихідне зображення, це може бути абсолютний або відносний шлях до зображення, і він повинен існувати або завантажуватися при завантаженні сторінки.
Prelo Rollover Image
Цей параметр вибрано за замовчуванням, оскільки він допомагає швидше показувати ролловер. Вибравши попереднє завантаження зображення ролловера, веб-браузер зберігатиме його в кеші до тих пір, поки миша не переверне його.
Альтернативний текст
Гарний альтернативний текст робить ваші зображення доступнішими. Ви повинні завжди використовувати якийсь тип альтернативного тексту при додаванні будь-яких зображень.
Після натискання кнопки миші перейдіть на адресу URL
Більшість людей натискають на зображення, коли бачать його на сторінці. Так що ви повинні мати звичку робити їх клікабельними. Цей параметр дозволяє вказати сторінку або URL-адресу, за якою користувач може перейти, коли клацне зображення. Але цей параметр не потрібен для створення ролловера.
Заповнивши всі поля, натисніть кнопку «OK», щоб Dreamweaver створив зображення для ролловера.
Dreamweaver пише JavaScript для вас
Якщо ви відкриєте сторінку в режимі перегляду коду, то побачите, що Dreamweaver вставляє блок JavaScript у < head > вашого HTML-документа. Цей блок включає 3 функції, які необхідно поміняти зображеннями при наведенні миші на них, і функцію попереднього завантаження, якщо ви вибрали це.
функція MM_swapImgRestore () функція
MM_findObj (n, d) функція
MM_swapImage () функція
MM_preloadImages ()
Dreamweaver Додає HTML для ролловера
Якщо ви вирішили, що Dreamweaver попередньо завантажить зображення ролловерів, ви побачите HTML-код в тілі документа, щоб викликати скрипт попереднього завантаження, щоб ваші зображення завантажувалися швидше.
OnLoad = ""MM_preloadImages ( 'shasta2.jpg')""
Dreamweaver також додає весь код для вашого зображення і пов'язує його (якщо ви вказали URL). Частина ролловера додається в тег прив'язки як атрибути onmouseover і onmouseout.
onmouseout = ""MM_swapImgRestore ()""
onmouseover = ""MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
Тест ролловера
Подивіться повністю функціональне зображення ролловера і дізнайтеся, що думає Шаста.