0

所以我在我的网站上有一个按钮，它是一个图像，我正在尝试制作它，以便当您单击按钮的图像时，它会变为另一个按钮的图像，使其具有按钮的效果推。在互联网上浏览后，这是我想出的：

<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来源。我的问题是，当我单击按钮的图像时，图像确实会发生应有的变化，但是无论出于何种原因，出现的图像都是损坏的图像，并且我的图像路径都是正确的，因为当我将其键入我的浏览器，它会转到正确的图像。

4

3 回答 3

1

Usually this is done with css. This is how it works: 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>

If you want it to change permanently you have to add more css and a little js: http://jsfiddle.net/2wS89/2/ (keep in mind that the "return false;" disables the link just for the show)

于 2013-06-27T21:19:44.270 回答
0

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

button {
    background: #000;
}

button:active {
    background: #fff;
}

这里有一些文档：http ://www.w3schools.com/cssref/sel_active.asp

我希望这就是你所追求的:)

于 2013-06-27T21:24:47.030 回答
0

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

于 2013-06-27T21:08:20.227 回答