JavaScript: корисні функції

Mike Melnikov

Ефект, який ми зараз розглянемо, є, мабуть, найпоширенішим. І він полягає в зміні зображення при наведенні на нього мишкою. Часто можна чути англійська назва ефекту - RollOver, що зазвичай перекладають як "перекочування". Мені не здається ця назва вдалим, але все-таки, давайте приступимо.

Ефект може зустрічатися в різних варіантах, найпоширеніші з яких це:

підсвічування пунктів меню

Бігаючий покажчик

змінюються картинка

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

Підсвічування пунктів меню

Найбільш часто зустрічається реалізація ефекту RollOver. Його основою є підміна картинки при наведенні курсору мишки і повернення до первісної після того, як мишка її покине.

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

Почнемо з написання HTML-коду меню. Це нескладно і буде виглядати приблизно так:

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

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

onMouseOver = "change ( 'pic1', 'pic/pic-1-on.gif');"

А для відстеження догляду курсор, зображення, на допомогу прийде подія onMouseOut яке також викликає функцію зміни зображення, але вже з іншими параметрами:

onMouseOut = "change ( 'pic1', 'images/referat/76674-1.gif');"

В першому випадку ми вказуємо посилання на зображення "натиснутою кнопки", а у другому, відповідно, "віджатою" (або вихідної картинки, що суть одне і теж).

Тепер напишемо всю конструкцію повністю на прикладі одного пункту меню:

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

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

Броузер перед показом сторінки на екрані, розбиває її на складові блоки і заносить їх у свою базу даних, надаючи нам доступ до інформації за допомогою об'єктної моделі. Зокрема, всі картинки зберігаються в об'єкті images, який, у свою чергу, входить в об'єкт document. І, наприклад, для того, щоб замінити одне зображення іншим, нам достатньо скористатися наступною конструкцією:

document.images [ "pic1"]. src = "Pic/pic-1-on.gif";

Зверніть увагу, що для посилання на конкретне зображення (адже на сторінці їх може бути багато), ми використовуємо ім'я зображення, яке вказали в атрибуті name тега . У даному прикладі, ми змінили зображення звичайної кнопки, на її "натискання" варіант.

Точно таким же чином, ми можемо звернутися й до інших атрибутів картинки: ширині (width), висоті (heigth), пояснювальний текст (alt) і т.д. У нашому ж випадку достатньо буде змінити тільки посилання на картинку, тому що зображення "звичайної" і "натиснутою" кнопки мають однакові розміри.

Всі необхідні знання для написання функції у нас вже є, так що приступимо. Ось код на JavaScript, який здійснює підміну зображень. В якості параметрів ми передаємо йому ім'я малюнка і посилання на зображення "натиснутою" (або "віджатою") кнопки:

function change (img, ref) (

if (browser_ok == 'true') (

document.images [img]. src = ref;

)

)

Бігаючий покажчик

Чим відрізняються варіанти RollOver з "підсвічуванням пунктів меню" та "бігають покажчиком"? Тільки тим, що в другому випадку у нас є всього два зображення, що використовуються для всіх пунктів меню - пуста і з зображенням вказівника.

В цьому варіанті RollOver нам доведеться трохи змінити HTML-код, що описує меню, тому що перед кожним пунктом меню ми додаємо зображення пустого покажчика:

Зверніть увагу на кілька особливостей. По-перше, замість однієї функції зміни зображення нам знадобляться два, тому що дії, здійснювані при попаданні курсору в область пункту меню, і покиданні її трохи відрізняються. Ми назвемо ці функції відповідно over () і out (). По-друге, зауважте, що атрибут name, тега , перемістився з опису пункту меню в опис покажчика -- адже тепер ми підсвічує не меню, а покажчик!

Число параметрів, що передаються функцій можна скоротити - досить обмежитися ім'ям зображення (атрибут name), тому що посилання на зображення, що формують покажчик, нам відомі заздалегідь. Код, що здійснює необхідні дії, тепер виглядає так:

function over (img) (

if (browser_ok == 'true') (

document.images [img]. src = "pic/pointer-on.gif";

)

)

function out (img) (

if (browser_ok == 'true') (

document.images [img]. src = "images/referat/76674-4.gif";

)

)

Залишилось розібратися з відмінностями, які властиві третім варіантом ефекту, а саме ...

змінюються картинка

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

Як і в попередньому випадку, почнемо з коригування HTML-коду. У даному варіанті він буде складатися з двох фрагментів: опис зображення, яке буде мінятися і опис областей, при попаданні на які викликається скрипт. Це може бути, наприклад, те ж саме меню:

...

Відповідно, доведеться скоректувати і поведінка функцій. У функцію over (), яка викликається в результаті попадання курсора в активну область, достатньо передати тільки посилання на заміняє зображення. Виклик ж функції out () здійснюється і зовсім без параметрів:

function over (ref) (

if (browser_ok == 'true') (

document.images [img]. src = ref;

)

)

function out () (

if (browser_ok == 'true') (

document.images [img]. src = "images/referat/76674-5.gif";

)

)

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

Попереднє завантаження зображень

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

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

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

Механізм попереднього завантаження зображень здійснюється за допомогою наступного фрагмента коду:

if (browser_ok == 'true') (

a1 = new Image; a1.src = "pic/pic-1-on.gif";

a2 = new Image; a2.src = "pic/pic-2-on.gif";

a3 = new Image; a3.src = "pic/pic-3-on.gif";

)

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

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

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

Список літератури

Для підготовки даної роботи були використані матеріали з сайту http://www.i2n.ru