如何在使用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