4/25/2016

Create A HTML Page With JavaScript When We Click The Light Bulb To Turn On/Off The Light.

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:-

www.programmingwithbasics.com

www.programmingwithbasics.com

Ghanendra Yadav

Ghanendra Yadav

Hello, I Am Ghanendra Yadav Owner of This Blog, I am professional Blogger and Programmer. I Love Programming, Logo Making, And Banner Designing. My Highest Qualification is MCA From NIT Warangal. You Can Find Me On Social Media Through Below Link And If You Have Any Query Related To Programming And Other Subject Comment Below or You Can Mail Me I Will Try To Answer Within 24 Hours Email:- yghanendra@student.nitw.ac.in

Find me on Social Media

Facebook | Twitter | Google+ | RSS Feed

4 comments:

  1. Thanks Bro Sharing Your Knowledge With us

    ReplyDelete
    Replies
    1. Welcome Reader if any thing you need related to programming plz feel free

      Thanks for visiting

      Delete
  2. Replies
    1. It'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.

      Delete