使Jquery Swap Image插件定位一个新的超链接

Question

我正在使用Swap Image plugin，特别是Disjoint Rollovers 2.

Here's the live page

我正在尝试根据加载到那里的图像，使目标图像（左侧的大图像）成为新的超链接。我正在使用的代码是

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

由于

Answer 1

你真的不需要Swap Image来做你想做的事。您只需单击一下即可完成所有操作。我在这里放了一个精简的例子：

http://jsfiddle.net/3ENWq/

（在这个例子中，我使用img urls作为链接url，但它们显然不一定相同）

我只是为名为swapimg和swapurl的小图片添加了一些额外的属性。我使用click函数将这些加载到主图像和我添加的mainlink href中。如果你愿意，我还会在each()上加载所有大图像。

$('.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');

});

如果您不想要额外的属性，可以像交换图像插件那样使用元数据。如果你需要，我可以发一个例子。