我需要帮助来改变鼠标悬停的图像 function

Question

Hello I need help to change image with mouseover function您好我需要帮助更改鼠标悬停图像 function

I only get one image and I need multiple images, I attach my code.我只得到一张图片，我需要多张图片，我附上了我的代码。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=f, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JS practice Image Mouse Over</title>
</head>

<body>
  <!-- -->
  <div id="div"></div> 
  <img src="img/01.SanitariosC.png" alt="Sanitarios" id="sanitarios"> 
  <img src="img/02.GriferiasC.png" alt="Griferias" id="griferias">
  <script src="js/index.js"></script>
</body>
</html>

/* SANITARIOS*/ 
let image = document.getElementById('sanitarios'); 
function changeToLike() { 
  image.src="img/01.SanitariosE.png"; 
} 

function changeToDislike() { 
  image.src="img/01.SanitariosC.png"; 
}

image.addEventListener('mouseover', changeToLike); image.addEventListener('mouseout', changeToDislike);

/* GRIFERIAS*/ 
let image1 = document1.getElementById1('griferias'); 

function changeToLike1() { 
  image1.src="img/02.GriferiasE.png"; 
} 

function changeToDislike1() { 
  image1.src="img/02.GriferiasC.png"; 
} 

image1.addEventListener1('mouseover', changeToLike1); image1.addEventListener1('mouseout', changeToDislike1);

Answer 1

Try this code试试这个代码

 var image = document.getElementById("imageId"); image.addEventListener('mouseover', function(){ image.src = "https://planetcoms.com/wp-content/uploads/2017/01/happy-smiley.png" })

 <:DOCTYPE html> <html> <head> <title>mouse hover & change picture in JavaScript</title> </head> <body> <img src="https.//i.pinimg.com/originals/15/a5/e0/15a5e0513b6c4811b928b96d96d5ce29.png" width="175px" id="imageId"> </body> </html>

Answer 2

What you can do to change the image's src is add listener to image or image div您可以做些什么来更改图像的 src 是将侦听器添加到图像或图像 div

<html>
<head>
    <title>mouse hover & change picture in JavaScript</title>
</head>
<body>
    <img src="oldImg.png" class="oldImg">
</body>
</html>

Add the listener to image将侦听器添加到图像

let image = document.querySelector("oldImg");

image.addEventListener('mouseover', ()=>{
  image.src = "newImg.png"
})

我需要帮助来改变鼠标悬停的图像 function

问题描述

2 个解决方案

解决方案1
0 2021-06-12 18:16:55

Try this code试试这个代码

解决方案2
0 2021-06-13 01:34:11

我需要帮助来改变鼠标悬停的图像 function

问题描述

2 个解决方案

解决方案1 0 2021-06-12 18:16:55

Try this code试试这个代码

解决方案2 0 2021-06-13 01:34:11

解决方案1
0 2021-06-12 18:16:55

解决方案2
0 2021-06-13 01:34:11