Археология
Архитектура
Астрономия
Аудит
Биология
Ботаника
Бухгалтерский учёт
Войное дело
Генетика
География
Геология
Дизайн
Искусство
История
Кино
Кулинария
Культура
Литература
Математика
Медицина
Металлургия
Мифология
Музыка
Психология
Религия
Спорт
Строительство
Техника
Транспорт
Туризм
Усадьба
Физика
Фотография
Химия
Экология
Электричество
Электроника
Энергетика

Управління “підсвічуванням” кнопок

Інструкція до практичної роботи №22

Тема. Створення кнопки та гіперпосилання для використання сценарію

Мета роботи:освоєння практичних створення інтерактивних Web-документів засобами JavaScript .

Теоретичні відомості

Отже, в попередньому розділі ми дізналися, яким чином можна довільно змінювати будь-які текстові елементи на веб-сторінці. А як бути, якщо треба динамічно змінити не текст, а графіку? Допустимо, ми створили декілька красивих графічних кнопок для гіперпосилань і хочемо, щоб при наведенні миші відповідна кнопка змінювала свій вигляд (напри заходів, одсвечивалась), по аналогії з текстовими гіперпосиланнями за наявності певного псевдокласу A:hover.

Підготовка графічних кнопок

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

<HTML>

<HEAD>

<TITLE>

Сторінка з кнопками

</TITLE>

</HEAD>

<H1 Align=Center>Пошукові сторінки</H1>

<H2 Align=Center>для студентів ВВПК</H2>

Якщо ви шукаєте інформацію в інтернеті, то вам допоможуть наступні сайти:

<BR>

<BR>

<BR>

</BODY>

</HTML>

Бачите, поки що нічого нового. Результат показаний на мал. 1.

Мал. 1. Сторінка графічно оформлених гіперпосилань

Проте тепер потрібно зробити те, ради чого ми все це почали - підсвітити кнопки гіперпосилань при наведенні на них миші.

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

Управління “підсвічуванням” кнопок

Тепер призначимо обробникові подій onMouseOver зміну зображення. Власне кажучи, для цього потрібно всього лише змінити атрибут SRC= тегa <IMG>:

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

Ось тепер, нарешті, ми добилися, чого хотіли, але тільки для однієї кнопки: при наведенні на неї покажчика миші вона змінює свій вигляд (мал. 2), а при відведенні покажчика відновлює колишній вигляд .

Мал. 2. На цій сторінці графічні гіперпосилання Yahoo підсвічене при наведенні на нього покажчика миші

Можна, звичайно, написати таку ж конструкцію і для решти трьох кнопок. Проте, давайте реалізуємо витонченіше рішення: напишемо одну функцію, яка мінятиме файл малюнка для всіх тегів <IMG>, що є на сторінці. Точніше, функцій буде дві: одна для події onMouseOver, а інша - для onMouseOut. Скористаємося тим, що файли малюнків кнопок, що “підсвічуються”, мають ті ж імена, що і файли малюнків звичайних кнопок, плюс цифра 2 (наприклад: altavista.jpg - altavista2.jpg). Отже перша функція, що реагує на наведення миші, просто добавляє двійку в потрібне місце:

function change1() { if (window.event.srcElement.tagName="IMG")

window.event.srcElement.src= window.event.srcElement.src.substring(0, window.event.srcElement.src.length4)+"2"+ window.event.srcElement.src.substring (window.event.srcElement.src.length-4, window.event.srcElement.src.length) ;

}

Як бачите, ця функція спочатку перевіряє, на який об'єкт, власне, наведений покажчик миші, і якщо це елемент <IMG>, то в потрібне місце значення його атрибуту SRC= вставляється цифра 2, а якщо це який-небудь інший елемент, то функція просто нічого не робить. Ніби все правильно, проте дуже громіздко - так відразу і не розберешся, що ця функція робить, та і при введенні таких рядків легко помилитися і потім довго і болісно шукати, чому видаються повідомлення про помилки. Спростимо, привласнивши значення window.event.srcElement тимчасовою змінною:

function change1() { var a=window.event.srcElement; if (a.tagName=="IMG")

a.src=a.src.substring(0, a.src.length-4)+"2"+ a.src.substring(a.src.length-4, a.src.length);

}

Ось це зовсім інша справа - виглядає набагато прозоріше, а функціонує так само.

Тепер напишемо аналогічну функцію, що видаляє двійку із значення атрибуту SRC=

function change2() { var a=window.event.srcElement; if (a.tagName="IMG")

a.src=a.src.substring(0, a.src.length-5)+ a.src.substring(a.src.length-4, a.src.length);

}

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

document.onmouseover=change1 ;

document.onmouseout=change2;

Дві функції, а також останні два рядки повинні знаходитися в блоці <SCRIPT> . Зверніть увагу на відсутність круглих дужок після імен функцій! (Якщо дужки поставити, то це приведе до негайного виклику функцій, а нам можна тільки пов'язати їх імена з відповідними подіями.)

<SCRIPT>

function change1() { var a=window.event.srcElement; if (a.tagName=="IMG")

a.src=a.src.substring(0, a.src.length-4)+"2"+ a.src.substring(a.src.length-4, a.src.length);

}

function change2() { var a=window.event.srcElement; if (a.tagName="IMG")

a.src=a.src.substring(0, a.src.length-5)+ a.src.substring(a.src.length-4, a.src.length);

}

document.onmouseover=change1 ;

document.onmouseout=change2;

</SCRIPT>

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

Хід роботи

1. Створити сторінку-меню з кнопками для переходу на 5 ващих сторінок розроблених на попередніх заняттях. Забезпечити зміну кольору кнопки, якщо курсор миші буде перебувати над кнопкою.

Поиск по сайту: