biju Posted September 27, 2016 Share Posted September 27, 2016 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. Link to comment Share on other sites More sharing options...
thescientist Posted September 27, 2016 Share Posted September 27, 2016 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 comment Share on other sites More sharing options...
Ingolme Posted September 27, 2016 Share Posted September 27, 2016 The Javascript modifies the src attribute of the image so that the image will change. Link to comment Share on other sites More sharing options...
biju Posted September 28, 2016 Author Share Posted September 28, 2016 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... Link to comment Share on other sites More sharing options...
thescientist Posted September 28, 2016 Share Posted September 28, 2016 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 comment Share on other sites More sharing options...
justsomeguy Posted September 28, 2016 Share Posted September 28, 2016 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now