使用javascript单击HTML可以多次更改图片
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用javascript单击HTML可以多次更改图片相关的知识，希望对你有一定的参考价值。
我需要一个带有javascript的html程序，它有两张图片，点击从图片A到B，从图片B到A，等等。我想我需要一个循环......
答案
请尝试以下代码
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn on/off the light.</p>另一答案
你可以在这里找到你想要做的一个很好的例子：https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
你只需稍微调整它就可以正确地改变图像。我建议使用变量构建一个函数来存储图像名称。
<script>
function ChangeImage(){
var picElement1 = document.getElementById('HTMLImgElement1');
var picElement2 = document.getElementById('HTMLImgElement2');
var temp = picElement1.src;
picElement1.src = picElement2.src;
picElement2.src = temp;
}
</script>
在html中只需使用ID HTMLImgElement1和HTMLImgElement2设置2个图像。以及一个带有onclick attr的按钮，它将转发到此功能。
以上是关于使用javascript单击HTML可以多次更改图片的主要内容，如果未能解决你的问题，请参考以下文章