在HTML中,我們可以通過點擊按鈕來動態地改變圖片的顯示。具體實現方式如下:
<html> <head> <script> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("pic1")) { image.src = "pic2.jpg"; } else { image.src = "pic1.jpg"; } } </script> </head> <body> <img id="myImage" src="pic1.jpg" width="200" height="200"> <br> <button onclick="changeImage()">點擊我換圖</button> </body> </html>
在這個代碼中,我們首先定義了一個名為changeImage()的JavaScript函數。當我們點擊按鈕時,該函數被觸發。它首先獲取id為myImage的元素,然后判斷它當前的src屬性是否包含字符串“pic1”。如果是,則將其src屬性改為“pic2.jpg”,否則將其src屬性改為“pic1.jpg”。這樣一來,圖片就會動態地切換。最后,我們在頁面中輸出了一個元素和一個按鈕,同時給按鈕綁定了事件,使得點擊按鈕時調用changeImage()函數。
通過這樣的代碼,我們就可以實現簡單有趣的圖片切換效果了!