在Firefox中的圖像交換

我試圖改變鼠標懸停時按鈕的背景圖像。在Firefox中的圖像交換

的發言

function testIn() 
{ 
elem.style.backgroundImage = 'url("image_name_in.png")'; 
} 
function testOut() 
{ 
elem.style.backgroundImage = 'url("image_name_out.png")'; 
}

我與onMouseOver=testIn()和onMouseOut=testOut()這樣做。

這裏的問題是，當我懸停鼠標。我看到進度條（右下側）在Firefox中顯示爲，如果一些網頁獲得加載

來源

2011-02-04 progster

使用:hover僞類和CSS Sprite替代。

來源

2011-02-04 19:05:59

這工作！我刪除了JavaScript例程。我在做一個假設，我們必須手動更改圖像，只要我們做mousein，mouseout。但CSS屬性懸停照顧了一切。謝謝您的幫助。 – progster 2011-02-07 19:51:44

你需要爲了幾個變化來傳遞你的對象引用：

onMouseOver="testIn(this)" 


function testIn (elem) 
{ 
elem.style.backgroundImage = 'url("image_name_in.png")'; 
}

BTW - 約定現在使用「onmouseover」（無上限）

來源

2011-02-04 18:40:32

其複製粘貼錯字！我已經有你提到的代碼。 – progster 2011-02-07 19:50:21

您在進度條中獲得活動，因爲您的onmouseover圖像在您調用該函數之前不會加載。

你可以使用一個精靈結合：懸停CSS效果 - 就像@Tomasz提到的一樣。

如果您不想將默認和懸停圖像狀態組合成一個精靈，您可以嘗試爲懸停圖像添加一個額外的容器（將其默認CSS設置爲display：none;），然後使用JS或jQuery在鼠標懸停或懸停上交換默認和懸停圖像的顯示狀態。

$('myDefaultImage').hover(function() { 
    $(this).hide(); 
    $('myHoverImage').show(); 
}, function() { 
...the inverse, etc. 
});

這將消除進度條問題，因爲您的所有圖像將一起加載。

與此同時，這將會不必要地膨脹您的頁面大小。

我真的想嘗試使用：懸停CSS和sprite，或者重新評估你試圖用圖像交換完成的重要性（它是否是你的整體項目的最佳解決方案？）。

來源

2011-02-04 21:50:46 Dawson

在Firefox中的圖像交換

回答

相關問題