Random Background Image

[Tormented Angel8]

So I've been using webs.com as my webhost and sitebuilder and managed to accomplish alot. What I'd like to do at the moment is to be able to have a random background everytime the page refreshs or the individual navigates thru my website. I googled for javascript codes to do this but they don't seem to work properly with my site builder. So does anyone know how I can have a random background on webs?

[real_illusions]

One way I did it was to generate a random CSS class of a div out of a few pre-defined classes, each with a different background in the CSS.That involves PHP, which probably wont work on a free webhost.

[dsonesuk]

IF you can insert javascript code into your site, theres no reason why you can't just add all the images to a javascript array, then use javascript to randomly pick a number from 0 and total of images stored in array, and use that number to select background image on the loading of page from the array, simpels sssch as the meerkat would say.

[thescientist]

CSS/PHP would be a good option in the event the user has javascript turned off. I guess it all depends on how you want to do it; client side or server side.

[BobbyFrankyJim]

I think this would work for a 2 image client side version. You could also do other roundings and if you had 10 go x=(Math.floor(Math.random()*11))

x=Math.random() // Capitiziling my be wrong. If not this will get a random number between 0 and 1 e.g 0.14159265if (x >= 0.50){x = 1;}else{x = 0;}if (x == 1){//get image, may use dsonesuk's method of an array or just do document.body.style.backgroundImage=""}else if (x == 0){//get different image}

You also may want to enclose the if statements in a function

[Ingolme]

You should make sure you know what you're talking about before you try to help people.

if (x > 0.49)

The odds of getting more than 0.49 is greater than the odds of getting less or equal. I'd use x >= 0.5 instead, though there are other ways to do this, like multiplying x by 2 and rounding it off.

document.body.src=""

The body element doesn't have a "src" property. You would need to change .style.backgroundImage

else if (x == 2)

Given your code, x is never going to be 2.

[thescientist]

I think this would work for a 2 image client side version. You could also do other roundings and if you had 10 go x=(Math.floor(Math.random()*11))

x=Math.random() // Capitiziling my be wrong. If not this will get a random number between 0 and 1 e.g 0.14159265if (x > 0.49){x = 1;}else{x = 0;}if (x == 1){//get image, may use dsonesuk's method of an array or just do document.body.src=""}else if (x == 2){//get different image}

You also may want to enclose the if statements in a function

if you're going to do that, why not create the array anyway, and then get a random number using the length of the array as an end bound, and then flooring that. That would generate a unique index in the array, rather then one condition for getting an image from an array and another condition for something else. i.e.

var images = ["images/bg1.jpg","images/bg2.jpg","images/bg3.jpg","images/bg4.jpg","images/bg5.jpg"];var length = images.length;var index = Math.floor(Math.random()*length);document.style.backgroundImage = images[index];

the OP could then have that run as a function after the document has finished loading.

[dsonesuk]

And then to prevent the same background image showing twice in a row, use cookies to identfy which background image is current, and do a while loop, until the image is different.

<script type="text/javascript">/*<![CDATA[*//*---->*/function set_cookie( name, value, days){var cookie_string = name + "=" + escape ( value );if (days){var expires = new Date ();expires.setTime(expires.getTime()+(days*24*60*60*1000));cookie_string += "; expires=" + expires.toGMTString();}document.cookie = cookie_string;}		function get_cookie(cookie_name){  var results = document.cookie.match( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );  if ( results )	return ( unescape ( results[2] ) );  else	return null;}window.onload=function(){var bkgrn_img = new Array('image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg');displaycookie = get_cookie("displayvalue");ran_array_number = displaycookie;while (displaycookie == ran_array_number){ran_array_number=Math.floor(Math.random()*(bkgrn_img.length))}document.body.style.backgroundImage="url(../images/"+bkgrn_img[ran_array_number]+")";cookievalue=ran_array_number;set_cookie("displayvalue", cookievalue, 7);}/*--*//*]]>*/</script>

[BobbyFrankyJim]

You know Ingolme I might be a little more inclined to offer more help here if whenever I post some help I didn't get insulted for getting a few details wrong. Have you never ever got any part of your code wrong? I am guessing yes

[thescientist]

Well, the point here is to help people with their problems. If there's a problem in one of the solutions offered, would that not further confuse the situation if it wasn't pointed out? People should learn from their mistakes, not be offended by having them pointed out. Everyone here's made mistakes in their posts, so why not just accept that fact when you make one?

[BobbyFrankyJim]

Well, the point here is to help people with their problems. If there's a problem in one of the solutions offered, would that not further confuse the situation if it wasn't pointed out? People should learn from their mistakes, not be offended by having them pointed out. Everyone here's made mistakes in their posts, so why not just accept that fact when you make one?

No I fully accept I got some code wrong, but it is not helpful to hear 'you should know what you are doing' just saying that my code wasn't quite correct would be plenty

[ilyakar]

why dont you build the site yourself? much more fun that way and you dont get those kinds of problems...