За допомогою цих об'єктів можна змінювати значення атрибутів html-контейнерів. Це означає, що можна змінити колір фону сторінки, відкрити нове вікно або здійснити зміну картинки при наведенні курсору в документі. При цьому перезавантаження сторінки не відбувається. Для того щоб здійснити зміну картинки при наведенні курсору необхідно використовувати об'єкт images []. Всі об'єкти в DOM мають ієрархію. Тобто є головний об'єкт (Window) йому підкоряються деякі об'єкти, їм в свою чергу інші. Для звернення до будь-якого об'єкта або його властивості вказують через точку повне або часткове його ім'я, починаючи з імені старшого в ієрархії. Повне ім'я об'єкта, який відповідає за все зображення window.document.images []. У квадратних дужках задається ім'я картинки яку ми хочемо замінити. Наприклад, на сторінці є картинка. Ім'я картинки зазначено в атрибуті name, отже, наш об'єкт буде window.document.images [ 'MyPicture']. Далі потрібно вказати повне ім'я нової картинки на яку ми хочемо замінити поточну. Це робиться за допомогою властивості об'єкта src. Форма запису наступна window.document.images [ 'MyPicture']. Src = 'NewPicture.gif'. В даному випадку нашому властивості присвоюється нова картинка NewPicture.gif. Поточна картинка яка відображається за замовчуванням - Picture.gif.
- onMouseOut - реагує коли курсор миші залишає картинку;
- onMouseOver - реагує коли курсор миші користувача входить в область картинки.
В лапках події onMouseOver ми повинні вказати властивість нашого об'єкта за допомогою якого відбувається зміна картинки при наведенні курсору. В лапках події onMouseOut ми повинні вказати властивість нашого об'єкта яке повертає колишнє зображення.
Виглядати це буде наступним чином: