在区域悬停时更改img src

Question

<img src="img/clear-map-bg.png" alt="" usemap="my-map" />
<map name="my-map">
    <area shape="rect" coords="24,39,108,187,25,186,24,39" alt="" class="img1" />
    <area shape="rect" coords="173,117,230,116,238,276,176,289" alt="" class="img2" />
    <area shape="rect" coords="226,109,287,104,291,256,231,270" alt="" class="img3" />
    <area shape="rect" coords="283,102,340,97,346,269,286,252" alt="" class="img4" />
</map>

I want to change the path of the image on mouseover the area. I have 4 different images

Answer 1

HTML:

<img src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg"/>

  <div id="wrapper">
    <area id="img1" />
    <area id="img2" />
    <area id="img3" />
    <area id="img4" />
  </div>

CSS:

area {
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 0px;
}

#img1 {
  background-color: red;
}

#img2 {
  background-color: yellow;
}

#img3 {
  background-color: green;
}

#img4 {
  background-color: orange;
}

JS:

$(function(){

  $("#img1").hover(function(){
    $("img").eq(0).attr('src','https://s3.amazonaws.com/uifaces/faces/twitter/sauro/128.jpg');
  }, function(){                      $("img").eq(0).attr('src','https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg');
  });

  $("#img2").hover(function(){
    $("img").eq(0).attr('src','https://s3.amazonaws.com/uifaces/faces/twitter/zack415/128.jpg');
  }, function(){                      $("img").eq(0).attr('src','https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg');
  });

  $("#img3").hover(function(){
    $("img").eq(0).attr('src','https://s3.amazonaws.com/uifaces/faces/twitter/abinav_t/128.jpg');
  }, function(){                      $("img").eq(0).attr('src','https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg');
  });

  $("#img4").hover(function(){
    $("img").eq(0).attr('src','https://s3.amazonaws.com/uifaces/faces/twitter/shalt0ni/128.jpg');
  }, function(){                      $("img").eq(0).attr('src','https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg');
  });

});

RESULT - http://jsbin.com/zefuxanoco/edit?html,css,js,output

Answer 2

Try somthing like this:

<img src="img/clear-map-bg.png" alt="" usemap="my-map" />
<map name="my-map">
    <area shape="rect" coords="24,39,108,187,25,186,24,39" alt="" class="img1" />
    <area shape="rect" coords="173,117,230,116,238,276,176,289" alt="" class="img2" />
    <area shape="rect" coords="226,109,287,104,291,256,231,270" alt="" class="img3" />
    <area shape="rect" coords="283,102,340,97,346,269,286,252" alt="" class="img4" />
</map>

<script>
    $( "map[value='my-map'] area" ).each(function(){
        $(this).bind('hover',function(){
            var url = 'xy.jpg';
            $("img[usemap='my-map']").attr('src', url);
        });
    });
</script>

or with IDs and data attributes:

<img id="myimage" src="img/clear-map-bg.png" alt="" usemap="my-map" />
<map id="mymap" name="my-map">
    <area shape="rect" coords="24,39,108,187,25,186,24,39" alt="" data-img="image_1.jpg" />
    <area shape="rect" coords="173,117,230,116,238,276,176,289" alt="" data-img="image_2.jpg" />
    <area shape="rect" coords="226,109,287,104,291,256,231,270" alt="" data-img="image_3.jpg" />
    <area shape="rect" coords="283,102,340,97,346,269,286,252" alt="" data-img="image_4.jpg" />
</map>

<script>
    $("#mymap area").each(function(){
        $(this).bind('hover',function(){
            var url = $(this).attr('data-img');
            $('#myimage').attr('src', url);
        });
    });
</script>

Use classes if you want to use more tham one instance.