在我的页面中,我想在网格视图中显示黑白图像列表,当我将鼠标悬停在该图像上时,它会显示彩色图像。当我移开鼠标时,应再次显示黑白图像。
当我点击特定图像(即黑白图像)时,应该同时将其转换为彩色图像,此外还应添加刻度标记图像。
我使用了以下脚本和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>
我使用上面的代码,一切正常,但当我再次移动鼠标时,图像变成黑白图像(因为我使用了鼠标输出功能)
还有其他更好的主意吗?或
如何克服这个问题?在此先感谢
答案 0 :(得分:1)
我建议您在单击时向图像添加一个类。然后当执行mouseout函数时,只需包含一个if / then,如果该类不存在,则只将图像交换回黑白。
答案 1 :(得分:0)
单击图像然后在那里留下一些足迹。喜欢改变图像的类, 现在在mouseout函数中检查图像是否具有该特定类。如果什么都不做,否则改变图像颜色。