0

在我的页面中，我想在网格视图中显示黑白图像列表，当我将鼠标悬停在该图像上时，它会显示彩色图像。当我将鼠标移开时，应该再次显示黑白图像。

当我单击特定图像（即黑白图像）时，它应该同时变成彩色图像，此外还应该添加一个刻度线图像。

我使用了以下脚本和 html 代码

脚本

$(".swap_image").live('click', function() {
if($(this).attr("class") == "swap_image") {
    this.src = this.src.replace("_blackwhite", "_color");
    $('#tick_' + $(this).attr('rel')).show();
} else {
    this.src = this.src.replace("_color", "_blackwhite");
    $('#tick_' + $(this).attr('rel')).hide();
}
$(this).toggleClass("color");
return false;});

HTML

<img id="tick_{{img.id}}" src="{{MEDIA_URL}}img/tick.png" style="position:absolute;" ><a href="#"><img rel="{{img.id}}" src="{{MEDIA_URL}}{{ img.logo_blackwhite }}" onmouseover="this.src='{{MEDIA_URL}}{{ img.logo_color }}'" onmouseout="this.src='{{MEDIA_URL}}{{ img.logo_blackwhite }}'" class="swap_image" /></a>

我使用了上面的代码，一切正常，但是当我再次将鼠标移出时，图像变成黑白图像（因为我使用了 mouseout 功能）

还有其他更好的想法吗？或者

如何克服这个问题？提前致谢

4

2 回答 2

1

我建议您在单击时向图像添加一个类。然后，当执行 mouseout 函数时，只需包含一个 if/then，如果该类不存在，它只会将图像换回黑白。

于 2012-10-11T06:29:12.930 回答
0

当您单击图像时，然后在此处留下一些足迹。就像更改图像的类一样，现在在您的 mouseout 函数中检查图像是否具有该特定类的条件。如果什么都不做，则更改图像颜色。

于 2012-10-11T06:34:58.740 回答