Question

所以我的网站上有一个按钮就是一个图像，我试图让它当你点击按钮的图像时，它会变成一个不同按钮的图像，它会产生效果。按下按钮。在网上浏览后，这就是我想出的：

<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来源。我的问题是当我点击按钮的图像时，图像确实会发生变化，但无论出于何种原因，出现的图像都是破碎的图像，我的图像路径都是正确的，因为当我输入到我的图像时浏览器，它会转到正确的图像。

Answer 1

通常这是用css完成的。这就是它的工作原理：http://jsfiddle.net/2wS89/

<p class="center">
    <span class="btcont"><a class="btn" href="/index.php/about-us/about-cmi"></a></span>
</p>

<style>
    A.btn{ width: 144px; height: 35px; display:block;
        background: url(someimage.jpg) center center no-repeat;
    }
    A.btn:active{
        background: url(someotherimage.jpg) center center no-repeat;
    }
    .btcont {font-family: arial, helvetica, sans-serif;}
    .center {text-align: center;}
</style>

如果你想让它永久改变你必须添加更多的CSS和一点js： http://jsfiddle.net/2wS89/2/（请记住＆＃34;返回false;＆＃34;仅为节目禁用链接）

Answer 2

尝试提前加载两个图像，一个在另一个上面，然后您可以使顶部图像可见/不可见。这也允许更容易的测试，并且当按下按钮时，慢速链接上的某个人不必等待第二个图像加载。

Answer 3

你不需要JS，纯CSS实现就可以了。使用:active选择器：

button {
    background: #000;
}

button:active {
    background: #fff;
}

以下是一些文档：http://www.w3schools.com/cssref/sel_active.asp

我希望这就是你所追求的：）

点击后图像会发生变化

3 个答案: