點擊圖像變化

所以我在我的網站上有一個圖像是一個圖像，我試圖做到這一點，當你點擊按鈕的圖像時，它會變成一個不同的按鈕的圖像給它按下按鈕的效果。在互聯網上四處尋找後，這就是我想出了：點擊圖像變化

<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

點擊圖像變化

回答

相關問題