Как поменять изображение (JavaScript)

Поменять изображение при наведении на него курсора мыши производится при помощи событий тега <img> — onMouseOver (событие при наведении курсора) и onMouseOut (событие ). После вызова этих событий нужно поменять атрибут изображения src.

Смена изображения при наведении

Например есть изображение (src="/images/1/3/138.jpg"), при наведении курсора на изображение должно появится изображение (src="/images/1/3/142.jpg"), при отводе курсора должно загружаться первое изображение.

Пример онлайн.

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Как поменять изображение (JavaScript)</title> <script type="text/javascript"> function changeImage(src) { document.getElementById('image').src = src; } </script> </head> <body> <h1><a href="/e/Как_поменять_изображение_(JavaScript)">Как поменять изображение (JavaScript)</a></h1> <p>Наведите курсор на изображение</p> <img src="/images/1/3/138.jpg" alt="Image" id="image" onMouseOver="changeImage('/images/1/3/142.jpg')" onMouseOut="changeImage('/images/1/3/138.jpg')"> </body> </html>

Категории

ПрограммированиеJavaScriptСобытия

Комментарии