Перш ніж приступати до нашого уроку присвяченому створенню ролловеров, давайте розберемося, що таке ролловер?
Подивіться на малюнок, що ви на ньому бачите?
Правильно, звичайну напис, а тепер спробуйте курсор миші розмістити над рісунком.Что сталося? Малюнок змінив свій зовнішній вигляд тобто він відреагував на дії користувача. Виходить, що ролловер це малюнок змінює свій зовнішній вигляд при наведенні курсору миші? Не зовсім так, подивися на напис нижче:
"Це теж ролловер!"
Виходить, що ролловер, це елемент Web-сторінки змінює свій зовнішній вигляд при наведенні курсору миші? Мушу вас розчарувати - це визначення теж не вірно. Погляньте на напис нижче.
"Я теж ролловер"
З напису слідства, що це теж ролловер, але при наведенні курсору миші він ніяк на це не реагує. А тепер спробуйте клацнути на написі мишею, що сталося? Навколо написи з'явилася червона рамка. Навіть якщо тепер прибрати від напису курсор миші, він не набере початкового вигляду. Для того, щоб повернути нашу напис в початковий стан треба зробити повторне клацання на ролловеров. З усього сказаного ми робимо висновок, що ролловер може реагувати не тільки на рух миші, але і на щелчек мишею.
Отже, що ж все-таки ролловер. Ролловер - це елемент Web-сторінки змінює свій зовнішній залежно від зовнішнього впливу.
Як правило, на практиці частіше застосовують ролловеров реагують на рух миші. Саме такий ролловер ми і спробуємо створити на цьому уроці. В якості вихідного стану ролловера ми використовуємо невеликий малюнок (див. Нижче), який буде виконувати роль кнопки навігації.
Як ви ведете, на малюнку зображений кіт, якщо я не помиляюся це Джеррі, але це абсолютно не важливо. Важливо інше, під яким ім'ям зберегти цей малюнок. Якщо ви плануєте розмістити свій сайт в глобальній мережі Інтернет, то необхідно малюнку присвоїти ім'я складається з латинських символів в нижньому регістрі. Справа в тому, що інакше у вас можуть виникнути проблеми з розміщення файлів на сервері надає хостинг. Отже, вихідний малюнок я зберігаю під ім'ям cat_up, зверніть увагу, що ім'я файлу має смислове навантаження і в ньому відсутня пробіл. Використовувати пробіл в іменах файлу не можна, по вище зазначеної причини.
Другий малюнок (див. Малюнок нижче) у нас відрізняється від першого лише більш світлим фоном картинки, наша мета отримати ефект підсвічування картинки при наведенні курсору миші.
Після того, як обидва малюнки готові і інтегровані в наш сайт, можна приступати до роботи.
Додайте вихідний малюнок в будь-якому місці Web-сторінки і виділяємо його шелчка лівої кнопки миші. Далі в меню "Формат" виберіть пункт "Динамік HTML еффкт", після цього на екрані з'явитися відповідна панель (якщо він не була запущена раніше) складається з трьох випадають меню.
Використовуючи миша, в першому випадаючому меню вибираємо подія на яке буде реагувати наш ролловет. Як ми вже вирішили, цією подією буде розміщення курсору миші над малюнком, тому ми вбираємо пункт "Рух миші".
У другому випадаючому меню ми вибираємо ефект який відбудеться при наведенні миші на ролловер. В принципі, в даному випадку нам і вибирати те нічого не приходиться тому пункт всього один "Поміняти картинки". Природно його ми і вибираємо клацанням миші.
У третьому випадаючому меню у нас знову немає альтернативи і ми вибираємо єдиний пункт "Вибір картинки.". Після того як відкриється вікно вибору малюнка, ми знаходимо наш файл з ім'ям cat_over і робимо на ньому подвійний щелочек миші.
Зробіть самостійно. В даному уроці було описано створення ролловера на основі малюнка. Самостійно спробуйте виготовити ролловер на основі фрагмента тексту, використовуючи в якості зразка вище наведені приклади.
Якщо у вас виникли питання, то ви їх можете задати на форумі. Свої зауваження та побажання по урокам FrontPage залишайте в гостьовій книзі.