Welcome Guest ( Log In | Register)



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> Background Image Swap Script, Change a Background Image based on clock time
jlhaslip
post Nov 12 2007, 11:37 PM
Post #1


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,846
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
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:
CODE
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.
CODE
<?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.com/samples/misc/swap_bg/

Any questions?

(list)

Go to the top of the page
 
+Quote Post
Above The Rest
post Nov 12 2007, 11:41 PM
Post #2


Advanced Member
*******

Group: [HOSTED]
Posts: 114
Joined: 11-November 07
From: Pennsylvania
Member No.: 52,814
The example page just shows tiled images of php code, and weird swirly fandangles in the center of an iframe...

(list)

Go to the top of the page
 
+Quote Post
t3jem
post Nov 13 2007, 12:03 AM
Post #3


Privileged Member
*********

Group: [HOSTED]
Posts: 521
Joined: 9-February 07
Member No.: 38,519
I got the same, thing, what browsers is this supposed to work in? I use firefox.

(list)

Go to the top of the page
 
+Quote Post
Above The Rest
post Nov 13 2007, 12:06 AM
Post #4


Advanced Member
*******

Group: [HOSTED]
Posts: 114
Joined: 11-November 07
From: Pennsylvania
Member No.: 52,814
QUOTE(t3jem @ Nov 12 2007, 07:03 PM) *
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...

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Nov 13 2007, 12:55 AM
Post #5


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,846
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
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.

(list)

Go to the top of the page
 
+Quote Post
delivi
post Nov 13 2007, 02:06 AM
Post #6


Trap Grand Marshal Member
***********

Group: [HOSTED]
Posts: 1,297
Joined: 11-January 06
From: Chennai, India
Member No.: 16,932
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.

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Nov 13 2007, 04:17 AM
Post #7


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,846
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
Done.

There should not be any difficulties determining the swap now.

(list)

Go to the top of the page
 
+Quote Post
Above The Rest
post Nov 13 2007, 06:03 AM
Post #8


Advanced Member
*******

Group: [HOSTED]
Posts: 114
Joined: 11-November 07
From: Pennsylvania
Member No.: 52,814
Much, much better.

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

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Nov 13 2007, 06:36 AM
Post #9


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,846
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
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.

CODE
<?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.