图像悬停的解决方案

Question

我有这个标记：

<a href="assets/1.jpg" class="lightbox" rel="group1">
<img src="images/albums/album1/thumbs/1.jpg" /></a>

对于每个缩略图，我都有一个悬停图像（请参阅此处的缩略图 )

普通图像是灰度图像，悬停图像是彩色图像。 我的问题是如何正确添加悬停图像标记，因为我的图库中有大约 40 张图像？ 谢谢！

Answer 1

您应该在 onmousover 事件中为每个图像使用 Javascript（Jquery 或自定义代码，如您所愿）。将图像源作为参数传递，然后简单地将 _hover.jpg 附加到源中。在 onmouseout 事件中，您删除尾部，仅此而已。

请记住，您必须以相同的结尾命名每个悬停图像（在我的示例中为“_hover.jpg”），并将图像 id 设置为其基本名称（不带 .fileformat 等）

（您可以使用 JQuery 定义其他属性而不是 id）

是这样的：

<a href="dummy.html">
    <img src="images/basename.png" id="basename"
         onmouseover="showHint(this)"   
         onmouseout="backHint(this)" />
</a>

Javascript 如下所示：

function showHint(img) {
    img.src = "images/" + img.id + "_hover.png";
}

function backHint(img) {
    img.src = "images/" + img.id + ".png";
}