Background Image Swap Script Change a Background Image based on clock time

[jlhaslip 4]

Background Image Changer Script

To swap the background image from your CSS file according to the Server Clock Time.

1.) In your CSS file, add the following rule:

body {	background: url(time.png);}

2.) Create a "folder" named time.png.
3.) Into the folder, place three images named morning.png, day.png, night.png.
4.) Also, in the same folder, create an index.php file and copy/paste the following script.

<?php$hour = date('H');if ($hour < 12 ) {	$image = "morning.png";}elseif ($hour < 17 ) {	 $image = "day.png";}else {	 $image = "night.png";}$image = imagecreatefrompng( "$image" );if (!$image) { /* See if it failed */		header("(anti-spam-(anti-spam-content-type:)) image/png");		$im = imagecreatetruecolor (150, 30); /* Create a blank image */		$bgc = imagecolorallocate ($im, 255, 255, 200);		$tc = imagecolorallocate ($im, 0, 0, 0);		imagefilledrectangle ($im, 0, 0, 150, 30, $bgc);		/* Output an errmsg */		imagestring ($im, 1, 5, 5, "Error loading Image", $tc);		imagepng($im);		imagedestroy($im);		die();	}header("(anti-spam-(anti-spam-content-type:)) image/png");imagepng($image);imagedestroy($image);?>

5.) Browse to your page and the background image should change according to the Server time clock.

Demo page: http://forums.xisto.com/no_longer_exists/

Any questions?

[Above The Rest 0]

The example page just shows tiled images of php code, and weird swirly fandangles in the center of an iframe...

[t3jem 0]

I got the same, thing, what browsers is this supposed to work in? I use firefox.

[Above The Rest 0]

I got the same, thing, what browsers is this supposed to work in? I use firefox.

I'd guess that it's something to do with his server configuration and handling .PNG files...

[jlhaslip 4]

The php code is a screenshot of the if/else block, so that is the "image".I simply plunked the code into an available "templated" page for the demo only.Look at the bottom of each image and that tells you what the time slot is according to the script. If morning shows at the bottom of the tiled image, the server time is between midnight and noon. If the day.png is tat the bottom of the tile, it is day time at the server, and likewise, night.png shows between 1700 hrs and midnight. Should work in all Browsers since IE only has trouble with tansparent png's. These aren't transparent.Trust me, it works.

[delivi 0]

nice effect. Great idea jlhaslip. I'd love to use it. I think that you can use different images for denoting the time so that we can understand it better.

[jlhaslip 4]

Done.There should not be any difficulties determining the swap now.

[Above The Rest 0]

Much, much better.I actually see what you did now. This could be quite useful in the future for me.

[jlhaslip 4]

Here is another, simpler, method. Serve a different CSS file based on the time of day.
Replace your existing link tag with the following php code.
You will need 3 CSS files named according to the file names used in the script, of course, with the background image changed in each one according to the preferred design.

<?php$hour = date('H');if ($hour < 12 ) {	echo '<link rel="stylesheet" type="text/css" href="morning.css" />;}elseif ($hour < 17 ) {	echo '<link rel="stylesheet" type="text/css" href="day.css" />;}else {	echo '<link rel="stylesheet" type="text/css" href="night.css" />;}?>

Untested. No example available.

[Above The Rest 0]

Or, if you don't want to create 3 of those files, you can just echo <style> tags with CSS styling in them.

[t3jem 0]

Here is another, simpler, method. Serve a different CSS file based on the time of day.Replace your existing link tag with the following php code.
You will need 3 CSS files named according to the file names used in the script, of course, with the background image changed in each one according to the preferred design.

<?php $hour = date('H'); if ($hour < 12 ) {	 echo '<link rel="stylesheet" type="text/css" href="morning.css" />; } elseif ($hour < 17 ) {	 echo '<link rel="stylesheet" type="text/css" href="day.css" />; } else {	 echo '<link rel="stylesheet" type="text/css" href="night.css" />; } ?>

Untested. No example available.

That is actually the way I do my styles for different times of years, except because I'm too lazy to test on my website i do it in javascript, but it's almost the exact same code. Thanks for the code though, I can see it now.

[hippiman 0]

That's pretty friggin sweet! I didn't know you could name a folder with an extension. I wonder what else you could use that for...

[jlhaslip 4]

That's pretty friggin sweet! I didn't know you could name a folder with an extension. I wonder what else you could use that for...

This technique can also perform Random Image Generators and a Random sig or avatar rotator script.
I have another Tutorial around here on the trap that shows the Random Avatar, I think it is... gif's, png's, jpg's or a combined image script.

http://forums.xisto.com/topic/52136-image-rotator-script-another-one-easy-to-implement/

There it is...

[Dooga 0]

I think this is pretty clever. I saw a lot of professional web designers who actually use the day and night difference, because it makes the site look like a place in real life! It also has sounds that correspond with the time of day. Perhaps that could be your next tutorial when you're bored and want to cook up something else that's as brilliant as this one

[jlhaslip 4]

Attention!!!Someone sent me an email a few days ago about this script not working for them, and I somehow misfiled or deleted the e-mail, so if you have a question, please PM or email me. Thanks for your interest in the script.