Tukar imej melalui fungsi onclick().

Question

Saya mahu menukar satu imej kepada imej lain apabila mengklik pada objek. Kod disusun mengikut susunan berikut:

<li><img><beberapa teks></img></li>
<li><img><beberapa teks></img></li>
<li><img><beberapa teks></img></li>
<li><img><beberapa teks></img></li>
<li><img><beberapa teks></img></li>

Apa yang saya mahu ialah apabila saya mengklik

, imej itu bertukar kepada versi warna imej, iaitu imej lain. Sekarang, saya tahu saya boleh melakukannya menggunakan JQuery/JS. Tetapi saya tidak mahu menambah banyak kod JS untuk mencapai fungsi yang begitu mudah.

Adakah terdapat cara yang lebih mudah untuk melakukan ini? Kaedah seperti kelas pseudo-selector.active

Saya tidak dapat memikirkannya.

Answer 1

Untuk menukar acara onclick imej menggunakan JavaScript, anda perlu mempunyai imej dengan id:

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

Kemudian apabila imej diklik anda boleh memanggil fungsi 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";
    }
}

Kod ini akan menetapkan imej untuk memaksimumkan.png apabila img.src semasa ditetapkan untuk meminimumkan.png dan sebaliknya. Untuk butiran lanjut, sila layari: Tukar pautan acara onclick imej menggunakan JavaScript