Question

我有这个功能显示左右移动的图像。有没有办法在html页面中创建一个更改其中一个图像的按钮？

例如，如果你点击“告诉一个笑话”happy.png更改为laugh.png？

//fish moves on mouse hover
$(document).ready(function() {  
    $("#swim").mousemove(function (event) {//defines the swim area 
        var fish = $("#fish1");//defines the fish css styles
        var position = fish.position();
        var mousey = event.pageX;

        if (position.left > mousey) {
            $("#fish1").html("<img src='images/happy.png' />");//when swimming left, show left facing fish
        } else {
            $("#fish1").html("<img src='images/happyback.png'/>");//when swimming right, show right facing fish
        }

        $("#fish1").stop().animate({//animates the two images to show animated swimming
            left: event.pageX,
            top: event.pageY
        }, 300);
    });
});

Answer 1

这样的事情应该有效

<button type="button" onclick="$('#fish1').prop('src','images/laugh.png');">tell a joke</button>

在一个函数中更改图像onclick

1 个答案: