0

ある 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>

画像がクロスフェードしたり、フェードイン/フェードアウトしたりしても、それが友情を広げていない場合は、素敵です!

私は、投稿することで恥ずかしくない、おそらく物事を混乱させるだけの初心者レベルの関数をたくさん試しました。どんな助けでも大歓迎です！

4

1 に答える 1

0

これを試して ：

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+を使用するには注意が必要です

于 2012-11-05T07:58:46.653 に答える