Javascript to change image depending on time..

[Mohsin Mulla]

Hi there,

Basically, I've got a script which changes the page background depending on the time.

<script language="JavaScript">
	day=new Date()     //..get the date
	x=day.getHours()    //..get the hour
	
	if(x>=0 && x<4) {
	
	   document.write('<style type="text/css">#header{background: white url(images/assets/1st.jpg); color: black}"></style>')
	
	} else
	
	if(x>=4 && x<12) {
	
	   document.write('<style type="text/css">#header{background: white url(images/assets/2nd.jpg); color: black}"></style>')
	
	} else
	
	if(x>=12 && x<18) {
	
	   document.write('<style type="text/css">#header{background: white url(images/assets/3rd.jpg); color: black}"></style>')
	
	} else
	
	if (x>=18 && x<24) {
	
	   document.write('<style type="text/css">#header{background: white url(images/assets/4th.jpg); color: black}"></style>')
	
	}
</script>

So as you can see, the first background changes between at 4am and so on.

What I would look to do is to change the background at different times every day, reading from some sort of text file or something. For example, on the 10th June the first background changes at 4:15am and the others with different times, on the 11th June the first background changes at 4:22am or something and so on.

Could someone possibly find me or write me something to do this? I can't find anything anywhere!


Thanks ever so much

[Rabbit]

Just so you know, your current script can be simplified to

day=new Date() //..get the date
x=day.getHours() //..get the hour

document.write('<style type="text/css">#header{background: white url(images/assets/' + Math.floor(x/4) + '.jpg); color: black}"></style>')

As for your question, you will have to hard code it in to your javascript unless you plan on using server side scripting.

[Mohsin Mulla]

Thanks for the simplification.
Yeah I think I'd go for with hard coding it into the JS as it'd be easier.

[Rabbit]

Just a quick note but for the simplification, you'll have to rename the image files 1, 2, 3, and 4. Not 1st, 2nd, 3rd, 4th.

[Mohsin Mulla]

Managed to sort it :) For reference if anyone else wants such functionality: http://stackoverflow.com/questions/6...ending-on-time

Thanks for the help though Rabbit