Nov 21, 2009
Pages: 1, 2

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

free web hosting

Read Latest Entries..: (Post #15) by bad_boy on Jul 19 2008, 09:55 AM.
Hello everyone,this right can work in any browser?Few make this idea but try, I'm nob in the world of web design ... I hope that you will understand and support if something does not know I should be .. Thanks for the code
Read the FIRST post of this Topic. - Express your Opinion! Contribute Knowledge :-).

Open Discussion > MODERATED AREA > Tutorials

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

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:
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?

 

 

 


Comment/Reply (w/o sign-up)

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

Comment/Reply (w/o sign-up)

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

Comment/Reply (w/o sign-up)

Above The Rest
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...

Comment/Reply (w/o sign-up)

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.

Comment/Reply (w/o sign-up)

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.

Comment/Reply (w/o sign-up)

jlhaslip
Done.

There should not be any difficulties determining the swap now.

Comment/Reply (w/o sign-up)

Above The Rest
Much, much better.

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

Comment/Reply (w/o sign-up)

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.

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.

Comment/Reply (w/o sign-up)

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.

Comment/Reply (w/o sign-up)

Latest Entries

bad_boy
Hello everyone,
this right can work in any browser?
Few make this idea but try, I'm nob in the world of web design ... I hope that you will understand and support if something does not know I should be .. Thanks for the code angel.gif

Comment/Reply (w/o sign-up)

jlhaslip
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.

Comment/Reply (w/o sign-up)

Dooga
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 smile.gif

Comment/Reply (w/o sign-up)

jlhaslip
QUOTE(hippiman @ Nov 14 2007, 03:45 PM) *
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... smile.gif


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://www.trap17.com/forums/index.php?s=&...st&p=350113

There it is...

Comment/Reply (w/o sign-up)

hippiman
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... smile.gif

Comment/Reply (w/o sign-up)



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Pages: 1, 2
Similar Topics

