Question

I have an image map in one div and I want to replace the image in another div when the hotspots are clicked.

Here’s the map…

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

…and here’s the image I’m trying to replace…

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

Be nice if the images crossfaded or just fade in / fade out as well if that’s not stretching the friendship!

I’ve tried a bunch of noob level functions that I won’t embarrass myself by posting, probably only confuse things. Any help is appreciated!

Answer 1

Try this :

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

Note in order to use .on() jQuery v1.7+ is required