懸停在圖像上，更改另一個圖像 - 多個第一圖像

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