Keywords : background, image, swap, script, change, background, image, based, clock, time

  1. Reclaim Control Over Your Windows-based Pc
    Part 1 (2)
  2. How To Install Opengeu In Ubuntu
    OpenGEU is a distro based on Enlightenment and derived from Ubuntu (2)
    First of all please note well that E17 is in beta phase, and can make your computer segfault
    (which by contrary - WILL NOT ERASE YOUR DATA - your computer will be restored to the statein which
    it was before it segfaulted), and if you don't want this to happen then don't install this!
    I'll now tell you how to install OpenGEU when you already have Ubuntu (or Kubuntu and
    Xubuntu ) installed already on your machine. First of all I need to introduce you to OpenGEU,
    it's a relativelly new Linux distro which uses Enlightenment instead of ....
  3. Make A Flat Based Shoutbox, With Auto Refresh.
    (8)
    With this tutorial, you will learn how to create a simple shoutbox, but only uses a .txt file. Also
    with auto refresh, and I am going to do a backgound. We will be making 5 files. 1. index.php The
    main page 2. msg.php Reading msg.txt 3. msg.txt Note: You must give it 777 4. shout.php Where
    it add to msg.txt 5. bg.gif Background. Index.php would be like this: CODE Shoutbox
    Name: Message: Let's go over what the code do. -> are just the title.
    gets msg.php which gets msg.txt. You will know why I do that later. -> ....
  4. [phpbb] Member Last-visit Report Script
    for phpbb2 databases (0)
    One flaw in the phpbb2 administration section is a report to list out the 'last-visit'
    time/date of the membership. I wrote a script to do exactly that and will be sharing the script with
    you here. the first section defines the variables required for the Database connection, finding the
    right database, supplying passwords, etc. HTML DEFINE ('DB_USER', 'YOUR DB USER
    NAME'); // change these defined values to suit your own situation DEFINE ('DB_PASSWORD',
    'YOUR DB PASSWORD'); DEFINE ('DB_HOST', 'localhost'); DEF....
  5. Image Rotator Script (another One)
    easy to implement (0)
    In case you haven't noticed, I have a different Avatar display on the Forum each time the page
    is refreshed. /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif"
    /> For those of you who might want the script to do that, here is the one I am using: HTML
    $filesp = glob('*.png'); if(empty($filesp)){ echo 'no images found...die br >';
    die(); } else{ foreach ($filesp as $file) { $img_array = trim($file); } } shuffle($img_array);
    //select image at random header("C o n t e n t{dash}t y p e: image/png"); // replace th....
  6. Faux Ajax Loading - Css Only
    Pretend your site is Ajax based (3)
    Link: http://www.jlhaslip.trap17.com/samples/misc/ajax/index.html Check that out. The first page
    has information and the second and has the actual example of its use with sample CSS code. I find
    that when you visit a site which has a slow server and attempt to view 'large' Image files,
    it is pretty boring to sit and stare at a blank screen, so this little snippet of code can be used
    to give the visitor something to see to indicate that the image is being downloaded. I built a
    small animated gif that sits in the background of the space allocated for the image....
  7. Making a java based program
    (3)
    Java GUI Making a Little Java Program Sec. 1: Imports and starting it off Sec. 2: Variables Sec.
    3: Frame and Stuff Sec. 4: Declaring buttons Sec. 5: Adding buttons Sec. 6: Action Listening Sec. 7:
    Using this for a learning experience Section 1 Now, let's think. What imports do we need? We
    obviously need GUI imports. We also need the action Listener. So, let's declare this at the very
    top: Code: CODE import java.awt.*; import java.awt.event.*; import javax.swing.*; That's
    all we need to get all our supplies. Now to start us off. Skip a couple lines ....
  8. For ... Next Loops And Script Planning
    My Fifth PHP Tutorial (2)
    Be sure to read the other ones. They are located in the TUTORIALS section, and at the time of this
    writing all on the first page. Intro To PHP Tutorial 5 - For ... Next Loops and Planning Scripts
    Released 4/15/07 By Chris Feilbach aka GhostRider Contact Info: E-mail: assembler7@gmail.com AIM:
    emptybinder78 Yahoo: drunkonmarshmellows Website: http://www.ghostrider.trap17.com Before I start
    talking about what wonderful things loops are and all the cool stuff they can do, I want to address
    something first. I was asked about something to write in PHP. There isn't....
  9. Math Captcha Image Validation
    (10)
    This tutorial will show you how to make a basic math CAPTCHA validtion form. This requires that you
    have the GD library for PHP installed to work. This tutorial requires 2 files, login.php and
    action.php. The first step is to create a sub-folder to store the temporary images, for the
    purposes of this tutorial,this folder should be called images. Now upload a image in there called
    verify.php and chmod just that image(not the folder) to 777 so that image can change as our
    functions generate new images. Ok, after you've done that, we can get to the code: in login.p....
  10. Css-based "i-frames" (sort Of)
    A couple of ways to do it... (1)
    I got thinking that it might be nice to have a method to load a bunch of pictures up to a site, but
    not have them taking up a lot of space. And without using a bunch of php, while still presenting the
    entire picture. And using full-on CSS coding, not tables or frames. So here you go... a "picture in
    a picture" method. A CSS framed picture And a "hidden" "picture in a picture" method. A
    "hidden" CSS framed picture Sort of a way to 'hide the picture and let the user decide if they
    want to actually see the image. All it does is use positioning for placing the....
  11. How To Make A Simple File Based Shoutbox Using Php And Html
    (8)
    A simple tut to make a simple shoutbox. Let me jump right in. First of all you need the standard
    equipment for PHP, an IDE like XAMPP and an editor like PHP EDITOR 2OO7. Were going to make a
    simple guestbook using three files, webpage.php, shout.php and shout.txt. Webpage.php can be
    changed to whatver you want, it will be the page on which the guestbok is shown, you could even use
    this code and add it to another php page n your site. Shout.php is the proccessing page and
    shout.txt is where the shouts are stored. Firstly we need to make the visual design of the box.....
  12. A Simple Php Captcha - Image Validation
    (27)
    OK, I recently had the need to create a PHP CAPTCHA system for a friend, and I am sharing this as a
    tutorial with the good people here at Trap17. I am sure you have all seen a CAPTCHA before (although
    you may not have known what it was called). They are the little codes you often have to enter when
    you register with a site, to make sure you are a person and not an automated script. Some common
    examples look something like this: My system doesn't really do anything as fancy, but I
    think that it is slightly more readable that some of those that get generated. Every....
  13. Image Gallery Tutorial Using Hoverbox
    A php solution to coding the Hoverbox Image Gallery (15)
    As reported in another posting , there is an Image Gallery named Hoverbox from the Sonspring site
    which is a pretty cool display method using CSS to have Thumbnail pictures double their size by
    hovering over them. I liked the css included in the original Tutorial as found on the Sonspring
    site , but I knew there was more than one use for the Hoverbox and took it upon myself to explore
    the use of the Hoverbox on a site I webmaster. One thing that wasn't right was having to
    hardcode the image tags, so the first version I wrote used php to fill the Hoverbox by rea....
  14. How To Make Image To Highlight When It`s Mouseovered
    (9)
    Place this code between and tags. CODE function makevisible(cur,which){
    strength=(which==0)? 1 : 0.2 if (cur.style.MozOpacity) cur.style.MozOpacity=strength else if
    (cur.filters) cur.filters.alpha.opacity=strength*100 } // --> Place the following code within
    all of the image tags you'd like the effect to be applied. CODE
    style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
    onMouseout="makevisible(this,1)" And your image tag might look like that. CODE
    "yourimage.gif" in last code change to your ....
  15. How To: Ip Configuration Script (win Xp)
    If you travel a lot with your laptop, and need to switch between diff (0)
    How To: IP Configuration Script (win XP) If you travel a lot with your laptop, and need to switch
    between different IP's in different locations, this script is for you. There are many programs
    that handle this task very well, but they cost sometimes pretty big money. This tutorial will show
    you how to make your own IP Configuration Script for free. This script is for a static ip address
    configuration and is based on a little program called "NETSH.EXE" which is supplied with Windows.
    How it works. QUOTE Microsoft Windows XP - Using Netsh Netsh.exe is a....
  16. Beginner's Guide To Skiing
    Based on my own experience. (4)
    I really like skiing. It is so much fun that you won't know how you could have survived until
    your first time. So here are some things you should know before you head over to your lcoal ski
    area: Dressing: You should get a few basic things: -Base layer: long underwear, especially
    thermals, keep you warm, wick moisture from the skin, keep your legs from getting irritated by your
    ski pants -Middle layer: A fleece jacket; or anything aside from wool, which is very itchy. This
    will keep you warm in cold weather. If your outer jacket or parka (see below) is insulate....
  17. Php Script To Make A Link List
    From the list of the Directory Files (6)
    Well, it has been a while since I have added anything to the Tutorial Sectiion, so here is another
    script for the members to enjoy. This one creates a list of links from the contents of the directory
    which it is run from. For instance, if you run it from the public_html folder, then all the files
    (not the Directores) are listed and linked so when you click on the link, that file is parsed and
    output to the browser. Here is the code: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    An XHTML 1.0 Strict Page to List the files in this directory ....
  18. Image Shack Mod
    For Invision Power Board (2)
    Image Shack Mod For Invision Power Board ''These instructions will help you to install
    'ImageShack on your Site' into the reply, quick-reply, and post-new-thread sections of your
    Invision Power Board, thus giving your visitors the ability to upload images directly. After upload,
    they may paste the images directly into their post box.'' CODE These instructions will
    help you to install 'ImageShack on your Site' into the reply, quick-reply, and
    post-new-thread sections of your Invision Power Board, thus giving your visitors the ability ....
  19. Creating A Simple Image Viewer
    Using Visual Basic 2005 Express Edition (4)
    I downloaded Microsoft's Visual Studio Express suite a few months ago, but only recently got
    around to installing it. I have been practising with Visual Basic and making some rather basic
    programs and utilities, but they contain most of the basic concepts. This tutorial will explain how
    to create a basic image viewer, and I will try to explain each step from beginning to end as clear
    as I can. To start you will need: Microsoft Visual Studio About 10-20 minutes free time OK,
    first open up the Visual Basic part of the Studio. I am using the 2005 Express version, so....
  20. Page Generation Time Script
    A script to tell how long it took to generate (17)
    this is a script used to tell you or visitors how fast your page was generated for the person who is
    viewing it... Ok it is verry simple!! all you have to do is put this script on every page... that
    you want it to be on CODE $starttime = explode(' ', microtime()); $starttime =
    $starttime + $starttime ; ?> and put it before everything on the page, for me i put it right
    underneith the DOCTYPE script which i think is a bloody waste of space to have it on there, but
    anyways.. i put it right below that and it works fine!! now where you want the time it....
  21. Changing Background Color In Php
    usefull for templating. (5)
    Tutorial on how to change background color with PHP I will be descibing to similiar ways that
    you can change the background color of your website with php and leave it at that till the user
    changes it again. We are going to do this with CSS. You can either have your cSS info on your page
    or in a spereate document. The first thing youll have to do is decide if your going for the linked
    stylesheet or directly on your page. IF you link it you'll need to have this code in you
    tags. CODE This isnt actualy real linking because i dont think you can li....
  22. Verifying Email Addresses
    Using a simple PHP script (9)
    This simple script will allow you to run some basic checks to make sure that any email address
    entered is actually an email address. There is no guarantee offered that this will stop every single
    fake email address, but it'll provide some protection. Now, the code! First we need to get the
    email address to verify. Here, I get it using POST from an HTML form. CODE //Load email
    address from web form $email = $_POST ; Now, we move on to our first check. Does the text that
    has been entered look like it could be an email address? This check can be performed....
  23. How To Stop Image Hot Linking
    for a selected directory. (17)
    Those of you that don't know what is meant by 'hotlinking', it is when someone directly
    links to an image on your site so it will display on their site. This is what is called
    'bandwidth theft' and being as accounts here have a limit on bandwidth, your bandwidth limit
    could be exceeded by someone else hotlinking to your images. As most users of cPanel will know,
    there is an option to disable hotlinking of images in the "Site Management Tools" section.
    However, this disables hotlinking to all directories, what if you only want to disable hotlinki....
  24. Image Rollovers In Javascript
    A Write-Once, Use-Anywhere Approach (11)
    Tutorial: Image Rollovers w/ Javascript, by Rob J. Secord, B.Sc. (SystemWisdom) See a
    working Sample of this Script! Download a ZIP containing all working files in this tutorial!
    Note: If you are not interested in reading this entire tutorial and/or have a basic understanding of
    the underlying concepts, you may safely skip to the Implementation section to get the code!
    Description : A Dynamic Image Rollover Script tested to work in 4 major internet browsers: MSIE,
    FireFox, Netscape and Opera. Using only Javascript combined with regular HTML Images ( ....
  25. [php] Simple Newsletter Script
    (17)
    This tutorial will give you the code needed and tell you how to implement it. First off you need to
    create a file called mailing.php this will be the file that processes the adding of emails to the
    list. CODE $email = $_POST ; $file = fopen("mailing.txt", "a"); fwrite($file, "\n" . $email);
    fclose($file); header("Location: mailing_thankyou.php"); ?> Next you need to create a file
    called mailing_thankyou.php , simple a page thanking them for signing up. Now create a file called
    mailing.txt with nothing in it, when uploaded to the server set it writable (c....
  26. How To: Change An Image When A User Clicks On It
    using both php and javascript (12)
    How To: Change An Image When A User Clicks On It using both php and javascript - a powerful
    combination I have seen quite a few how tos offering a method of doing this but none of which
    resembled my method of making use of both php and javascript. This code is fairly repetitive and
    most of the functions are easy to pick-up if you haven't heard of them before. Here it is...
    Create your two images. Call them anything you like, you'd just need to change their filenames
    in $imgano $imgayes. In fact with this script you can easily create more than one pair....
  27. Image Preloader With Progress Bar Status
    Pure Client-Side JavaScript tested in 4 Browsers! (28)
    Tutorial: Image Preloader with Progress Bar, by Rob J. Secord, B.Sc. (SystemWisdom)
    Description : A Tutorial for a Client-Side Image Preloader with Dynamic Real-Time Progress Bar
    Indicator written in JavaScript! Tested to work with 4 Major Internet Browsers: Firefox, MSIE,
    Netscape, Opera (Complete sample solution provided at end of tutorial, just put it on your
    web-server, add your images and go!) Intended Audience : Beginner to Intermediate Web
    Developers. Although this tutorial will cover some advanced aspects of JavaScript, I will try to
    explain it all ....
  28. Email Script/form With Php
    how to make a simple email script using php (37)
    Today, I'm going to show you how to make an email script using PHP and HTML. Most people usually
    put Email me if they want an email link on their site, but there are several cons to this.
    First, it's very inconvenient for those people who use web-based mail such as Yahoo!, Hotmail,
    or Gmail because that darn Micro$oft Outlook program comes up if one accidently click the link.
    Second, you are very suseptible to spam bots because they scan your HTML source code for anything
    with the same pattern as an email address and add it to their database. If you are pre....
  29. Php Quiz Script
    Make quizzes for your site. (29)
    Hello all, A little bit back I decided to make a quiz scriptjust out of no where lol. However it
    doesnt do anything special but I am going to make an email mod for it so that it will email results
    to your email address. So here is the basis of it. INSTRUCTIONS: Open a new page in your text
    editor and paste in the following code. CODE $qid = "Quiz ID-00"; ?>
    Username: 1.) Question number one is? Answer1 Answer2 2.) Question number two is?
    Answer1 Answer2 3.) Question number three is? Answer1 Answer2 4.) Question num....
  30. A Little Introduction To 3d Studio Max
    How to make a simple abstract image (11)
    This tutorial will teach you the basics of making abstract images in 3D studio max. In this example,
    I used a simple sphere, and applied the “Noise” modifier. Then, I applied a transparent, blue,
    plastic-like material to spice up the whole thing. Let’s start. First, make a sphere by selecting
    the “Sphere” button in the “Standard Primitives” section, and draw somewhere in the center of the
    perspective view. We will set the size of the sphere later on. The sphere I made looks like this,
    yours can be different in size and color, but the only thing that is important is to....

    1. Looking for background, image, swap, script, change, background, image, based, clock, time
Similar
Reclaim Control Over Your Windows-based Pc - Part 1
How To Install Opengeu In Ubuntu - OpenGEU is a distro based on Enlightenment and derived from Ubuntu
Make A Flat Based Shoutbox, With Auto Refresh.
[phpbb] Member Last-visit Report Script - for phpbb2 databases
Image Rotator Script (another One) - easy to implement
Faux Ajax Loading - Css Only - Pretend your site is Ajax based
Making a java based program
For ... Next Loops And Script Planning - My Fifth PHP Tutorial
Math Captcha Image Validation
Css-based "i-frames" (sort Of) - A couple of ways to do it...
How To Make A Simple File Based Shoutbox Using Php And Html
A Simple Php Captcha - Image Validation
Image Gallery Tutorial Using Hoverbox - A php solution to coding the Hoverbox Image Gallery
How To Make Image To Highlight When It`s Mouseovered
How To: Ip Configuration Script (win Xp) - If you travel a lot with your laptop, and need to switch between diff
Beginner's Guide To Skiing - Based on my own experience.
Php Script To Make A Link List - From the list of the Directory Files
Image Shack Mod - For Invision Power Board
Creating A Simple Image Viewer - Using Visual Basic 2005 Express Edition
Page Generation Time Script - A script to tell how long it took to generate
Changing Background Color In Php - usefull for templating.
Verifying Email Addresses - Using a simple PHP script
How To Stop Image Hot Linking - for a selected directory.
Image Rollovers In Javascript - A Write-Once, Use-Anywhere Approach
[php] Simple Newsletter Script
How To: Change An Image When A User Clicks On It - using both php and javascript
Image Preloader With Progress Bar Status - Pure Client-Side JavaScript tested in 4 Browsers!
Email Script/form With Php - how to make a simple email script using php
Php Quiz Script - Make quizzes for your site.
A Little Introduction To 3d Studio Max - How to make a simple abstract image

Searching Video's for background, image, swap, script, change, background, image, based, clock, time
See Also,
advertisement


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

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com