实现高效的JQuery图像交换

Question

我的导航中有大约10个链接。所有这些图像都有两个图像，例如：main_image.png先载图像，另一图像不显示称为main_image_up.png此图像是我想用鼠标悬停在图像上时替换第一张图像。

什么是最好的方法是/技术使用，将所有这些大到一个有效的功能？

这里是我当前的代码，结构简单，请注意，所有的图像会有所不同：

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

JS FIDDLE

在此先感谢，克里斯

Answer 1

就个人而言，我将精灵的图片并使用CSS。例如

以Newgrounds.com为例。看看他们的导航栏。当你将鼠标悬停在上面/点击它时，颜色会改变。

现在看看the actual navigation bar image。

所有3个州是一个图像。他们所做的只是根据元素的状态来移动图像的背景位置。

我宁愿这样做，因为不是加载20个图像（每个10个链接/ 2个图像），你只加载一个。这可以让您的浏览器不再向服务器拨打19个额外的电话，从而节省时间并加快速度！

有一个很好的文章，解释它们是什么，如何使用它们CSS-Tricks一看，等