javascript - 单击按钮时更改img

我有一个包含按钮的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！

最佳答案

这可能对您有帮助。

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>