單擊按鈕時更改img

Question

我有一個包含按鈕的jsp頁面，當我單擊按鈕時，將打開一個模態，該模態內發生的任何事情都與js文件鏈接（不再有jsp）。 所以這是我的模態表（js文件）中的表：

html = '<table style="width:400px;height:250px;">'

    + '<tr><td title="grp"><img id="groupBtn" src="group.png"></td>'

            +'<td title="1st"><img id="1stBtn" src="1st.png""></td>'

如您所見，這是js文件中的html代碼，而不是jsp中的普通代碼。 （我不知道確切的用語。）

因此，我無法為js文件中創建的表編寫<style></style>標簽。

我想做什么：單擊按鈕時更改圖像； 不是鼠標輸入，不是圖像更改，而是a:active 。

我的問題：它在img標簽，而不是a標簽

所以我嘗試了

+ '<tr><td title="그룹"><a id="test1><img id="groupBtn" src="group.png"></a></td>'

這但問題是我不知道放在哪里

#test1:active{
    background-image : url('clicked.png');
}

在谷歌搜索時，我發現這行不通，因為這不是您更改img標簽中src的方式。

html = '<table style="width:400px;height:250px;">'

    + '<tr><td title="grp"><img id="groupBtn" src="group.png"></td>'

            +'<td title="1st"><img id="1stBtn" src="1st.png""></td>'

^我應該如何將<img id=>為可以與a:active標記一起使用的內容？ 或者，我是否應該永遠不要使用標簽，而只是將整個標簽更改為其他標簽？ 另外，如果我想給html在js文件中創建的元素賦予樣式，我應該在哪里添加樣式標簽？

---

為了節省您的寶貴時間，我想總結一下，我希望按鈕上的圖像僅在單擊鼠標（更精確地按下）時才更改，然后不再按下鼠標，我希望按鈕圖像能夠返回原始圖像。 那就是為什么我說我想要一個類似於a:active標簽的東西，因為它只會在按下鼠標時更改css，而在不再按下鼠標時更改回css！

Answer 1

如果您只想更改點擊，則可以在腳本標簽中添加onClick處理程序，而不是通過CSS進行更改。

<a id="test1" onclick="changeImgSrc()"><img id="groupBtn"  src="group.png"></a>

在您的js文件中的某個位置具有此功能。

  function changeImgSrc(){
      var groupImg = document.getElementById('groupBtn');
      groupImg.src = "clicked.png";   // path of the img
      return false // required to prevent default browser behaviour.
 }

Answer 2

使用css類的另一種選擇。

 .image{ height:400px; width:600px; background: url('https://picsum.photos/200/300') no-repeat; } .image:hover{ background: url('https://picsum.photos/250/450?grayscale') no-repeat; } 

 <div class="image"></div> 

Answer 3

這可能對您有幫助。

function imgToNew(){
  var image= document.getElementById('groupBtn');
  image.src = "newImage.png"; 
}

function imgToOrig(){
  var image= document.getElementById('groupBtn');
  image.src = "group.png";
}

<a id="test1" onmousedown="imgToNew()" onmouseup="imgToOrig()"><img id="groupBtn"  src="group.png"></a>