Results 1 to 10 of 10

Thread: Rotating background (sky) based on the time of day

  1. #1
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Rotating background (sky) based on the time of day

    Hi. I have a very lovely backgrund for my homepage... and I had this idea: to make the background colors change based on the time of the day. Currently, my background has a light orange, yellow sky with clouds. (Sun rise colors). I made different versions: Noon, sunset, evening, etc..

    I thought it would be really cool to time the background to change: for example around 5- 6 am, have the current BG, but during the evening, have the background change to a deep red/orange sunset background. Does anyone know how to program this?

    Basically, it would be rotating images, since I have separate images for each time of the day. Does anyone know how to program a backgronud to change the image at the accored time? Please, please help! I appreciate all of your responses

  2. #2
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Sounds like a cool idea... this script came from: http://www.jsmadeeasy.com/javascript...time/index.htm

    "Change your background depending on time of day"

    (I would think you could just use a background image instead of the color?) I may have to tweak that idea and put a small image in the top left that changes through the day... would be kinda cool to have the sun rising, fully up, set, and then the moon. Neat idea


    Code:
    <script>
    <!--
    //Feel free to copy and modify this script, but please keep the comment lines!
    //Written by Mattias Sj&#246;berg 8/8-1996
    //-----------------------------------------
    //|     mattias.sjoberg@swipnet.se        |
    //|---------------------------------------|
    //|  //\\ //\\     /// |                  |
    //| // \\// \\    /    |    Advertise     |
    //|//        \\   ///  |                  |
    //|   Mattias      /   |      Here        |
    //|   Sjoberg   ///    |                  |
    //|---------------------------------------|
    //| www.geocities.com/SiliconValley/7116  |
    //|    Vote for my page the above URL     |
    //-----------------------------------------
    
    
            var now = new Date();
            var hours = now.getHours();
            var psj=0;
    
            //18-19 night
            if (hours > 17 && hours < 20){
                    document.write('<body bgcolor="orange" text="#FFFFFF">')
            }
    
            //20-21 night
            if (hours > 19 && hours < 22){
                    document.write('<body bgcolor="orangered" text="#FFFFFF">')
            }
    
            //22-4 night
            if (hours > 21 || hours < 5){
                    document.write('<body bgcolor="black" text="#FFFFFF">')
            }
    
            //9-17 day
            if (hours > 8 && hours < 18){
                    document.write('<body bgcolor="deepskyblue" text="#FFFFFF">')
            }
    
            //7-8 day
            if (hours > 6 && hours < 9){
                    document.write('<body bgcolor="skyblue" text="#FFFFFF">')
            }
    
            //5-6 day
            if (hours > 4 && hours < 7){
                    document.write('<body bgcolor="steelblue" text="#FFFFFF">')
            }
    
    
    //-->
    </script>

  3. #3
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    wow thanks for the reply! this is perfect!!!! how should i change this, though? from colors to images? <img src = "http://"> instead of BG? can you help me with that part too?

  4. #4
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    When you choose to use a background image for the page it is always a good idea to specify a background color as well.

    <body background="drkrainbow.gif" bgcolor="#333333" text="FFFFFF">

    I think that should work... can try it

  5. #5
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    You could also add: bgproperties="fixed"> to it if you want too... this will make the background image not scroll, which could be good if you want it to fill a page, not repeat, and not disappear. Personally it bugs me when the text appears to slide on the background, but if the image isn't too overpowering it might look better.

  6. #6
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks is there anyway to make tha tinto just a regular image? instead of BG image? I have BAD experience with BG images. Whenever i use a BG code it turns my image all messed up. it doesnt fit the screen the way it should. as of now, im using "<img src ="http://"> as my first layer for the BG; just because I can nevr get the hang of BGS


    p.s: i like ur sun idea too.. how would u get *that* one to work as well?

    pps: i messaged u via email but its the same thing i posted here so u can ignore it . thanks so much

  7. #7
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Well you could do it as a regular image, just not use the background tag, just use an image tag. The image would be placed in the body where the script is though, and really not work out the way you want. If you did this, you'd need to set the Z-index to a negative, so everything on the page appears in front of it.

    Personally, I would use a CSS stylesheet to make a background image, and set the width and height to 100&#37;. This will keep it in the window regardless of size, but it will warp and look odd if someone views it in anything other than a square window. If your image can handle the warp without looking odd that could work...

    This is getting out of my realm on how to do it within the HTML but you could try this...


    Place this in the <head> section of your page

    <link rel="stylesheet" type="text/css" href="main.css" />

    ___________________________________________________
    Place this text inside of a notepad file, name is background.css and save it into your main web directory. Change the background color to match your background as best you can, or just leave out the color.

    #body {
    background-image: url(images/yourbackground.gif);
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    position: fixed;}

    Or the way to avoid getting your image all messed up would be to use the exact dimensions of your background instead of 100% for width and height ie.

    width: 500px;
    height: 800px;

    You can remove the position: fixed; if you want it to scroll away... if you do this, be sure there is a background color as well, or it will scroll away to a white background

  8. #8
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    As far as just using the sun image, I'd place the script inside of a <div></div> and just use an image instead of background. It should just note the time of day, pick the image, and display it where the div is placed.

  9. #9
    Join Date
    Jul 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Similiar query

    Hi guys,

    I have a similiar query in that I want a rotating sky and image based on the time of day. However, I want a series of images for day, and a series of images for night. At the moment, I have the Javascript code above (from Mattias) to change the sky, which works fine. (The page background is white from 8am - 8pm, and black from 8pm - 8am.) I also have an array in javascript (just under the <HEAD> tag) to display a random picture (of 5 currently) when the user refreshes. Both work fine on their own, but how in the world do I combine the two scripts so that I get 5 night images cycling through between 8pm and 8am when the page background is black? And similiarly, 5 day images cycling through between 8am and 8pm when the background is white?

    Thanks in advance for any help.

    LadyA.

  10. #10
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Code:
    <script>
    
    var now = new Date();
    var hours = now.getHours();
    var psj=0;
    
    //18-19 nacht
    if (hours > 17 && hours < 20){
    document.body.style.background="#000000 url('http://www.sammy-geerts.be/img/b2-2048.jpg') no-repeat center center fixed";
    }
    
    //20-21 nacht
    if (hours > 19 && hours < 22){
    document.body.style.background="#000000 url('http://www.sammy-geerts.be/img/b2-2048.jpg') no-repeat center center fixed";
    }
    
    //22-4 nacht
    if (hours > 21 || hours < 5){
    document.body.style.background="#000000 url('http://www.sammy-geerts.be/img/b2-2048.jpg') no-repeat center center fixed";
    }
    
    //9-17 dag
    if (hours > 8 && hours < 18){
    document.body.style.background="#ffffff url('http://www.sammy-geerts.be/img/b-2048.jpg') no-repeat center center fixed";
    }
    
    //7-8 dag
    if (hours > 6 && hours < 9){
    document.body.style.background="#ffffff url('http://www.sammy-geerts.be/img/b-2048.jpg') no-repeat center center fixed";
    }
    
    //5-6 dag
    if (hours > 4 && hours < 7){
    document.body.style.background="#ffffff url('http://www.sammy-geerts.be/img/b-2048.jpg') no-repeat center center fixed";
    }
    
    </script>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •