如何克服图像悬停中的这个问题?

时间:2012-10-11 06:11:44

标签: javascript jquery html css hover

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

当我点击特定图像(即黑白图像)时,应该同时将其转换为彩色图像,此外还应添加刻度标记图像。

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

SCRIPT

$(".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>

我使用上面的代码,一切正常,但当我再次移动鼠标时,图像变成黑白图像(因为我使用了鼠标输出功能)

还有其他更好的主意吗?或

如何克服这个问题?在此先感谢

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

单击图像然后在那里留下一些足迹。喜欢改变图像的类, 现在在mouseout函数中检查图像是否具有该特定类。如果什么都不做,否则改变图像颜色。