Onclick（onmousdown）更改圖片

Question

目標：當有人點擊我網站上的徽標時，通過將圖片更改爲具有較強內部陰影的圖片或帶有頂部填充圖案的圖片幾個像素。

我一直在這裏讀板，並在教程後嘗試教程，讓這個工作，但我仍然有問題。我現在正在回到非常簡單的代碼...沒有額外的CSS ...沒有JavaScript，但我發現我可能將不得不使用其中一個或兩個。現在（非常基本的HTML，沒有CSS或JS）我發現，當我的標誌被點擊的第二個圖像出現，但是是在第一個。第一張圖片不會消失，點擊時我只能看到背後發出的測試圖像（可能是因爲我使用了「背景圖片」，但這是我能夠看到任何更改的唯一方式）。

<div class="logo"><a href="index.html"><img src="images/logo.png" onmousedown="this.style.cssText='background-image: url(images/logo-click.png)'" onmouseup="this.style.cssText='background-image: url(images/logo.png)'" /></a></div> 

CSS我可以處理，但我對JS的知識是有限的，所以如果這必須涉及JS請指向我的模板或教程。我已經發現了大量關於如何在CSS中從頭開始創建這種效果的教程，但我無法通過我的徽標來實現這一點，因爲它是一個圖像。

現在看來似乎應該是簡單的顯示一個主圖像，點擊它顯示出不同的一個，讓你去點擊顯示原始，沒有花哨的平滑過渡效果。然而......我正在爲此而苦苦掙扎。

Answer 1

如果您只想在單擊鼠標時獲取更改，則可以使用CSS的active元素。
我沒有測試過下面的代碼，但我認爲它應該工作：

a { 
    background-image: url(images/logo.png) 
} 

a:active { 
    background-image: url(images/click.png) 
}