图像悬停的解决方案

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事件中，你删除了尾部，这就是全部。

请记住，您必须使用相同的结尾命名每个悬停图像（在我的示例中为“_hover.jpg”），并将图像ID设置为其基本名称（不包含.file格式等）

（您可以使用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";
}