![](/img/trans.png)
[英]Elementor JavaScript change image when Accordion clicked
[英]Change image when clicked via javascript
我正在建立一个用于家庭自动化的网站,我试图使图像在单击时发生变化,但是发生的事情是该图像消失了,没有变回! 我尝试了多个在线脚本,但结果相同。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Raspberry Pi Home Automation</title>
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "C:\Users\Nour\Desktop\Raspberry Pi Website\images\light_is_on.png")
{
document.getElementById("imgClickAndChange").src = "C:\Users\Nour\Desktop\Raspberry Pi Website\images\light_is_off.png";
}
else
{
document.getElementById("imgClickAndChange").src = "C:\Users\Nour\Desktop\Raspberry Pi Website\images\light_is_on.png";
}
}
</script>
</head>
<body>
<p> <img src="C:\Users\Nour\Desktop\Raspberry Pi Website\images\light_is_on.png" id="imgClickAndChange" onclick="changeImage()"> </p>
</body>
</html>
我不确定您正在发生什么,但是您的脚本似乎运行正常,如下所示。
您确定图像路径/文件名正确吗? 如果第二个图像不存在,它将只是一个没有src图像的空标签,因此没有宽度或高度供您再次单击以将其更改回。
还要检查控制台,让我们知道那里是否有任何错误。
function changeImage() { if (document.getElementById("imgClickAndChange").src == "https://via.placeholder.com/150/0000ff"){ document.getElementById("imgClickAndChange").src = "https://via.placeholder.com/150/ff0000"; }else{ document.getElementById("imgClickAndChange").src = "https://via.placeholder.com/150/0000ff"; } }
<img src="https://via.placeholder.com/150/0000ff" id="imgClickAndChange" onclick="changeImage()">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.