Create A HTML Page With JavaScript When We Click The Light Bulb To Turn On/Off The Light.
When We Click A Button JavaScript Change The Image So We Think Bulb Is On Again Click The It Again Change The Image So Bulb Look Like It Is off This Is A Trick Behind Bulb On/off
For This Program You Have To Download Both Image Bulb On And Bulb Off
Here Is A Code
bulb.html
<!DOCTYPE html>
<html>
<body align="center" bgcolor="#686899">
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<h2>Click the light bulb to turn on/off the light.</h2>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
</body >
</html>
Output:-
When We Click A Button JavaScript Change The Image So We Think Bulb Is On Again Click The It Again Change The Image So Bulb Look Like It Is off This Is A Trick Behind Bulb On/off
For This Program You Have To Download Both Image Bulb On And Bulb Off
Here Is A Code
bulb.html
<!DOCTYPE html>
<html>
<body align="center" bgcolor="#686899">
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<h2>Click the light bulb to turn on/off the light.</h2>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
</body >
</html>
Output:-
Thanks Bro Sharing Your Knowledge With us
ReplyDeleteWelcome Reader if any thing you need related to programming plz feel free
DeleteThanks for visiting
Not working
ReplyDeleteIt's 100% Working, Can you please tell me before run this program you download both images Bulb On and Bulb Off. if you Not Please Download first and keep in same folder then Run the Script again.
Deletewhere are the images bro???
ReplyDelete