Question

我是初学者，我正在做作业，我遇到了一个小问题。我的任务是当onmouseover打开时，image1应该更改为image2。当onmouseout打开时，image2应更改为image1 Onmouseover工作，但onmouseout不起作用！这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM_4</title>
</head>
<body>
<img onmouseover = "changePic1()"onmouseout= "changePic2()" id="myImg"           src="bakground.jpg" width="150" height="200">

<script>
function changePic1() {
document.getElementById("myImg").src = "screen.jpg";
   }
  function changePic22(){
   document.getElementByID("myImg").src = "bakground.jpg";
   }
 </script>
 </body>
</html>

为什么我的onmouseout不起作用？我知道可以有更好的代码编写方法，但我必须同时使用onmouseover和onmouseout。应该只有HTML和简单的JavaScript代码。（我的老师这么说）

Answer 1

您的函数名称changePic22()不正确，并且您还有语法错误document.getElementByID

将代码替换为此代码

function changePic1() {
  document.getElementById("myImg").src = "screen.jpg";
}
function changePic2(){
  document.getElementById("myImg").src = "bakground.jpg";
}

Answer 2

试试这个：

JS：

function changePic1() {
document.getElementById("myImg").src = "http://res.cloudinary.com/vishakhanehe/image/upload/v1481149848/mickeywaving_ttphnm.gif";
   }
  function changePic22(){
   document.getElementById("myImg").src = "http://res.cloudinary.com/vishakhanehe/image/upload/v1481149848/obama1_c1buc6.jpg";
   }

HTML：

<img onmouseover = "changePic1()" onmouseout= "changePic22()" id="myImg"           src="" width="150" height="200">

当onmouseover和onmouseout

2 个答案: