jnf555 Posted January 8, 2013 Share Posted January 8, 2013 hi can anyone tell me why this dosent work <!DOCTYPE html><html><head><script type="text/javascript"><!-->var image1=new image ()image1.src="picture1.jpg"var image2=new image ()image2.src="picture2.jpg"var image3=new image ()image3.src="picture3.jpg"//--></script></head><body><img src="picture1.jpg" mame="slide" width"400"height"300"><script type="text/javascript"><!--var step=1function slideit(){document.images.slide.src=eval("image"+step+".src")if(step<3)step++elsestep=1setTimeout("slideit()",2500)}slideit()//--></script></body></html> thanksjnf555 Link to comment Share on other sites More sharing options...
jeffman Posted January 8, 2013 Share Posted January 8, 2013 (edited) <img src="picture1.jpg" mame="slide" width"400" height"300"> Probably the spelling. BTW, this is really, really old code. It would be more conventional today to get a reference to your image with document.getElementById() and assigning an id attribute to your image. It is also no longer necessary to use eval() to assemble strings. I think that was obsolete literally before the turn of the century. The comment tags at the beginning and end of the script can also be removed. Edited January 8, 2013 by Deirdre's Dad Link to comment Share on other sites More sharing options...
davej Posted January 8, 2013 Share Posted January 8, 2013 While we are on the topic, does this example preload the image content? I have never been clear on that. Link to comment Share on other sites More sharing options...
jnf555 Posted January 8, 2013 Author Share Posted January 8, 2013 (edited) thanks for replies i learnt it from this you tube tuturial i'll have to go back to the drawing board, any advice on where i can learn javerscript thanksjnf555 Edited January 8, 2013 by jnf555 Link to comment Share on other sites More sharing options...
thescientist Posted January 8, 2013 Share Posted January 8, 2013 any advice on where i can learn javerscriptw3schools? http://www.w3schools.com/js/default.asp Link to comment Share on other sites More sharing options...
jnf555 Posted January 8, 2013 Author Share Posted January 8, 2013 should it work this way <!DOCTYPE html><html><head><style type="text/css">#myTV {background-image:url(screen.jpg);width:269px;height:164px;padding-top:20px;}#myScreen {width:228px;height:128px;margin-left:21px;}</style></head><body><div id="myTV"><div id="myScreen"></div></div><script type="text/javascript">var myScreen = document.getElementById('myScreen');var myPics = ['pic1.jpg','pic2.jpg','pic3.jpg'];var totalPics = myPics.length;var i = 0;function loop() {if(i > (totalPics - 1)){i = 0;}myScreen.innerHTML = '<img src="screen_pics/'+myPics+'">';i++;loopTimer = setTimeout('loop()',3000);}loop();</script></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted January 9, 2013 Share Posted January 9, 2013 (edited) That's a lot more modern, yeah. Good idea, too, putting your pic names in an array like that. My own preference would not be to create an image element using innerHTML. I would create an original image as your first HTML did, and then just change the src attribute in your loop function. I also recommend creating image objects as your first code did so that the images are preloaded.* You could simplify that with a for or while loop. * which should answer davej's question. Edited January 9, 2013 by Deirdre's Dad Link to comment Share on other sites More sharing options...
jnf555 Posted January 9, 2013 Author Share Posted January 9, 2013 is this going in the right direction, or have i missed something <!DOCTYPE html><html><head><script type="text/javascript">var image1=new image ()image1.src="pic1.jpg"var image2=new image ()image2.src="pic2.jpg"var image3=new image ()image3.src="pic.jpg"</script><style type="text/css">#myTV {background-image:url(screen.jpg);width:269px;height:164px;padding-top:20px;}#myScreen {width:228px;height:128px;margin-left:21px;}</style></head><body><div id="myScreen"></div><script type="text/javascript">var myScreen = document.getElementById('myScreen');var myPics = ['pic1.jpg','pic2.jpg','pic3.jpg'];var totalPics = myPics.length;var i = 0;function loop() {if(i > (totalPics - 1)){i = 0;}myScreen.innerHTML = '<img src="pic1.jpg">';i++;loopTimer = setTimeout('loop()',3000);}loop();</script></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted January 9, 2013 Share Posted January 9, 2013 Pre-loading the images is a good idea, yes. Link to comment Share on other sites More sharing options...
Ingolme Posted January 9, 2013 Share Posted January 9, 2013 To preload the image you need to call new Image() with an uppercase I, otherwise the browser will throw a "call to undefined function" error. Link to comment Share on other sites More sharing options...
jnf555 Posted January 9, 2013 Author Share Posted January 9, 2013 (edited) thanks for replies, the problem is it doesn't work, i must have something wrong <!DOCTYPE html><html><head><script type="text/javascript"><!-->var image1=new Image ()image1.src="pic1.jpg"var image2=new Image ()image2.src="pic2.jpg"var image3=new Image ()image3.src="pic3.jpg"//--></script><style type="text/css">#myTV {background-image:url(screen.jpg);width:269px;height:164px;padding-top:20px;}#myScreen {width:228px;height:128px;margin-left:21px;}</style></head><body><div id="myTV"><div id="myScreen"></div></div><script type="text/javascript">var myScreen = document.getElementById('myScreen');var myPics = ['pic1.jpg','pic2.jpg','pic3.jpg'];var totalPics = myPics.length;var i = 0;function loop() {if(i > (totalPics - 1)){i = 0;}myScreen.innerHTML = '<img src="pic1.jpg"/'+myPics+'">';i++;loopTimer = setTimeout('loop()',3000);}loop();</script></body></html> Edited January 9, 2013 by jnf555 Link to comment Share on other sites More sharing options...
thescientist Posted January 9, 2013 Share Posted January 9, 2013 are you just guessing here? I'm sure in the past we've told you about debugging, checking for errors, logging/alert statements within your code, etc. Aside from that, a better post would be to explain to us what exactly isn't working, vs what you are expecting to happen. Programming doesn't have to be a mystery, the computer is only doing what you tell it to do, after all. Link to comment Share on other sites More sharing options...
jnf555 Posted January 9, 2013 Author Share Posted January 9, 2013 i am expecting the images to change from one to another as in a slideshow.thanks Link to comment Share on other sites More sharing options...
thescientist Posted January 9, 2013 Share Posted January 9, 2013 (edited) i am expecting the images to change from one to another as in a slideshow.thanksand? are you just guessing here? I'm sure in the past we've told you about debugging, checking for errors, logging/alert statements within your code, etc. Edited January 9, 2013 by thescientist Link to comment Share on other sites More sharing options...
jnf555 Posted January 9, 2013 Author Share Posted January 9, 2013 i though slide show explained what i was trying to achieve, which is the title of this post Link to comment Share on other sites More sharing options...
thescientist Posted January 9, 2013 Share Posted January 9, 2013 (edited) I know what you are trying to do, but I am trying to help you help us by giving us more information on the current state of the code as you are experiencing it. code works and doesn't work for a reason. Aren't you at all interested in knowing if there are errors in the code? (the console would show those) Or know how the code is executing and what is happening and when? (logging/alert statements would tell you that). Just saying it isn't working doesn't tell us much, and short of us copying the code and running it locally ourselves, it can help us to identify the problem spots quicker. Anyway, this line looks questionable myScreen.innerHTML = '<img src="pic1.jpg"/'+myPics[i]+'">'; the src is always being set to a concatentation of pic1.jpg plus the value of the myPics array at that given index. try looking at the source when the page loads. I imagine that part would look kind of weird. Also, as suggested earlier, why set the innerHTML of a non semantic element? Make myScreen an image tag, get its reference like you are doing, and just set its src property with the loop. Edited January 9, 2013 by thescientist Link to comment Share on other sites More sharing options...
justsomeguy Posted January 9, 2013 Share Posted January 9, 2013 He's expecting you to check for errors yourself. The browser will tell you exactly what's going on. Every modern browser has a developer console you can use, there are links in my signature for the different browsers. Open your developer console and look around. In particular, check the Network tab that shows the requests that the browser is sending out. Look at the requests that it sends for the slideshow images and see if those URLs are correct. Link to comment Share on other sites More sharing options...
jnf555 Posted January 9, 2013 Author Share Posted January 9, 2013 thanks for your help, i will check that much appreciated thanks again jnf555 Link to comment Share on other sites More sharing options...
thescientist Posted January 9, 2013 Share Posted January 9, 2013 to my point above about the image path concatenation, the error console would show 404's, which is what you would get if the path for an image (or css file, js file, etc) can't be found by the browser. (either because the file doesn't exist, or because the path itself is wrong). Link to comment Share on other sites More sharing options...
jnf555 Posted January 9, 2013 Author Share Posted January 9, 2013 just for a matter of interest this is where i had the code from, maybe i should try my own coding http://www.developphp.com/view.php?tid=1251 Link to comment Share on other sites More sharing options...
thescientist Posted January 9, 2013 Share Posted January 9, 2013 i guess. you'll have to do just as much debugging and error console debugging either way, and probably more, since it seems like you have little experience with programming. Or you could just fix that one line that I pointed out that is probably causing the issue. Have you even tried looking in the error console at all? I mean, why keep guessing. Link to comment Share on other sites More sharing options...
jnf555 Posted January 10, 2013 Author Share Posted January 10, 2013 (edited) thanks for reply you are right i have very little experience. i probably keep guessing due to my lack of experience, but i am trying to learn javascript Edited January 10, 2013 by jnf555 Link to comment Share on other sites More sharing options...
jeffman Posted January 10, 2013 Share Posted January 10, 2013 It's OK. Most of us learned by modifying other people's scripts, making mistakes, fixing them. Link to comment Share on other sites More sharing options...
thescientist Posted January 10, 2013 Share Posted January 10, 2013 (edited) i probably keep guessing due to my lack of experience, but i am trying to learn javascripti understand, but learning is easier when you don't have to guess. All my posts have been giving you ways to find out what your code is doing, and if there are any errors, for the exact reason of not having to guess. Why not just do what i've been suggesting instead of posting code and asking if it will work? Just try it, look for errors, debug it, etc, and then report back with your findings/questions. That's all I've been trying to say. Edited January 10, 2013 by thescientist Link to comment Share on other sites More sharing options...
jnf555 Posted January 10, 2013 Author Share Posted January 10, 2013 At long last i have managed to acheive what i was aiming to do.change from one img to another, as in a slideshowMany thanks to everyone that has helped <!DOCTYPE html><html lang="en-us"><head><head><title></title><script type="text/javascript">var image1=new Image ()image1.src="pic1.jpg"var image2=new Image ()image2.src="pic2.jpg"var image3=new Image ()image3.src="pic3.jpg"</script><style type="text/css"></style></head><body><div id="myScreen"></div><div id="myTV"><div id="myScreen"></div></div><script type="text/javascript">var myScreen = document.getElementById('myScreen');var myPics = ['pic1.jpg','pic2.jpg','pic3.jpg'];var totalPics = myPics.length;var i = 0;function loop() {if(i > (totalPics - 1)){i = 0;}myScreen.innerHTML = '<img src="'+myPics+'">';i++;loopTimer = setTimeout('loop()',5000);}loop();</script></body></html> 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