Jump to content

Random Background Image


Tormented Angel8
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Edited by BobbyFrankyJim
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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?

Edited by thescientist
Link to comment
Share on other sites

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
Link to comment
Share on other sites

  • 2 weeks later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...