making Jquery Swap Image plugin target a new hyperlink

I'm using the Swap Image plugin, particularly Disjoint Rollovers 2.

Here's the live page

I'm trying to m开发者_JAVA百科ake the target image (the big image on the left) a new hyperlink depending on the image that is loaded there. The code I'm using is

<img class="swapImageDisjoint { sin: ['#main:images/big-head-4.jpg'], sout: ['#main:main:images/blank-slate.jpg'] }" src="images/head-1.jpg" alt="" />

Thanks

You don't really need Swap Image to do what you want. You can do all of it with a single click method. I put a stripped-down example here:

http://jsfiddle.net/3ENWq/

(In this example, I used the img urls as the link url, but they obviously don't have to be the same)

I simply added some extra attributes to your small images called swapimg and swapurl. I used the click function to load these into the main image and a mainlink href that I added. I also tacked on an each() to preload all of the large images if you so desire.

$('.swapImage').click( function() {

   $('#main').attr('src', $(this).attr('swapimg'));
   $('#mainlink').attr('href', $(this).attr('swapurl'));

}).each( function() {

   var preloadImg = new Image();
   preloadImg.url = $(this).attr('swapimg');

});

If you don't want the extra attributes, you can do it with metadata like the swap image plugin does. I can post an example of that if you want it.