Використання подій onMouseOver та onMouseOut, вихідний на JavaScript, завдання Попередня
Зображення як об'єкти У об'єктній моделі, що використовується Javascript, об'єктами є не тільки браузерне вікно (window) або Web-сторінка (document), але й елементи, включені до Web-документів, такі як зображення. Це означає, що кожного разу, коли програміст використовує у Web-документі тег, він створює новий об'єкт. Як і у інших об'єктів, уявлення зображень як об'єктів дає можливість пізніше змінювати деякі властивості цих об'єктів. Щоб мати можливість програмно керувати властивостями об'єкта, об'єкт повинен отримати ім'я, яке буде використовуватися для посилань на нього. У разі малюнків іменування об'єкта-зображення досягається включенням у тег атрибута NAME: . Оскільки Javascript враховує регістри літер, то при зверненні до об'єкта-зображення потрібно суворо дотримуватися того, як було визначено ім'я об'єкта. Це означає, що для посилання на певний об'єкт не можна використовувати імена, записані як "MYIMAGE", "MyImage" і т.п.
Усі зображення, включені в Web-сторінку, є елементами колекції images, що є однією з властивостей об'єкта document. Елементи колекції організовані в асоціативний масив, для звернення до них замість числових індексів використовуються імена. Наприклад, для доступу до об'єкта-зображення myImage необхідно використовувати наступний синтаксис: document.images["myImage"]. Об'єкти-зображення мають властивість src (див. специфікацію HTML 4), яка містить URL графічного файлу, що описує зображення. Для подальшого важливо відзначити, що цю властивість об'єкта можна не тільки прочитати, але й змінити: document.images["myImage"].src="https://codelib.ru/s/javascript/onMouseOver_and_onMouseOut_from_images/newImage.gif "
Обробка подій onMouseOver таonMouseOut для зображень Нинішня специфікація HTML вимагає, щоб обробка подій onMouseOver - "курсор миші наведений на картинку" і onMouseOut - "курсор миші вийшов за межі картинки" підтримувалася всіма HTML-елементами, в у тому числі й зображеннями. Зауваження. Оскільки onMouseOver і onMouseOut є атрибутами HTML-тегів, то регістри літер у тому запису ролі не грають. Тому не буде помилкою писати назви цих атрибутів як намусіоver, onmouseout і т.п. Для створення динамічного ефекту зміни картинки при "наїжджанні" на неї курсора миші необхідно призначити (для відповідного об'єкта) функцію-обробник події наMouseOver. Аналогічно, щоб при виведенні курсору за межі картинки відновлювалося старе зображення, необхідно призначити функцію-обробник події на MouseOut. В основному тексті веб-сторінки в тегу вказується файл зображення, відповідного наMouseOut. Зауваження. Браузер Netscape 4.x забезпечує підтримку необхідних властивостей лише гіперпосилань (тег ). Тому обробники, визначені безпосередньо в тезі, не працюватимуть. Однак, ця проблема легко вирішується шляхом створення посилання "нікуди": onMouseOut="outFunc()"> NAME="myImage" W > Оскільки браузер у разі сприймає зображення як гіперпосилання, те, щоб не з'являлася рамка навколо картинки, у тезі необхідно задати атрибут BORDER рівним нулю. Цей прийом повинен застосовуватися завжди, оскільки він забезпечує міжбраузерну сумісність. Підготовка обробки подій onMouseOver та onMouseOut для декількох зображень У завданні 2 для створення ефекту зміни картинки потрібно було написати дві функції. Якщо подібний ефект має бути передбачений на веб-сторінці для декількох зображень, потрібно буде писати по двіфункції на кожне зображення, що незручно. Для керування заміщенням кількох картинок за допомогою однієї функції використовується спеціальний набір прийомів. 1. Для кожної пари зображень створюються змінні, що зберігають імена файлів зображень, імена яких відрізняються тільки закінченнями: "_on" - над, і "_off" - поза). Наприклад, якщо основу ідентифікаторів для пар картинок становлять імена first, second і third, необхідно визначити такі змінні: var first_off = "image1off.gif"; var first_on = "image1on.gif"; var second_off = "image2off.gif"; var second_on = "image2on.gif"; var third_off = "image3off.gif"; var third_on = "image3on.gif"; Такий підбір імен потрібен, щоб спростити написання універсальних обробників.
2. Далі, оскільки для обробки подій onMouseOver і onMouseOut всіх зображень будуть використовуватися одні й ті самі дві функції, то цим функціям необхідно передавати деяку ознаку, яка дозволить обробникам визначати, яке із зображень згенерувало цю подію. Цими ознаками є імена, взяті за основу ідентифікаторів файлів зображень (first, second і third).