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>

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

我尝试了一堆noob级别的功能，我不会通过张贴让自己难堪，可能只是混淆了一些东西。任何帮助表示赞赏！

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 +是必需的

jquery替换imagemap上的图像点击

1 个答案: