16 replies to this topic

[jlhaslip]

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://www.jlhaslip....s/misc/swap_bg/

Any questions?

[Above The Rest]

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

[t3jem]

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

[Above The Rest]

t3jem, on Nov 12 2007, 07:03 PM, said:

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]

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]

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]

Done.

There should not be any difficulties determining the swap now.

[Above The Rest]

Much, much better.

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

[jlhaslip]

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]

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