onclick (onmousdown) 改变图片

Question

目标：当有人点击我网站上的徽标时，通过将图像更改为具有更强内阴影的不同图像或顶部填充几个像素的图像，它似乎被“推动”了。

我一直在这里阅读板，并在教程后尝试教程以使其正常工作，但仍然遇到问题。我现在要回到非常简单的代码......没有额外的CSS......没有javascript，但我发现我可能不得不使用其中一个或两个。现在（使用非常基本的 html，没有 CSS 或 JS）我发现当我的徽标被点击时，第二个图像出现，但在第一个图像后面。第一张图片并没有消失，点击后我只能看到测试图片在它后面发光（可能是因为我使用的是“背景图片”，但这是我能够看到任何变化的唯一方法)。

<div class="logo"><a href="index.html"><img src="images/logo.png" onmousedown="this.style.cssText='background-image:  url(images/logo-click.png)'" onmouseup="this.style.cssText='background-image:  url(images/logo.png)'" /></a></div>

CSS 我可以处理，但我对 JS 的了解有限，所以如果这必须涉及 JS，请给我一个模板或教程。我已经找到了大量关于如何在 CSS 中从头开始创建这种效果的教程，但我不能用我的徽标来做到这一点，因为它是一个图像。

显示一个主图像似乎应该很简单，单击它可以显示不同的图像，然后松开单击以显示原始图像，没有花哨的平滑过渡效果。然而......我正在努力解决这个问题。

Answer 1

如果您只想在单击鼠标时获得更改，您可以使用 CSS 的 :active 元素。
我尚未测试以下代码，但我认为它应该可以工作：

a {
    background-image:  url(images/logo.png)
}

a:active {
    background-image:  url(images/click.png)
}