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

Change a src link address from png to gif when a user hovers over it

本文关键字：png gif 悬停 鼠标 用户 src 地址 链接      更新时间：2023-09-26

这是我的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%;" />

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

对jQuery的调用需要封装在:

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

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

另外，如果您有多个这样的图像，而不是在hover()定义之外持有一个变量，只需在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>

相关文章：