Bild über die Funktion onclick() ändern

Question

Ich möchte ein Bild in ein anderes ändern, wenn ich auf das Objekt klicke. Codes werden in der folgenden Reihenfolge gestapelt:

<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>

Was ich möchte ist, dass, wenn ich auf

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.

Gibt es eine einfachere Möglichkeit, dies zu tun? Methoden wie die Klasse pseudo-selector.active

Ich kann es mir nicht vorstellen.

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事件链接