透過onclick()函數更改圖像

Question

我想在點擊物件時將一張圖片更換為另一張圖片。程式碼按照以下順序堆疊：

<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>

我希望的是，當我點擊

時，將圖片更換為彩色版本的圖片，即另一張圖片。現在，我知道我可以使用JQuery/JS來實現。但是我不想為了實現這麼簡單的功能而添加大量的JS程式碼。

有沒有更簡單的方法來實作？像是偽選擇器.active類別這樣的方法？

我想不出來。

Answer 1

要使用JavaScript更改圖像的onclick事件，您需要具有具有id的圖像：

<p>
    <img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png" 
        style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"/>
</p>

然後，當您按一下圖像時，您可以呼叫JavaScript函數：

function changeImage() {
    if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png"){
        document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
    } else {
        document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";
    }
}

此程式碼將在目前img.src設定為minimize.png時將影像設定為maximize.png，反之亦然。 有關更多詳細信息，請訪問： 使用JavaScript更改圖片的onclick事件連結