Question

我遇到了问题，我无法弄清楚如何在没有点击图片时更改图片。当用户单击图像时，它会显示应该显示的图像。但是，我想在点击后更改图像......怎么能这样做？现在，当您单击图像时，它会发生变化，但只有当您的鼠标不在该图像上时才会保留在单击的图像上并更改为默认图像。

我的代码..

<img src="pictures/fbutt.jpg" width="640" height="360"
onmouseover="this.src='pictures/fbuttho.jpg'"
onmouseout="this.src='pictures/fbutt.jpg'" onclick="this.src='pictures/fbuttac.jpg'"/>

Answer 1

使用jquery查看这个小小的演示： https://jsfiddle.net/fodxvssn/

$(document).ready(function()
{
    $("#img").mouseup(function() 
    {
        $(this).attr("src", "http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=ea71a5211a91");
    });

    $("#img").mousedown(function()
    {
        $(this).attr("src", "http://i.stack.imgur.com/CE5lz.png");
    });
});

Answer 2

例如，您的HTML就是这样......

<img id="pic" src="pictures/fbutt.jpg" width="640" height="360"/>

为其分配一个id并在其上绑定jQuery mouseup和mousedown事件。

<script>
$(document).ready(function(){
    $("#pic")
      .mouseup(function() {
          $( this ).attr('src','pictures/fbuttac.jpg' );
      })
      .mousedown(function() {
          $( this ).attr('src','pictures/fbutt.jpg' );
      });
});
</script>

Answer 3

试试这个

<img id="testImage" src="http://i.huffpost.com/gen/964776/images/o-CATS-KILL-BILLIONS-facebook.jpg" alt="..." width="300" height="300" />

<script>
  var imageEl = document.getElementById('testImage');
  var newImg = 'http://www.mycatspace.com/wp-content/uploads/2013/08/adopting-a-cat.jpg';
  var defaultImg = imageEl.src;

  imageEl.onmousedown = function() {
    this.src = newImg;
  }

  imageEl.onmouseup = function() {
    this.src = defaultImg;
  }
</script>

单击时更改图像，然后将其更改回来

3 个答案: