点击图像变化

所以我在我的网站上有一个图像是一个图像，我试图做到这一点，当你点击按钮的图像时，它会变成一个不同的按钮的图像给它按下按钮的效果。在互联网上四处寻找后，这就是我想出了：点击图像变化

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

来源

2013-06-27 MoneyMike

我会使用onmousedown事件的onmouseup – mplungjan

这可以用CSS来实现：我甚至不会使用Javascript或img标签来实现这样的事情（除非标记是你控制范围之外的东西）。这可能有所帮助：http://www.usabilitypost.com/2008/12/16/pressed-button-state-with-css/ – technophobia

@mplungjan这工作完美！非常感谢！ – MoneyMike

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

来源

2013-06-27 21:08:20

我不知道我怎么会这么做。但加载图像不是问题;这是因为任何原因图像不会出现 – MoneyMike

通常这是用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/（请记住，“返回false;”禁用只是链接该节目）

来源

2013-06-27 21:19:44 jacmkno

谢谢！我的问题已经在评论中得到了回复，但是我很感激任何信息，这会更好地了解我的知识 – MoneyMike

你不需要JS，纯粹的CSS实现将工作得很好。使用:active选择：

button { 
    background: #000; 
} 

button:active { 
    background: #fff; 
}

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

我希望这是你追求的:)

来源

2013-06-27 21:24:47

谢谢您的洞察！ – MoneyMike

点击图像变化

回答

相关问题