Jonas Posted January 27, 2006 Share Posted January 27, 2006 I'm making a website, where I need to be able to switch background image randomly for each load. Can anyone help me with this? I know I have to create an array of variables, but I don't know how to write the actual code. Link to comment Share on other sites More sharing options...
Eric Posted January 28, 2006 Share Posted January 28, 2006 I'm not sure how to do it in JavaScript, but if you don't mind using PHP I can do that for you Link to comment Share on other sites More sharing options...
smiles Posted January 28, 2006 Share Posted January 28, 2006 here is what I find in javascript.internet.com , and change a little <!-- TWO STEPS TO INSTALL RANDOM BACKGROUND: 1. Add the designated script to the HEAD of your HTML document 2. Place the last script into the BODY of your HTML document --> <!-- STEP ONE: Add this script to the HEAD of your HTML document --><HEAD><script LANGUAGE="JavaScript"><!-- This script and many more are available free online at --><!-- The JavaScript Source!! [url="http://javascript.internet.com"]http://javascript.internet.com[/url] --><!-- Beginfunction backcolor(form) {temp = ""for (var i = 0; i < 16; i++) {temp = form.color[i].valueif (form.color[i].checked){ document.bgColor = temp } }}function randombackground() {document.bgColor = getColor()}function getColor(){currentdate = new Date()backgroundcolor = currentdate.getSeconds()if (backgroundcolor > 44)backgroundcolor = backgroundcolor - 45else if (backgroundcolor > 29)backgroundcolor = backgroundcolor - 30else if (backgroundcolor > 15)backgroundcolor = backgroundcolor - 16if (backgroundcolor == 0 )return "olive";else if (backgroundcolor == 1 )return "teal";else if (backgroundcolor == 2 )return "red";else if (backgroundcolor == 3 )return "blue";else if (backgroundcolor == 4 )return "maroon";else if (backgroundcolor == 5 )return "navy";else if (backgroundcolor == 6 )return "lime";else if (backgroundcolor == 7 )return "fuschia";else if (backgroundcolor == 8 )return "green";else if (backgroundcolor == 9 )return "purple";else if (backgroundcolor == 10 )return "gray";else if (backgroundcolor == 11 )return "yellow";else if (backgroundcolor == 12 )return "aqua";else if (backgroundcolor == 13 )return "black";else if (backgroundcolor == 14 )return "white";else if (backgroundcolor == 15 )return "silver";}// End --></SCRIPT><!-- STEP TWO: Put this form in the BODY of the HTML document --><BODY onload="randombackground()"></body> Link to comment Share on other sites More sharing options...
Jonas Posted January 28, 2006 Author Share Posted January 28, 2006 Yeah, I found that same script, but I need images, not background-colors. And I don't know how to change that script. Also, to make it valid and still work, all I need to change is language="javascript" to type="text/javascript"?And Eric, how would it look in PHP? Aren't JavaScript and PHP the two languages most similar in syntax (if, else, switch, for, etc.)? It should be able to convert. Maybe using math.random() and background image based on result. Link to comment Share on other sites More sharing options...
Eric Posted January 28, 2006 Share Posted January 28, 2006 (edited) *code removed*I've never gotten a reply on this saying if anyone is using it, and I don't want people stealing my code and not giving thanks.Not even the topic starter could comment on it, with either "thanks for this" or "I still would prefer a JS one"So I'm removing the code. Edited January 30, 2006 by Eric Link to comment Share on other sites More sharing options...
smiles Posted January 29, 2006 Share Posted January 29, 2006 http://www.jsr.communitech.net/randombgrd.htm Link to comment Share on other sites More sharing options...
Eric Posted January 29, 2006 Share Posted January 29, 2006 http://www.jsr.communitech.net/randombgrd.htm<{POST_SNAPBACK}> That's a lot of JS in that source for such a simple thing O_oWhy do people use tons of JS when a couple of lines of PHP can do the same thing? Link to comment Share on other sites More sharing options...
Jonas Posted January 29, 2006 Author Share Posted January 29, 2006 I guess it depends on whether or not you have a php server. Link to comment Share on other sites More sharing options...
scott100 Posted January 29, 2006 Share Posted January 29, 2006 I'm making a website, where I need to be able to switch background image randomly for each load. Can anyone help me with this? I know I have to create an array of variables, but I don't know how to write the actual code.<{POST_SNAPBACK}> One way to do this in JavaSript is to use Math.random() then check the number in an if statement, each different if statement writes a different image to the page backgroundbut theres probably a ton of other ways, this was just of the top of the head.<script>var rand_int=Math.floor(Math.random()*3);if(rand_int==0){document.write('<style>body{background-image:url(http://www.google.co.uk/intl/en_uk/images/logo.gif);}</style>');}else if(rand_int==1){document.write('<style>body{background-image:url(http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif);}</style>');}else if(rand_int==2){document.write('<style>body{background-image:url(http://w3schools.invisionzone.com/style_images/w3sbanner.gif);}</style>');}else alert("Problem with random number");</script> Link to comment Share on other sites More sharing options...
Eric Posted January 29, 2006 Share Posted January 29, 2006 I guess it depends on whether or not you have a php server.<{POST_SNAPBACK}> I suppose. So did my little script help you? Link to comment Share on other sites More sharing options...
Jonas Posted February 1, 2006 Author Share Posted February 1, 2006 I suppose. So did my little script help you?<{POST_SNAPBACK}> No, I don't have a php server. And why did you remove your code? I read your post, but it's a non-reason. Everybody steals/sneaks peeks at code on the net. As long as people learn something from it for the future, that's payment enough. If people do that, I don't care if they steal my code/design, cause I know they'll eventually try and write their own one day, instead of copying whatever code and continually pasting it into their new site (code). Link to comment Share on other sites More sharing options...
aspnetguy Posted February 1, 2006 Share Posted February 1, 2006 *code removed*I've never gotten a reply on this saying if anyone is using it, and I don't want people stealing my code and not giving thanks.Not even the topic starter could comment on it, with either "thanks for this" or "I still would prefer a JS one"So I'm removing the code.<{POST_SNAPBACK}> What is so special about your code...if it is as you said just a few lines of PHP. It is not like you have coded a whole page or application that someone could sell or something...There are probably tons of snippets out there to give a random bg image.This seems a little 3rd grade to me...don't look at me or i'll tell Link to comment Share on other sites More sharing options...
mpoer Posted March 4, 2006 Share Posted March 4, 2006 bumpity bump, 'cuz i fixed it :)check the last line syntax for the else... should be: else { alert("Problem with random number"); } yep, those two stupid curly brackets threw off the whole script! I hate when that happens Link to comment Share on other sites More sharing options...
scott100 Posted March 4, 2006 Share Posted March 4, 2006 That shouldn't have made a difference, you only need {} if the code goes onto more than one line, in this case the code is:else alert("Problem with random number");which is all on one line so the brackets arent required.Try it without the brackets and it should work fine. Link to comment Share on other sites More sharing options...
mpoer Posted March 4, 2006 Share Posted March 4, 2006 That shouldn't have made a difference, you only need {} if the code goes onto more than one line, in this case the code is:else alert("Problem with random number");which is all on one line so the brackets arent required.Try it without the brackets and it should work fine.<{POST_SNAPBACK}> darn it, you're right. And here I thought I was fixing something...So why isn't the code working?( http://home.no.net/jonvel/script/background.js )wait, I may have it now. It's in the CSS!Jonas, take the background-image definiation out of your CSS sheet. Since the link to the css sheet comes after the javascript, it takes priority. just take that one line out of your CSS file and see if that doesn't fix it. Link to comment Share on other sites More sharing options...
scott100 Posted March 4, 2006 Share Posted March 4, 2006 The code in the external javascirpt works fine.I would also think that you have correctly identified the problem, you have fixed something Link to comment Share on other sites More sharing options...
mpoer Posted March 4, 2006 Share Posted March 4, 2006 I would also think that you have correctly identified the problem, you have fixed something yeah, just did some testing and it looks like if the background-image is removed from the CSS file, the javascript kicks in fine./me dances the 'does the I fixed something' jig :)I'm gonna PM Jonas now Link to comment Share on other sites More sharing options...
Jonas Posted March 4, 2006 Author Share Posted March 4, 2006 darn it, you're right. And here I thought I was fixing something...So why isn't the code working?( http://home.no.net/jonvel/script/background.js )wait, I may have it now. It's in the CSS!Jonas, take the background-image definiation out of your CSS sheet. Since the link to the css sheet comes after the javascript, it takes priority. just take that one line out of your CSS file and see if that doesn't fix it.<{POST_SNAPBACK}> Nah, that doesn't fix it. I just get a default white background. But now I could use a php script if I wanted to, so maybe that's a solution. But oh no, Eric removed his script. Link to comment Share on other sites More sharing options...
Chocolate570 Posted March 4, 2006 Share Posted March 4, 2006 One sec, i'll put a script together. <script type="text/javascript">x=new Array();x[0]="image one"x[1]="image two"//keep going, you get the idea.random = Math.floor(Math.random()*x.length);startTep='<style type="text/css">body {background:url('+x[random]+');}</style>'document.write(startTep);</script> Does that work? Link to comment Share on other sites More sharing options...
scott100 Posted March 4, 2006 Share Posted March 4, 2006 Yes this works, but so does mine. There are two problems here:1) Neither of them work in opera, which Jonas uses2) The page Jonas pasted earler, http://home.no.net/jonvel/, does not work in IE or FF so there must be a problem with how it has been implemented. Link to comment Share on other sites More sharing options...
Chocolate570 Posted March 4, 2006 Share Posted March 4, 2006 I'll put together a php script then. Give me a sec. Link to comment Share on other sites More sharing options...
Chocolate570 Posted March 4, 2006 Share Posted March 4, 2006 Ok. Got it. :)Rename your page to pagename.php, first of all.Next, put this in the head section, AFTER the CSS. <?php$randthing = rand(1,max number here);#Where it says max..., put the last number that can be included. 1,20 means #a number between 1 and 20, AND including 1 and 20. switch($randthing){ case "1": $finstyle="url of first image"; break; case "2": $finstyle="url of second image"; break; case "3": $finstyle="url of third image"; break; #Ok, you get the idea. Continue with that format until done. default: exit("OMG IT DOESN'T WORK LOLOLOLOL"); #K, put the message that displays if it doesn't work there. break;}$omgfirst='<style type="text/css">body{background-image:url(';$omglast=');}</style>';echo $omgfirst.$finstyle.$omglast;?>K, you know how bad I am at php. So try that out. Link to comment Share on other sites More sharing options...
Webworldx Posted March 4, 2006 Share Posted March 4, 2006 Wouldn't: <script type='text/javascript'>var randomBG = [];randomBG[0] = "http://here.here.com/image.jpg";randomBG[1] = "http://here.here.com/image.jpg";randomBG[2] = "http://here.here.com/image.jpg";randomBG[3] = "http://here.here.com/image.jpg";var rand = Math.floor( Math.random() * randomBG.length );document.getElementsByTagName('BODY')[0].style.backgroundImage = 'url(' + randomBG[rand] + ')';</script> Work? Link to comment Share on other sites More sharing options...
Jonas Posted March 4, 2006 Author Share Posted March 4, 2006 Whew, lots of scripts here. People are so eager to help... Yes this works, but so does mine. There are two problems here:1) Neither of them work in opera, which Jonas uses2) The page Jonas pasted earler, http://home.no.net/jonvel/, does not work in IE or FF so there must be a problem with how it has been implemented.<{POST_SNAPBACK}> I know the second one doesn't work in IE or FF, checked that. Could it have something to do with the way I escape the quotation signs?Ok. Got it. :)Rename your page to pagename.php, first of all.<{POST_SNAPBACK}> What do you mean, rename the page to pagename.php? Why? Isn't index.php ok?Wouldn't:<script type='text/javascript'>var randomBG = [];randomBG[0] = "http://here.here.com/image.jpg";randomBG[1] = "http://here.here.com/image.jpg";randomBG[2] = "http://here.here.com/image.jpg";randomBG[3] = "http://here.here.com/image.jpg";var rand = Math.floor( Math.random() * randomBG.length );document.getElementsByTagName('BODY')[0].style.backgroundImage = 'url(' + randomBG[rand] + ')';</script> Work? <{POST_SNAPBACK}> Nope, that doesn't work... Link to comment Share on other sites More sharing options...
Jonas Posted March 4, 2006 Author Share Posted March 4, 2006 Ok, Choco, that php script seems to work just fine, and being executed on the server, it's browser independant. Only one thing I'm curious about, is it possible to use php in a way so that you still get structured html when you look at the output html code? I'm kind of a neat freak that way... :)Say I wanted the result to look like this: <style type="text/css"> body { background: url('background_URL'); } </style> http://home.no.net/jonvel/Cool. 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