Изменение SRC изображения при наведении мыши - PullRequest
Новая
       40

Изменение SRC изображения при наведении мыши

0 голосов
/ 01 июня 2018

Что я хочу: когда мой курсор находится над областью #ota-tail, img меняется на другое изображение, и когда мы прекращаем наложение, исходное изображение возвращается.У меня нет ничего в моей консоли с кодом ниже: 

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

1 Ответ

0 голосов
/ 01 июня 2018

Для этого вы можете использовать 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';" />
...