Question

我想要的是：当我的光标覆盖区域#ota-tail时，img会更改为另一个图像，当我们停止覆盖时，原始图像会返回。我的控制台中没有任何内容，但代码如下：

＆＃13;

$(function(){

  $("#ota-tail").hover(function(){
    $("#ota-img").eq(0).attr('src','about/about_tail.png');
  }, function(){                      $("#ota-img").eq(0).attr('src','about/about_null.png');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="ota-img test" src="public/js/about/about_null.png" usemap="#image-map">
<map name="image-map">
<area id="ota-tail" alt="queue de l'otarie" coords="353,376,399,408,403,429,295,430,324,383" shape="poly">
<area id="ota-body" alt="corps de l'otarie" coords="472,288,582,332,543,388,463,409,399,408,353,375,404,306" shape="poly">
<area id="ota-paw" alt="patte de l'otarie" coords="510,397,540,389,562,428,509,428" shape="poly">
<area id="ota-head" alt="tête de l'otarie"  coords="595,164,526,184,486,224,471,287,583,332,594,249" shape="poly">
</map>

＆＃13;

Answer 1

您可以使用CSS：

#ota-img{
   background-image: url('about/about_tail.png');
}

#ota-img:hover {
   background-image: url('SOURCEFORTHEIMAGEYOUWANT');
}

另一种选择是使用JavaScript：

<img src='about/about_tail.png' onmouseover="this.src='SOURCEFORTHEIMAGEYOUWANT';" onmouseout="this.src='about/about_tail.png';" />

鼠标悬停区域时更改图像的src

1 个答案: