Question

我的导航中有大约10个链接。所有这些都有2个图像，例如 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>

先谢谢你，克里斯

Answer 1

就个人而言，我会精灵你的图像并使用CSS。

以Newgrounds.com为例。看看他们的导航栏。当您将鼠标悬停在其上/单击它时，颜色会发生变化。

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

我更喜欢这样做，因为您只需加载一个，而不是加载20个图像（10个链接/每个2个图像）。这可以节省您的浏览器对服务器进行19次额外调用，从而节省时间并加快速度！

在CSS-Tricks上查看一篇很好的文章，解释它们是什么，如何使用它们等等。