Question

是的我知道有线索问这个，但答案和例子都过于复杂。

从我能发现的情况来看，这应该可行，但是当我重新加载页面或更改悬停时，它不会改变图像：

<body>
<img id='image'src='imagepathhere' height='200px' width='200px'>
<script>
document.getElementById('image').src='pathOfTheNewImage';
</script>

如果鼠标悬停以更改图像，我认为它类似于：

 <script>>   

function changeImage(image) {
    image.src = "pathOfNewImage";
}
</script>

<img id='image' src="pathOfOldImage" onmouseover="changeImage(this)" height='200px' width='200px'>

1）两张图片的来源都是正确的。

2）我再次看到这里的表格，但代码太复杂了，我不能很好地遵循它。

Answer 1

感谢您的帖子，我能够正确使用该功能：

<img id='image'src='oldImage' onmouseover="changeImage(this)" 
height='200px' width='200px'>


<script>
function changeImage(image) {
image.src='newImage';
}
</script>

Answer 2

在您的代码中，您的绑定功能不正确。所以基本上你可以用html绑定函数内联。或者您可以动态绑定它。这是非常简单的解决方案。如果你的图像路径是固定的。

 <script type="text/javascript">
    function mouseaway(my_image) {
        my_image.src = "someimage.jpg";
    }

    function rollover(my_image) {
        my_image.src = "someimage.jpg";
    }
</script>

<img src="someimage.jpg" onmouseover="rollover(this)" onmouseout="mouseaway(this)" />

使用JavaScript更改图像源的简单方法

2 个答案: