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

Question

我正在尝试创建一个产品选择表，将鼠标悬停在颜色阴影上会更改主要产品图片（以匹配颜色。）

我在使用现有脚本时遇到的问题是，我无法让设置适用于仅影响一个目标图像的 MULTIPLE first images。

/* 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'));
});