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>

单击按钮时更改img

3 个答案: