图像悬停的解决方案

Question

我有这个标记：

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

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

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

Answer 1

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

请记住，您必须以相同的结尾（在我的示例中为“_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";
}