html - 如何在单击时更改图像并在单击时再次返回

Question

我正在构建一个 Javascript 应用程序

现在我想要一个我已经给出的图像按钮现在我想在单击当前图像时将图像更改为另一个图像。

当我再次单击时，我想取回旧图像，请任何人通过提供编码示例来帮助我。

Answer 1

尝试这个：

function diffImage(img) 
{
   if(img.src.match(/blank/)) img.src = "black.jpg";
   else img.src = "blank.jpg";
}

HTML

<img src="black.jpg" id="image1" onclick=diffImage(this) />

只需尝试根据您的要求更改图像路径，或者您可以添加多个图像。

演示。

希望这项工作。

Answer 2

如果你愿意，你也可以只使用 CSS 来做到这一点。

只需制作一个复选框，这样您就可以单击它而无需触发事件并将图像放在那里，然后在单击时具有不同的图像。

<input type="checkbox"/>

还有你的 CSS：

input[type="checkbox"] {
    content: url(image url here);
}
input[type="checkbox"]:checked {
    content: url(different image here);
}

我不记得我在哪里学到的这个技巧，但它在过去对我有用。