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