在链接悬停上更改另一个图像

时间:2014-04-10 18:03:23

标签: javascript image colors hover

HTML中的输出是这样的:

ProductImage1             ProductImage2       ProductImage3         ProductImage4
Color1 Color2 Color3                          Color2 Color4         Color5 Color6  

我想要做的是当我将鼠标悬停在上面的任何颜色上时,ProductImage的原始(当前)图像将更改为另一个(以匹配悬停的颜色)。当鼠标离开时,原始图像将会恢复。

这是我为悬停在每个ProductImage上所做的javascript。

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}
$(function () {
    $('img.main').hover(sourceSwap, sourceSwap);
});

更新

我从问题中排除了不必要的部分。当我在这里测试jsfiddle.net/4dK2x/27时,@ hunter的答案非常有效。但是,当我将它与我的php部分组合以创建动态列表时,它不起作用。我还在环顾四周,试图找出问题所在。如果我找到解决方案,我会回来更新我的答案。

2 个答案:

答案 0 :(得分:0)

您可以通过两种方式执行此操作,您可以使用CSS尝试:

#tagName{
background: url("yourImage.jpg");
} 
#tagName:hover{
background: url("anotherImage.jpg");
}

这假设你在图像周围有一个div标签,你也可以引用类id等等(阅读CSS以获取更多细节)。

或者你可以通过JavaScript来实现 假设你没有使用JQuery(我需要更多地熟悉JQuery)

var image1 = document.getElementById("nameofDivTag");

//on hovering kinda forgotten the JS version of hovering, JQuery has probably easier way

image1.style.background("url:("aDifferentImage.jpg"));

如果我错了!如果不是耶! 希望它有所帮助

答案 1 :(得分:0)

如果您模仿类似的html结构,这里有更新的代码,可以根据需要使用多套产品

$('.image .toggles img').hover(function () {        
    var src = $(this).attr("src");
    var $main = $(this).closest(".image").find(".main");
    $main.attr("toggle", $main.attr("src")).attr("src", src);
},
function () {        
    var $main = $(this).closest(".image").find(".main");
    $main.attr("src", $main.attr("toggle"));
});

示例:http://jsfiddle.net/4dK2x/1/