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

Answer 2

尝试这样的事情：

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

或ID和数据属性：

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

如果您想使用更多的实例，请使用类。

区域悬停时更改img src

2 个答案: