I'm building a website for home automation, I'm trying to get the image to change when I click it but what happens is it disappears into nothing and doesn't change back! I've tried multiple online scripts but same result.
<!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>
Aucun commentaire:
Enregistrer un commentaire