如何在使用Javascript交换图片时设置边框和样式？

Question

我有一个简单的代码，当我在图像鼠标悬停它被改变，当我鼠标离开它返回第一个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纯红色; 我该怎么做？

感谢，

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