Random Background Script...

[Hazukiy]

Hi, I'm just messing around with a website and I'm just wondering how would I make it so that it changes the background image to a random one? 

 

I was thinking something around this:

Images = new Array
Images[1] = "Background-1.jpg"
Images[2] = "Background-2.jpg"
Images[3] = "Background-3.jpg"
Images[4] = "Background-4.jpg"

 

 

But Instead of it just changing when you refresh the page every time, I was hoping to have a timer or something fixed to it? Would it be possible to have it so it gets the time of the server and if that time is equal it'll change?

 

Help will be much appreciated 

 

[Jessica]

Yes, it's possible.

[Hazukiy]

Ok so how would I do it?

[Jessica]

This forum is for help with code you write.

 

What part are you stuck on? What have you done?

[Hazukiy]

Ok. I'm just wondering how I would change a CSS class code through javascript. Basically want it to work so after a certain amount of time it changes the background; my background is defined in CSS.

[Jessica]

I'd do it in jQuery.

 

You should be able to easily google "javascript change css class" and "javascript get time".

 

The end result depends on exactly what you want to do.

[Hazukiy]

Okie dokie, did some research and I found out you can change CSS styles through Javascript so here's what I've done:

 

 

 

        var BackgroundOne = "images/structure/background-1.jpg"
	var BackgroundTwo = "images/structure/background-2.jpg"
	var BackgroundThree = "images/structure/background-3.jpg"
	var BackgroundFour = "images/structure/background-4.jpg"
	
	var Timer = setTimeout(BackgroundChange, 1000)
	
	function BackgroundChange()
	{
		if (Timer >= 1000)
		{
			document.getElementById("IndexContent").style = BackgroundOne
		}
		else if (Timer >= 2000)
		{
			document.getElementById("IndexContent").style = BackgroundTwo
		}
		else if (Timer >= 3000)
		{
			document.getElementById("IndexContent").style = BackgroundThree
		}
		else if (Timer >= 4000)
		{
			document.getElementById("IndexContent").style = BackgroundFour
		}
	}
	window.onload = BackgroundChange

 

 

 

 

Just got a quick question: If you put this code in your HTML / PHP document where the script will take place, do you need to include and santax's? So like semi-colons at the end?

Edited March 15, 2013 by Hazukiy

[Jessica]

It needs to be outside if the PHP tags (unless you use PHP to generate some of the variables) and be valid JavaScript.

[yomanny]

Here's some code for you to work with:

  <style>
  	body {
		background-image: url('http://sweets.seriouseats.com/images/2013/03/20130312-dulce-de-leche-ice-cream.jpg');
	}
  </style>
  
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  
  <script>
  	var images = new Array();
	var random;
	
	images[0] = 'http://outsetmedia.com/sites/default/files/51703-ice-cream.jpg';
	images[1] = 'http://2.bp.blogspot.com/-s3lF9zAAQJA/USpFPNZ8bTI/AAAAAAAAJZ8/8YgC7aXCBBg/s1600/Dr.SeussIceCream2.jpg';
	images[2] = 'http://sweets.seriouseats.com/images/2013/03/20130312-dulce-de-leche-ice-cream.jpg';
	
  	$('document').ready(function() {
		
		// Every 3rd second the following code will be executed
		setInterval(function() {
			
			  // Generate a random number between 0 and 2
			  random = Math.floor(Math.random() * 3);
			  
			  // Change the CSS
			  $('body').css('background-image', 'url('+images[random]+')');
		}, 3000);
	});
  </script>

[Hazukiy]

Ah, great, thanks