實現高效的JQuery圖像交換

我的導航中有大約10個鏈接。所有這些圖像都有兩個圖像，例如：main_image.png先載圖像，另一圖像不顯示稱爲main_image_up.png此圖像是我想用鼠標懸停在圖像上時替換第一張圖像。實現高效的JQuery圖像交換

什麼是最好的方法是/技術使用，將所有這些大到一個有效的功能？

這裏是我當前的代碼，結構簡單，請注意，所有的圖像會有所不同：

<div> 
<img src="http://cdn4.blogs.babble.com/strollerderby/files/2011/06/test-100x100.jpg"/> 
    <p>Directory</p> 
    </div>

在此先感謝，克里斯

2013-03-30 cwiggo

你考慮使用CSS精靈呢？ – David

不，我現在沒有看着它！ – cwiggo

就個人而言，我將精靈的圖片並使用CSS。例如

以Newgrounds.com爲例。看看他們的導航欄。當你將鼠標懸停在上面/點擊它時，顏色會改變。

所有3個州是一個圖像。他們所做的只是根據元素的狀態來移動圖像的背景位置。

我寧願這樣做，因爲不是加載20個圖像（每個10個鏈接/ 2個圖像），你只加載一個。這可以讓您的瀏覽器不再向服務器撥打19個額外的電話，從而節省時間並加快速度！

有一個很好的文章，解釋它們是什麼，如何使用它們CSS-Tricks一看，等

2013-03-30 10:15:17 Xenolithic

回答