onmouseover和onmouseout圖像未加載

在我的個人網站上，我試圖使用onmouseover/onmouseout創建一些基本動畫。第一個URL表示一個小的（50 x 50）灰度圖像，第二個URL的圖像顏色相同。onmouseover和onmouseout圖像未加載

<a><img src="link" onmouseover="this.src='url1'" onmouseout="this.src='url2'"></a>

該代碼是功能性的，但它有一些問題。我注意到，在點擊圖片鏈接後，桌面和移動設備上的圖片都消失了。這是有道理的，瀏覽器不會加載任何新的圖像，但我想知道是否有更好的選擇。

來源

2013-10-15 Scottie

圖片代表什麼？使用CSS來處理這種事通常是一個好主意。 – Ryan

他們是社交網絡標誌圖標和相應的鏈接。理想情況下，如果單擊時顯示任一圖像，我更喜歡它。你認爲在CSS中使用懸停可以解決問題嗎？ – Scottie

是的，使用'：hover' /'：active'應該可以解決你的問題。 – Ryan

由於@minitech提，你應該使用CSS ... HTML會是這樣的：

<a><div class="my_image"></div></a>

而CSS：

來源

2013-10-15 04:18:55

謝謝！我會試一試，看看是否能解決這個問題。 – Scottie

這是最好的使用CSS和jQuery的組合對於這種事情。您可以將圖像作爲獨立文件保存在網站的根目錄或/ img子目錄中，然後根據您希望更改圖像的事件將鏈接添加到鏈接。

下面是一些簡單的代碼來說明：

的HTML：

<div id="backgroundImg"><a class="img-link" href=""></a></div>

的CSS：

#backgroundImg a { 
    width: 50px; 
    height: 50px; 
    background: url('img/grey-50x50.png') no-repeat; 
    display: block; 
} 

#backgroundImg a.color { 
    background: url('img/color-50x50.png') no-repeat; 
}

而jQuery的：

$('.image-link').mouseover().addClass('color').mouseout().removeClass('color');

所以你定義圖像容器a是一個div，通過CSS作爲鏈接本身的背景圖像加載圖像，然後在用戶將鼠標懸停在.image-link元素上時更改類名稱。

您可以更進一步，將兩幅圖像組合成一個50x100圖像精靈來提高性能。然後CSS會喜歡這樣的東西：

#backgroundImg a { 
    width: 50px; 
    height: 50px; 
    background: url('img/grey-color-50x100.png') no-repeat; 
    background-position: 0 0; 
    display: block; 
} 

#backgroundImg a.color { 
    background-position: 0 -50px; 
}

希望有所幫助。

來源

2013-10-15 04:35:16 ironmermaid

onmouseover和onmouseout圖像未加載

回答

相關問題