jquery - jquery替换图像上的图像点击

Question

我在一个 div 中有一个图像映射，我想在单击热点时替换另一个 div 中的图像。

这是地图...

<div id="vtright">
<img src="vt_map.jpg" usemap="#vtmap" border="0">
<map name="vtmap">
<area shape="circle" coords="313,105,15" href="map01.jpg">
<area shape="circle" coords="320,140,15" href="map02.jpg">
<area shape="circle" coords="265,308,15" href="map03.jpg">
<area shape="circle" coords="323,301,15" href="map04.jpg">
<area shape="circle" coords="250,377,15" href="map05.jpg">
<area shape="circle" coords="310,350,15" href="map06.jpg">
<area shape="circle" coords="284,451,15" href="map07.jpg">
<area shape="circle" coords="208,485,15" href="map08.jpg">
</map>
</div>
</div>

...这是我要替换的图像...

<div id="vtleft">
<div id="vtimg">
<img id = "vtimage" src="map01.jpg" width="255" height="180" class="vtimage">
</div>
</div>

如果图像交叉淡入淡出或者只是淡入/淡出，如果这不会延长友谊，那就太好了！

我已经尝试了一堆菜鸟级别的功能，我不会因为发布而让自己尴尬，可能只会让事情变得混乱。任何帮助表示赞赏！

Answer 1

试试这个 ：

var rePlace;
$(document).ready(function(){
  $('map[name="vtmap"] area').each(function() {
    $(this).on("click", function(e) {
      e.preventDefault();
      rePlace = '<img id="vtimage" src="' + this.href + '" width="255" height="180" class="vtimage" />';
      $("#vtimg").html(rePlace).hide().fadeIn();
    }); // on
  }); // each​
}); // ready

注意为了使用.on()jQuery v1.7+ 是必需的