How to change the image on a webpage by the time of day using JavaScript

Question

I've seen variations of this before but I keep running into roadblocks that are causing headaches.

What I want to do is change a banner image on my web page by the time of day in my region (Pacific Standard) by using JavaScript. I get the main idea that I have to do for the function, but I'm confused on how I can import an image or add an image into the webpage when it wasn't there before.

    function timeOfDayImage() {
    var now = new Date;
    var timeNow = now.getHours();

       if(timeNow < 8 || timeNow > 10){
            code
       }
       else {
          code
       }

Any help?

Related: http://stackoverflow.com/questions/4358155/changing-background-based-on-time-of-day-using-javascript — SomeShinyObject, Mar 29 '13 at 01:38

score 1 · Answer 1 · answered Mar 29 '13 at 01:37

1

I'd give your body element a class:

function timeOfDayImage() {
    var now = new Date();
    var timeNow = now.getHours();

    if (timeNow < 8 || timeNow > 10) {
        body.classList.add('it-is-time');
    }
}

And change the element with CSS:

body #banner {
    background-image: url('images/one.png');
}

body.it-is-time #banner {
    background-image: url('images/two.png');
}

answered Mar 29 '13 at 01:37

Blender

289,723
53
439
496

[Dirty I.E. strikes again with no support with < version 10 on classList](http://caniuse.com/classlist). Why...why do we let it be a browser. – SomeShinyObject Mar 29 '13 at 01:51

score 0 · Answer 2 · answered Mar 29 '13 at 01:40

You don't need to import an image into the web page. Set the src attribute of the banner image to the URL of new image and the browser will load it for you

function timeOfDayImage() {
   var now = new Date;
   var timeNow = now.getHours();
   if(timeNow < 8 || timeNow > 10){
      document.getElementById('image').src='http://www.images.com/banner1.jpg';
   }
   else {
      document.getElementById('image').src='http://www.images.com/banner2.jpg';
   }
}

SomeShinyObject · Answer 3 · 2013-03-29T01:56:49.030

0

Use an ID in your banner image like so:

<img id="banner" alt="Something appropriate" />

And then use getElementById to select the reference from the DoM. Change the source (src) attribute with the variable reference of the selected element. If you want, you can change the alt attribute also, to ensure that the changed image is descriptive for screen readers.

function timeOfDayImage() {
    var now = new Date;
    var timeNow = now.getHours();
    var img = document.getElementById("banner");
    if (timeNow < 8 || timeNow > 10) {
        img.src="someimage.png";
        img.alt="Something equally appropriate";
    } else {
        img.src="someimage.png";
        img.alt="Something appropriate here too";
    }
}

timeOfDayImage();

Fiddle with a non-existent image(proof of concept)

edited Mar 29 '13 at 01:56

answered Mar 29 '13 at 01:47

SomeShinyObject

7,581
6
39
59

Thanks! This worked like a charm, but the time is always done in military time correct? I'm trying to set images to display between 6-8am and 7=9 pm. Wouldn't they be... – Flash Gordon Mar 30 '13 at 21:29
else if (timeNow <= 8 || timeNow => 6){ img.src="mustache.JPG"; img.alt="something equally appropriate"; – Flash Gordon Mar 30 '13 at 21:30
@FlashGordon Just adjust the PM hours by +12 and use the same concept – SomeShinyObject Mar 31 '13 at 02:16
I'm sorry to say that my code isn't wanting to work with these different blocks. [link]http://jsfiddle.net/HJkuG/1/ This is what I got – Flash Gordon Mar 31 '13 at 20:55

How to change the image on a webpage by the time of day using JavaScript

3 Answers3