<p>Ich möchte ein Bild in ein anderes ändern, wenn ich auf das Objekt klicke. Codes werden in der folgenden Reihenfolge gestapelt: </p> <pre class="brush:php;toolbar:false;"><li><img><some text></img></li> <li><img><etwas Text></img></li> <li><img><etwas Text></img></li> <li><img><etwas Text></img></li> <li><img><etwas Text></img></li></pre> <p>Was ich möchte ist, dass, wenn ich auf <code><li></code> klicke, das Bild in eine Farbversion des Bildes wechselt, also ein anderes Bild. Jetzt weiß ich, dass ich es mit JQuery/JS machen kann. Aber ich möchte nicht viel JS-Code hinzufügen, um eine so einfache Funktion zu erreichen. </p> <p>Gibt es eine einfachere Möglichkeit, dies zu tun? Methoden wie die Klasse pseudo-selector<code>.active</code> </p> <p>Ich kann es mir nicht vorstellen. </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";
    }
}