Jump to content

The Light Bulb


Recommended Posts

Hello friends!. This is my first time to learn Js. I'm confused to get this codes.

 

See the attached image. I've seen there an image called pic_bulboff.gif in img html tag, that I marked with red color. Unfortunately, I didn't find any HTML tag with pic_bulbon.gif back there in this Tryit Editor , (I marked by green) Even how is it possible to show this image {pic_bulbon.gif) there by clicking on the " Turn on the light" button?

 

 

Thanks in advance.

 

 

 

post-181930-0-90131200-1475006667_thumb.png

Link to post
Share on other sites

Not sure what you're asking. Are you trying to get the Tryit Editor to work, or are you trying to run this locally? If you want to save the images locally you can do that with your browser. Right click on the image and choose Save As.

 

Otherwise, please let us know specifically what the context is and what error / issues you are encountering. FWIW, the TryIt Example works for me (light bulb turns on / off).

Link to post
Share on other sites

Not sure what you're asking. Are you trying to get the Tryit Editor to work, or are you trying to run this locally? If you want to save the images locally you can do that with your browser. Right click on the image and choose Save As.

 

Otherwise, please let us know specifically what the context is and what error / issues you are encountering. FWIW, the TryIt Example works for me (light bulb turns on / off).

 

Thanks for the reply! Actually I'm bad in English, Sorry for the inconvenience. By the way, This is what I wanted to know, see here in <img> tag, src image is "pic_bulboff.gif", only and this is normal that it refers to Turn off the light button. But where is the "pic_bulbon.gif" image source that can refer to Turn on the light button? What do you think, is it a magic or anything else that I don't know, Please?

 

Note: I'm going to practice with same codes in Notepad++ to make something like that and yes, I got a nice result without only an issue, that, there isn't any impact by clicking on Turn off the light and Turn on the light button. I saw, it is going to show me the result by depending on the source image (such as src="images/pic_bulboff.gif") between the buttons.

 

So, with same codes how is that possible there to turn on or turn off light in Tryit Editor ?

 

My result from notepad++ below...

 

34rdt92.jpg

Link to post
Share on other sites

It sounds like you are asking for how it actually works, which is as Ingolme described; by using Javascript to change <img> tag's src attribute to the different image path. If you're unfamiliar with what that means, it may be helpful to start with the JavaScript DOM tutorials.

http://www.w3schools.com/js/js_htmldom.asp

Link to post
Share on other sites

There's only one img tag. When the page loads it is set to the pic_bulboff.gif image, and the Javascript code changes the image to the pic_bulbon.gif image. It uses the same img element for both images, Javascript just changes which image is shown.

 

You could also write code which would do basically the same thing but uses 2 different img elements, and just shows or hides one of them at a time. The code you're looking at uses a single img element though.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...