如何在点击时更改图像并在点击时再次返回

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

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

DEMO.

希望这项工作。

Answer 2

如果您愿意，也可以只使用CSS来完成。

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

<input type="checkbox"/>

你的CSS：

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

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