在一個函數內改變圖像onclick

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>