Javascript圖片更改

Question

Javascript正被用於製作一個整潔的註銷按鈕。它幾乎完美的工作，除了我不知道如何將一行添加到'跨度'，所以它也編輯圖像，因爲代碼使用自變量。我怎樣才能讓圖像在連接到鏈接跨度的腳本中使用，以便不管我是懸停在鏈接還是圖像上，圖像都會更改。我嘗試過使用一些解決方案，但是沒有一個以我想要的方式工作或根本沒有工作。 JQuery對於解決方案也很好。就Javascript/JQuery而言，我非常無知，因爲到目前爲止，我的大部分代碼都是PHP/CSS。

<a href="#logout"> 
<span>Logout</span> 
<img src="images/logout.png" 
    onmouseover="this.src='images/logout_hover.png'" 
    onmouseout="this.src='images/logout.png'" /> 
</a> 

Answer 1

由於事件傳播，這應該工作：

<a id="login_link" href="#logout" onmouseover="document.getElementById('login_image').src='images/logout_hover.png'" onmouseout="document.getElementById('login_image').src='images/logout.png'"> 
    <span>Logout</span> 
    <img src="images/logout.png" id="login_image" /> 
</a> 

但提到2pha，使用簡單的CSS是好了很多：

#login_link span#logo_image { 
    display: inline-block; 
    width: 100px; 
    height: 30px; 
    background: transparent url(images/logout.png) top left no-repeat; 
} 
#login_link:hover span#logo_image { 
    background-image: url(images/logout_hover.png); 
} 

或者更好的是，合併2個圖像並將新圖像用作精靈，因此它們將一起預加載：

#login_link span#logo_image { 
    display: inline-block; 
    width: 100px; 
    height: 30px; 
    background: transparent url(images/logout.png) top left no-repeat; 
} 
#login_link:hover span#logo_image { 
    background-position: bottom left; 
}