При наведении мыши измените картинку в JavaScript

Question

У меня есть изображение в моем HTML-коде, и я хочу сделать так, чтобы при наведении курсора мыши на изображение оно переходило на другое изображение, а при наведении курсора мыши не поверх изображения он возвращается к значению по умолчанию.Как мне запрограммировать это в теге <script>?

Answer 1

Вы можете использовать css для этого, например:

.react {

  background: url('../img/React_Monoo.png');
}

.react:hover {
  background: url('../img/React_Colored.png');
}

здесь реагирует имя класса

Answer 2

var image = document.getElementById("image");

//Now, we need to add an Event Listener to listen when the image gets mouse over.

image.addEventListener('mouseover', function(){
  image.src = "path/to/newimage"
})
image.addEventListener('mouseout', function(){
    image.src = "path/to/otherimage"
  })

Answer 3

Нет <script> тег необходим.Используйте onmouseover и onmouseout, чтобы изменить источник изображения.

onmouseover выполнит действие, когда ваша мышь проведет по изображению .В этом случае мы используем this.src для установки изображения src на другое изображение.

onmouseout выполнит действие, когда ваша мышь выйдет из изображения .В этом случае мы снова используем this.src, чтобы установить изображение по умолчанию.

<img title="Hello" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681" onmouseover="this.src='https://www.ctvnews.ca/polopoly_fs/1.4037876!/httpImage/image.jpg_gen/derivatives/landscape_1020/image.jpg'" onmouseout="this.src='https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681'" />