悬停在图像上，更改另一个图像 - 多个第一图像

Question

我试图创建一个产品选择表，其中徘徊的色调变化的主要产品图片（相匹配的颜色。）

的问题我现有的脚本是，我无法让设置工作的MULTIPLE第一个图像只影响一个目标图像。

/* Teaser image swap function */ 
    $('img.swap').hover(function() { 
     this.src = '/images/signup_big_hover.png'; 
    }, function() { 
     this.src = '/images/signup_big.png'; 
    }); 

我发现这个脚本，但不知道如何将其转换为接受多个图像。

JS Fiddle我目前的HTML。当表格中的某个图像悬停时，下面的图片应该更改为相应。

如果您希望更好地了解我正在创建的内容，则可以使用该实时网站here。

一部分我热衷于对没有包裹在一个链接的图片，因为这会导致点击后一个讨厌的页面跳转（和它们与形式，以便协同工作，不能真正改变。）

Answer 1

我居然有那么更简单的解决方案：

你想要换出每个图像简单地给他们data-hover瞧:)

<img src="normalLocation.jpg" data-hover="newLocation.jpg" /> 

JS：

// this code will do the rest for you 
$('img[data-hover]').hover(function() { 
    $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp'); 

}).each(function() { 
    $('<img />').attr('src', $(this).attr('data-hover')); 
});