Seek jQuery's version of a Fireworks 'Swap Image'

Question

Moving into the jQuery Way from Fireworks and need to implement jQuery's version of what FW calls a 'Swap Image' behavior. I've also seen the term 'Disjointed Rollover' used. Instead of a simply changing the image source of the activated anchor this version will also swap the source of other 'slices' (images) not connected to the current/activated one.

Answer 1

Here's a tutorial just for that. Found by entering "jQuery disjointed rollover" in Google.

Answer 2

I assume that you'd do this with a hover method using a class selector. When you hover over the collection, you replace the src attribute of each element in the set with the "hover" version of the image. I'm using the relative location of the image in the set to distinguish the names, but I suppose you could keep an array of names or use some other deterministic algorithm.

  $('.swap').hover(
      function() {
          $('.swap').find('img').each( function(i) {
              $(this).attr('src','/path/to/image/img_hover' + i + '.png';
          },
      function() {
          $('.swap').find('img').each( function(i) {
              $(this).attr('src','/path/to/image/img' + i + '.png';
          }
      }
  });

HTML

<div class="swap">
   <img ...
   <img ...
   ...
</div>

Answer 3

You would simply need to add whatever those images are to the hover event handler:

$("image1").hover(function() {
     $("this").attr("src") = "newimage2.png";
     $("#image2").attr("src") = "newimage2.png";
};

I would give all of the image names something like "slice-1.png" and the id "slice-1" so that you could go with a function that didn't go one by one but just hooked into all images with an id starting with "slice" and then replaces the src to all of them to say "otherslice-1" or what have you.