September 20, 201015 yr Hi! On my website I have an image used as the background. The image is small and thus gets repeated to fill the screen. My code is this: <body background="bgimage1.jpg" bgcolor="white"> Now I am looking for a JavaScript code that will enable me to have a number of different images from which a random one will be chosen as background on each visit/reload, and that enables an alternative image to be loaded in case someone's browser does not support JS. Say that my other images are bgimage2.jpg, etc... and the list will be updated indefinitely. Can someone provide me with a code that will help me do this, or a link to somewhere I can find the way? I know there are many sources on internet but I'm not experienced in JS and I don't want to pick just any code I find. Otherwise if someone could just give me a link to good JS codes, preferably ones that don't contain copyright notes, that would also be very helpful. Regards.
September 20, 201015 yr Hi! On my website I have an image used as the background. The image is small and thus gets repeated to fill the screen. My code is this: <body background="bgimage1.jpg" bgcolor="white"> Now I am looking for a JavaScript code that will enable me to have a number of different images from which a random one will be chosen as background on each visit/reload, and that enables an alternative image to be loaded in case someone's browser does not support JS. Say that my other images are bgimage2.jpg, etc... and the list will be updated indefinitely. Can someone provide me with a code that will help me do this, or a link to somewhere I can find the way? I know there are many sources on internet but I'm not experienced in JS and I don't want to pick just any code I find. Otherwise if someone could just give me a link to good JS codes, preferably ones that don't contain copyright notes, that would also be very helpful. Regards. well i dont have time to write the full code cause im headed out but one thing to get u started u could start off by creating an array with the image locations like so var imagearray = new Array(); imagearray[0] = "image location 1"; imagearray[1] = "image location 2"; imagearray[2] = "image location 3"; imagearray[3] = "image location 4"; ect.. and then well to take u alittle farther to pick randomly u could try this var randnum = Math.floor ( Math.random() * imagearray.length ); document.getElementById("imageholderid").innerHTML = imagearray[randnum]; Hope this gets u started atleast
September 21, 201015 yr Author Hi, thanks for trying to help. I couldn't get your code to work, because I'm a beginner and still clueless. I searched around the web and mixed from various sources to come up with this code that seems to work: In <head>: <script type="text/javascript"> <!-- random_number= Math.floor(Math.random()* 4+1 ); if (random_number==1) { image="img1.jpg"; } if (random_number==2) { image="img2.jpg"; } if (random_number==3) { image="img3.jpg"; } if (random_number==4) { image="img4.jpg"; } //--> </script> and in <body>: <body onload="document.body.background = image"> From what I understand, the "4" in "Math.floor(Math.random()* 4+1 );" indicates the number of my images. Is that right? Also, from W3Schools I learned that <!-- and //--> must be used to enclose the code, so that if someone has JavaScript disabled, the JS code does not show up as HTML text in their browser. Is that right? Also please let me know if you see any mistake in this code, although it seems to do what I want it to. thanks!
September 22, 201015 yr Hi, thanks for trying to help. I couldn't get your code to work, because I'm a beginner and still clueless. I searched around the web and mixed from various sources to come up with this code that seems to work: In <head>: <script type="text/javascript"> <!-- random_number= Math.floor(Math.random()* 4+1 ); if (random_number==1) { image="img1.jpg"; } if (random_number==2) { image="img2.jpg"; } if (random_number==3) { image="img3.jpg"; } if (random_number==4) { image="img4.jpg"; } //--> </script> and in <body>: <body onload="document.body.background = image"> From what I understand, the "4" in "Math.floor(Math.random()* 4+1 );" indicates the number of my images. Is that right? Also, from W3Schools I learned that <!-- and //--> must be used to enclose the code, so that if someone has JavaScript disabled, the JS code does not show up as HTML text in their browser. Is that right? Also please let me know if you see any mistake in this code, although it seems to do what I want it to. thanks! Your interpretation of the number 4 is correct, you'd need to adjust that if you wanted any more images. webdesigner93's technique would allow you to keep all the data in a single place and will automatically update that number (imagesarray.length would be the number of images in the array) The comment tags, <!-- and //--> aren't needed any more. In the mid 90's, JavaScript wasn't universally understood. Browsers that understood it would execute it, browsers that didn't would simply print out the contents of the <script> tag. The comment tags were added to prevent that happening. These days we simply include our scripts in external files
September 22, 201015 yr Author Hi Skateside! Thanks for your answer. I now have put my JS code in an external file and it works fine. I wanted to ask you: If I just replace in my code this part Math.random()* 4+1 ); with this part Math.random() * imagearray.length ); then would it work for the number of images in the array to be automatically updated? To be clear, my code in the external JS file in this case would be: random_number= Math.floor(Math.random()* imagearray.length ); if (random_number==1) { image="img1.jpg"; } if (random_number==2) { image="img2.jpg"; } if (random_number==3) { image="img3.jpg"; }
September 22, 201015 yr I wanted to ask you: If I just replace in my code this part Math.random()* 4+1 ); with this part Math.random() * imagearray.length ); then would it work for the number of images in the array to be automatically updated? No, it would only work if you kept your images in an array. I'd post code that sows that, but webdesigner93 already has
Create an account or sign in to comment