Change image on click, with image map

Question

I'm trying to use one image map multiple times. The idea is that you've got an picture with image map. You click on one area (there's a highlight on the image map), you get few links, you press one and and the picture is changed. The new picture is using the same image map as the original one (only the colors change in the image).

I've tried the solution offered here: Jquery change image on click

But it doesn't work because there's the image map. My code is:

    <script type="text/javascript" src="jquery.maphilight.js"></script>

<script type="text/javascript">$(function() {
        $('.map').maphilight();
    });</script>
 <script type="text/javascript src="src="http://code.jquery.com/jquery-latest.js"></script>

 <script>
  $(document).ready(function () {
    $('#area1').click(function () {
        $("#areaOne").show();
    });
    $('#area2').click(function () {
        $("#areaTwo").show();
    });
});
$(function() {
 $('#areaOne').click(function(){
   $("#pic").attr('src',"pic2.jpg");
   return false;
 });
});
   </script>


<img class="map" id="pic"  src="pic.jpg" width="800" height="533" border="0"  usemap="#map" />

<map name="map" >
<area  shape="poly" id="area1" coords="201,316,220,324,257,350,290,385,315,423,329,456,297,466,235,476,194,479,158,481,128,474,101,453,94,440,93,426,96,411,114,389,137,367,168,342" href="javascript:myFunction(1)" />
<area shape="poly" id="area2"coords="204,315,226,324,254,345,288,379,313,414,330,455,380,439,446,409,489,368,517,329,541,300,580,266,581,254,567,241,549,240,531,242,514,250,489,264,465,282,441,298,416,306,394,303,348,283,323,264,296,236,246,285" href="javascript:myFunction(2)"/>
</map>
<br />

<div id="pushnshow">
Click on Image Map and you will see<br />
<div id="areaOne" class="areaOne "style="display: none" >this </div>
<div id="areaTwo" style="display: none">and this</div>

<br />

The problem seems to be in usemap=#map because when I take that away, the picture changes just fine but without the highlighting. What's wrong?

Answer 1

When maphilight runs it wraps the <img /> in a <div class="map" /> and hides the <img />. Is then adds the image as a background to the new wrapping <div class="map" />.

To get your code to work change this:

 $('#areaOne').click(function(){
   $("#pic").attr('src',"pic2.jpg");
   return false;
 });

to this:

 $('#areaOne').click(function(){
   $("#pic").attr('src',"pic2.jpg");
   $("#pic").parent().css('background-image',"url(pic2.jpg)");
   return false;
 });

No test case unfortunately but I'm confident that will work for you. Hope it helps!