Hello Guys,
Now we make light on and off animation using javascript. It's simple JavaScript and CSS coding. So let's start -
At first download both images which are given in below. You must know that all the files will be in one folder.
Now create an HTML file and give a name index.html
<html>
<head>
<title>JavaScript light on and off code</title>
<style>
body{
text-align: center;
font-family: sans-serif;
font-size: 3vw;
}
</style>
</head>
<body>
<img id="lighbulb" onclick="changeImage()" src="./pic_bulboff.gif" width="200" height="360">
<p>Click the light bulb to turn on/off the light.</p>
<script>
function changeImage() {
var image = document.getElementById('lighbulb');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
</body>
</html>
You can also use external css or javascript files for coding.
Preview of Coding
Click the light bulb to turn on/off the light.
(0)
Login first for like post.
Hello, Dear