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>

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

2 个答案: