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