javascript - 当用户将鼠标悬停在其上时，将 src 链接地址从 png 更改为 gif

Question

这是我的 JS

script type="text/javascript">

  var src = $('Pic').attr('src');
  $('Pic').hover(function()
  {
    $(this).attr('src', src.replace('.png', '.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });
</script>

这是我的图像按钮：

<input id="Pic" type="image" src="BeerButton1.png" alt="Submit" width="600" height="600" style="top: 15%; position: absolute; left: 30%;" />

Answer 1

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    var src = $('#Pic').attr('src');
    $('#Pic').hover(function(){
         $(this).attr('src', src.replace('.png', '.gif'));
    }, function(){
        $(this).attr('src', src);
    });
  });
  </script>

Answer 2

对 jQuery 的调用需要包含在：

$(function(){ // do stuff })

这是简写

$(document).ready(function() { // do stuff });

此外，如果您有多个这些图像，而不是在 hover() 定义之外保存 var，只需在 png 和 gif 之间交换任何一种方式。

所以...

<script type="text/javascript">
$(function(){        
    $('#Pic').hover(function(){
        $(this).attr('src', src.replace('.png', '.gif'));
    }, function(){
        $(this).attr('src', src.replace('.gif', '.png'));
    });
})
</script>