Javascript 点击图片进行更改

所以我在我的网站上有一个按钮，它是一个图像，我试图使它，当你点击按钮的图像时，它会变成一个不同按钮的图像，给它一个按钮被按下的效果。在浏览了互联网后，我得出了以下结论：

<p style="text-align: center;">
  <span style="font-family: arial, helvetica, sans-serif;">
    <a href="/index.php/about-us/about-cmi">
      <img alt="" onclick="this.src='/images/yootheme/Button_Template_Long_CMI_Click copy.png';" src="/images/yootheme/Button_Template_Long_CMI copy.png" style="width: 144px; height: 35px;" />
    </a>
   </span>
</p>

我本来就有这个,

<p style="text-align: center;">
  <span style="font-family: arial, helvetica, sans-serif;">
    <a href="/index.php/about-us/about-cmi">
      <img alt="" src="/images/yootheme/Button_Template_Long_CMI copy.png" onclick="this.src='/images/yootheme/Button_Template_Long_CMI_Click copy.png';" style="width: 144px; height: 35px;" />
    </a>
  </span>
</p>

---

但是当我保存它时，它切换了原始源代码和

onclick

源代码。我的问题是，当我单击按钮的图像时，图像确实会像预期的那样发生变化，但无论出于何种原因，显示的图像是损坏的图像，并且我的图像路径都是正确的，因为当我在浏览器中键入该图像时，它会转到正确的图像。

尝试提前加载两个图像，一个在另一个之上，然后可以使顶部图像可见/不可见。这也使得测试更容易，当按下按钮时，处于慢速链接的用户不必等待第二个图像加载。

通常这是通过css完成的。这就是它的工作原理：

A.btn{宽度：144px；高度：35px；显示：块；
背景：url（someimage.jpg）中心不重复；
}
A.btn：活动{
背景：url（someotherimage.jpg）中心不重复；
}
.btcont{字体系列：arial、helvetica、无衬线；}
.center{text align:center；}

如果您想永久更改，则必须添加更多css和一点js：

---

（请记住，“return false；”仅为节目禁用链接）

您不需要JS，一个纯CSS实现就可以了。使用

：active

选择器：

button {
    background: #000;
}

button:active {
    background: #fff;
}

以下是一些文档：

---

我希望这就是你想要的：）

我会使用onmousedown和onmouseup这可以通过CSS实现：我甚至不会使用Javascript或img标记来实现类似的功能（除非标记超出了你的控制范围）。这可能会有帮助：@mplungjan，它工作得很好！非常感谢你！我甚至不知道该怎么做。但是加载图像不是问题；不管出于什么原因，这张照片都不会让你产生洞察力！非常感谢。我的问题已经在一篇评论中得到了回答，但我非常感谢任何能让我更加了解的信息

button {
    background: #000;
}

button:active {
    background: #fff;
}