title: Hover on one image, change another. Multiple first hovers affect one changed image
body: <p>I have a list of product colour shades on a product page.</p>
  
  <p>There is also a large image on the page.</p>
  
  <p>I would like to be able to hover on one of the small thumbnails from the colour shade list and it to display on the large picture instead.</p>
  
  <p>I have the following code but this isn't right. Instead of changing the <code>mainpic</code> it changes the image it has been hovered on....</p>
  
  <pre><code>$('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 () {
      $('&lt;img /&gt;').attr('src', $(this).attr('data-hover'));
  });​
  </code></pre>
  
  <p>There is a JS Fiddle for it <a href="http://jsfiddle.net/Uc9ch/7/" rel="nofollow">here</a>, but as you can see it doesn't work as expected.</p>
  
  <p>Instead of hovering affecting the LARGER pic it affects the same image that is being hovered over.</p>
  
  <p>Live site is here to get a clearer understanding of what I mean:</p>
  
  <p><a href="http://www.rubytuesdaycreative.co.uk/testsite/snood.html" rel="nofollow">Ruby Tuesday Creative Site</a></p>