Question

我有一个简单的代码，当我鼠标悬停在图像上时它正在被更改，当我mouseleave它返回第一个src值：

<img id="myImage" onmouseover="changeImage()" onmouseleave="resetImage()" src="pic_bulboff.gif" width="100" height="180">
<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>

现在我想设置边框，当我鼠标悬停在图像上时，它应该有边框，例如：border：2px solid red; 我怎么做到这一点？

感谢，

Answer 1

你可以试试这个：的CSS：

.boder{
  border: 2px solid red;
}

JS：

function changeImage() {
    var image = document.getElementById('myImage');
    image.src = "http://static.jsbin.com/images/dave.min.svg";
    image.setAttribute('class','boder');

}

function resetImage() {
     var image = document.getElementById('myImage');
     image.src =  "pic_bulboff.gif";
     image.removeAttribute('class','boder');
}

demo

如何在Javascript中进行图像交换时设置边框和样式？

1 个答案: