Question

你好我想在用户mousovers在图像上和他mousleavs重置图像src之后更改图像，但它不起作用这是我的HTML代码：

<img id="myImage" onmouseover="changeImage()" onmouseleave="resetImage()" src="pic_bulboff.gif" width="100" height="180">

和JS：

<script>
function changeImage() {
    var image = document.getElementById('myImage').image.src = "pic_bulbon.gif";     
}

function resetImage() {
     var image = document.getElementById('myImage').image.src = "pic_bulboff.gif";
}
</script>

Answer 1

你正在混淆......

使用document.getElementById('myImage').src = "pic_bulbon.gif";

____^^--------DOM Element-----------^^_Property_^^--Value--^^

试试这个：

function changeImage() {
  document.getElementById('myImage').src = "pic_bulbon.gif";
}

function resetImage() {
  document.getElementById('myImage').src = "pic_bulboff.gif";
}

[src="pic_bulbon.gif"] {
  border: 2px solid black;
}
[src="pic_bulboff.gif"] {
  border: 2px solid red;
}

<img id="myImage" onmouseover="changeImage()" onmouseleave="resetImage()" src="pic_bulboff.gif" width="100" height="180">

在Javascript中交换图像，如何重置src？

1 个答案: