<p>Saya mahu menukar satu imej kepada imej lain apabila mengklik pada objek. Kod disusun mengikut susunan berikut: </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Apa yang saya mahu ialah apabila saya mengklik <kod><li></kod>, 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. </p> <p>Adakah terdapat cara yang lebih mudah untuk melakukan ini? Kaedah seperti kelas pseudo-selector<code>.active</code> </p> <p>Saya tidak dapat memikirkannya. </p>

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

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";
    }
}