Зміна картинки при наведенні курсору

Подія onmouseover

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

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

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

Код виглядатиме так:

<img onmouseout="this.src='посилання на перше зображення'"
onmouseover="this.src='посилання на друге зображення'"
src="посилання на перше зображення" />