javascript - 更改区域悬停时的 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>

我想更改鼠标悬停在该区域上的图像的路径。我有 4 张不同的图像

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');
  });

});

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