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

Question

The output in HTML is something like this:

ProductImage1             ProductImage2       ProductImage3         ProductImage4
Color1 Color2 Color3                          Color2 Color4         Color5 Color6  

What I want to do is when I hover my mouse over any color above, an original (current) image of ProductImage will change to another one (to match the hovered color). And that original image will be back when mouse leaves.

Here is the javascript I've done for hovering over each ProductImage.

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);
});

UPDATE

I excluded unnecessary parts from my question. The answer from @hunter worked very well when I tested it here jsfiddle.net/4dK2x/27. However it didn't work when I combined it with my php parts to create dynamic lists. I'm still looking around and trying to find out the problems. I will come back and update my answer if I find a solution for it.

Answer 1

You could do this two ways, you can try it by using CSS:

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

this assumes you have a div tag around the image, you can also reference class id's etc. (read into CSS for more details).

or you could do it through JavaScript lets say you are not using JQuery (i need to familiarize myself more with 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"));

if i am wrong yay! if not yay! hope it helps

Answer 2

Here's updated code which should work with as many sets of products as you need if you mimic a similar html structure

$('.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"));
});

Example: http://jsfiddle.net/4dK2x/1/