Time of Day Image Change

Change Images based on a time of day and by day

(2 Pages)
1
2
→

24 Replies - 7610 Views - Last Post: 08 August 2012 - 06:49 AM

#1 hilltopcs

New D.I.C Head

Reputation: 0

Posts: 6
Joined: 15-January 09

Time of Day Image Change

Posted 01 April 2009 - 11:31 AM

I would like to list a few pictures for a radio station.
For instance I would like to place a picture
M-F at 6-10am morning.png
M-F at 2-6pm evening.png

then on Sunday 6-11 morningmusic.png

I have tried the following code but the picture show at the wrong time. Can anyone help.

In the <head> I have

<script type="text/javascript" src="timePictureChange.js"></script>

In the body I have

<img src="" id="myimage" alt="time of day">

And as the javascript I have:

function pixTimeChange() {
  var t=new Date();
  var h = t.getUTCHours();
  var d = t.getUTCDay();
  var weekday=new Array(7);
  weekend[0]="Sunday";
  weekday[1]="Monday";
  weekday[2]="Tuesday";
  weekday[3]="Wednesday";
  weekday[4]="Thursday";
  weekday[5]="Friday";
  weekday[6]="Saturday";
  var r1="images/onairimages/musicalsoulfoodairimage.png";
  var r2="images/onairimages/sherriairimage.png";
  var r3="images/onairimages/calairimage.png";
  var r4="images/onairimages/nateairimage.png";
  var el=document.getElementById('myimage');

  // See the time below. Note: The time is in 24 hour format.
  // In the example here, "7" = 7 AM; "17" =5PM.
  el.src = (h>=11 && h<15) ? r1 : r2;
  el.src = (h>=19 && h<23) ? r1 : r3;
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
	window.onload = func;
  } else {
	window.onload = function() {
	  if (oldonload) {
		oldonload();
	  }
	  func();
	}
  }
}

addLoadEvent(function() {
  pixTimeChange();
});

Can anyone Help Please!!!

Is This A Good Question/Topic? 0

Replies To: Time of Day Image Change

#2 JMRKER

D.I.C Addict

Reputation: 115

Posts: 748
Joined: 25-October 08

Re: Time of Day Image Change

Posted 02 April 2009 - 03:34 PM

Try this by changing your local time with your system calendar / time application.
I did not have the images to view so I added the .alt display for the images
Remove the alert() messages put in for testing.
And I'm not sure I related the correct picture to the right day and time.

<html>
<head>
<title>TOD pictures</title>
<script type="text/javascript">
// For: http://www.dreamincode.net/forums/showtopic96698.htm

var weekday = ['Sunday','Monday','Tuesday','Wednesday','Thrsday','Friday','Saturday'];
var ImgURL = 'images/onairimages/';

var ImgList = [
  ['NoShowsImage.png'],
  ["musicalsoulfoodairimage.png"],
  ["sherriairimage.png"],
  ["calairimage.png"],
  ["nateairimage.png"]		// Note: no comma at end of list
];

function pixTimeChange() {
  var t=new Date();
	  
// See the time below. Note: The time is in 24 hour format.
// In the example here, "7" = 7 AM; "17" =5PM.
  var h = t.getHours();  
  var d = t.getDay();
  
  alert(t.toString()+'\nHour : Day | '+h+' : '+d);
  
  var el=document.getElementById('myimage');
	  el.src = ImgURL+ImgList[0];  
	  el.alt = ImgList[0];
  switch (d) {
	  
	case 1 : // Mon
	case 2 : // Tue
	case 3 : // Wed
	case 4 : // Thu
	case 5 : // Fri
	  if ((h >= 6) && (h < 10))  { el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
	  if ((h >= 14) && (h < 18)) { el.src = ImgURL+ImgList[2];  el.alt = ImgList[2]; }
	  break;
	  
	case 6 : // Sat
	  break;
	  
	default :// Sun
	  if ((h >= 6) && (h < 11))  { el.src = ImgURL+ImgList[2];  el.alt = ImgList[2]; }
	  break;
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
	window.onload = func;
  } else {
	window.onload = function() {
	  if (oldonload) { oldonload(); }
	  func();
	}
  }
}

addLoadEvent( function() { pixTimeChange(); } );

</script>
</head>

<body>
<img src="" id="myimage" alt="time of day">
</body>
</html>

Was This Post Helpful? 0

#3 hilltopcs

New D.I.C Head

Reputation: 0

Posts: 6
Joined: 15-January 09

Re: Time of Day Image Change

Posted 02 April 2009 - 03:55 PM

I'll give it a try

Was This Post Helpful? 0

#4 ahmad_511

Reputation: 125

Posts: 704
Joined: 28-April 07

Re: Time of Day Image Change

Posted 02 April 2009 - 03:57 PM

hello,
first of, you are using getUTCHours() which returns Universal Coordinated Time not the local time,
anyway, using getHours() will return the local time

another thing is:
the time ranges as you described is not what you wrote in the script

Quote

quote]M-F at 6-10am morning.png
M-F at 2-6pm evening.png

then on Sunday 6-11 morningmusic.png

[/quote]

besides, there is something in the code logics
say for example h=14
the first condition will return r1
the second will return r3
so whenever the first condition is true, the image will be r3

to fix that you can use IF condition without using Else with it

if (h>=6 && h<=10)imgpath="morning.png";
if (h>=14 && h<=18)imgpath="evening.png";
if (h>=6 && h<=11 & d==0)imgpath="morningmusic.png";
el.src=imgpath;

hope it helps

Edit: Too Slow....

This post has been edited by ahmad_511: 02 April 2009 - 03:59 PM

Was This Post Helpful? 0

#5 hilltopcs

New D.I.C Head

Reputation: 0

Posts: 6
Joined: 15-January 09

Re: Time of Day Image Change

Posted 02 April 2009 - 04:25 PM

That's totally awesome dude, that worked!!!!!

Thanks

-hilltopcs

Was This Post Helpful? 0

#6 hilltopcs

New D.I.C Head

Reputation: 0

Posts: 6
Joined: 15-January 09

Re: Time of Day Image Change

Posted 03 April 2009 - 08:03 AM

ahmad_511, on 2 Apr, 2009 - 02:57 PM, said:

Quote

quote]M-F at 6-10am morning.png
M-F at 2-6pm evening.png

then on Sunday 6-11 morningmusic.png

besides, there is something in the code logics
say for example h=14
the first condition will return r1
the second will return r3
so whenever the first condition is true, the image will be r3

to fix that you can use IF condition without using Else with it

if (h>=6 && h<=10)imgpath="morning.png";
if (h>=14 && h<=18)imgpath="evening.png";
if (h>=6 && h<=11 & d==0)imgpath="morningmusic.png";
el.src=imgpath;

hope it helps

Edit: Too Slow....

[/quote]

I was trying to base it off of UTC that way it is common throughout the day no matter what time zone your in

Was This Post Helpful? 0

#7 dejiakinsanmi@yahoo.com

New D.I.C Head

Reputation: 0

Posts: 4
Joined: 09-November 09

Re: Time of Day Image Change

Posted 09 November 2009 - 10:02 AM

hilltopcs, on 2 Apr, 2009 - 03:25 PM, said:

That's totally awesome dude, that worked!!!!!

Thanks

-hilltopcs

Hi. I have got the same javascript from the same source as you did. I'm having the same problems, though, mine has not got the days of the week, just the hours involved for each programme. Could you please let me know which solution worked for you, as I have tried the two on the post with no result.

Cheers.

Was This Post Helpful? 0

#8 JMRKER

D.I.C Addict

Reputation: 115

Posts: 748
Joined: 25-October 08

Re: Time of Day Image Change

Posted 09 November 2009 - 01:11 PM

dejiakinsanmi@yahoo.com, on 9 Nov, 2009 - 09:02 AM, said:

For any kind of help you ask for, just saying you tried something "with no result"
does not help us very much. What were you using and why did it not work?
What errors were you getting or what did not happen that you expected to happen?

Post your problem script so we can see not only what you tried, but also HOW you tried it.
Anything less is just mind reading and my skill at that activity suck!

Was This Post Helpful? 0

#9 dejiakinsanmi@yahoo.com

New D.I.C Head

Reputation: 0

Posts: 4
Joined: 09-November 09

Re: Time of Day Image Change

Posted 09 November 2009 - 02:52 PM

[/quote]

Many Thanks for your help. Please find the code I am trying to manipulate below. It is stored in a folder called js. The images are stored in a folder called images. Here's the code

[color=#FF0000]

/* This script and many more are available free online at
The Javascript Source!! http://javascript.internet.com
Created by: Anonymous | http://musikimiz.googlepages.comLicensed under: Creative Commons License
 */

function pixTimeChange() {
  var t=new Date();
  var h = t.getHours();
  var r1="images/morning.jpg";
  var r2="images/afternoon.jpg";
  var r3="images/evening.jpg";
  var r4="images/header.jpg";
  var el=document.getElementById('myimage');

  // See the time below. Note: The time is in 24 hour format.
  // In the example here, "7" = 7 AM; "17" =5PM.
  el.src = (h>=12 && h<16) ? r2 : r3;
  el.src = (h>=16 && h<17) ? r4 : r3;
  el.src = (h>=17 && h<20) ? r3 : r4;
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
	window.onload = func;
  } else {
	window.onload = function() {
	  if (oldonload) {
		oldonload();
	  }
	  func();
	}
  }
}

addLoadEvent(function() {
  pixTimeChange();
});

In the body of the html, i have pasted

<img src="" id="myimage" alt="time of day">

The problem I'm having is that the pictures don't appear in the order in which I place them. For example, morning.jpg seems to always want to appear whatever the time is, hence the reason why I have not placed it in the script.

I'll be so happy if you can be of help to me.

Cheers

Was This Post Helpful? 0

#10 JMRKER

D.I.C Addict

Reputation: 115

Posts: 748
Joined: 25-October 08

Re: Time of Day Image Change

Posted 09 November 2009 - 05:59 PM

I can not test this because, while you have indicated where the JS and images are, there is no indication of the URL to append this information to in order to see the images.

However, I believe you problem may be in this section:

  // See the time below. Note: The time is in 24 hour format.
  // In the example here, "7" = 7 AM; "17" =5PM.
  el.src = (h>=12 && h<16) ? r2 : r3;
  el.src = (h>=16 && h<17) ? r4 : r3;
  el.src = (h>=17 && h<20) ? r3 : r4;

Depending upon the current hour (h in this example) the test would follow this logic.

If 'h' is say between 0-11, then
el.src would be set to r3 initially in the first test
el.src would then be set to r3 in the second test
and finally el.src would be set to r4.
Since r4 represents the header image, this may be OK.

But if 'h' is set to 12, 13 or 14 (for noon, 1pm or 2pm) then
el.src would be set to r2 in the first test
el.src would change to r3 in the second test
and finally el.src would be set to r4 again, which I don't think you want.

Likewise, if 'h' is 16 (for 4pm) then
el.src would be set to r3 in the first test
el.src would remain equal to r3 for the second test
and finally el.src would be set to r4 AGAIN, which again I don't think you want.

Follow similar logic for values of 'h' between 17-19. where the el.src setting should be to r3 by your script.

What I think you want is this:

function pixTimeChange() {
  var t=new Date();
  var h = t.getHours();
  var r1="images/morning.jpg";
  var r2="images/afternoon.jpg";
  var r3="images/evening.jpg";
  var r4="images/header.jpg";
  var el=document.getElementById('myimage');

  // See the time below. Note: The time is in 24 hour format.
  // In the example here, "7" = 7 AM; "17" =5PM.
//  el.src = (h>=12 && h<16) ? r2 : r3;
//  el.src = (h>=16 && h<17) ? r4 : r3;
//  el.src = (h>=17 && h<20) ? r3 : r4;
  switch (h) {
	case 12:
	case 13:
	case 14:
	case 15: el.src = r2; break;
	case 16: el.src = r4; break;
	case 17:
	case 18:
	case 19: el.src = r3; break;
	default: el.src = r4; break;
  }
}

Note that your original logic never references r1, so my guess is that you are not using this image, but if I'm wrong, it is fixable but I don't know the times you consider 'morning' from your original script.

Hope this explanation helps.
Good Luck!

Was This Post Helpful? 0

#11 dejiakinsanmi@yahoo.com

New D.I.C Head

Reputation: 0

Posts: 4
Joined: 09-November 09

Re: Time of Day Image Change

Posted 10 November 2009 - 12:28 PM

Oh wow! thanks for your prompt reply. I will give it a try and let you know how it goes.

Many thanks.

Was This Post Helpful? 0

#12 dejiakinsanmi@yahoo.com

New D.I.C Head

Reputation: 0

Posts: 4
Joined: 09-November 09

Re: Time of Day Image Change

Posted 12 November 2009 - 04:13 AM

It worked! Many thanks. I love this forum already!!z

Was This Post Helpful? 0

#13 kirbyfan101

D.I.C Head

Reputation: 0

Posts: 62
Joined: 30-April 09

Re: Time of Day Image Change

Posted 12 November 2009 - 12:56 PM

I have A small question:
HOw do you declare varibles fast Because i need to declare a lot. Is it like this?:
var x = "hi"
v = 2
b = 8
etc.

Was This Post Helpful? 0

#14 JMRKER

D.I.C Addict

Reputation: 115

Posts: 748
Joined: 25-October 08

Re: Time of Day Image Change

Posted 12 November 2009 - 09:17 PM

dejiakinsanmi@yahoo.com, on 12 Nov, 2009 - 03:13 AM, said:

It worked! Many thanks. I love this forum already!!z

You're most welcome.
I'm glad I could help.
Good Luck!

kirbyfan101, on 12 Nov, 2009 - 11:56 AM, said:

I have A small question:
HOw do you declare varibles fast Because i need to declare a lot. Is it like this?:
var x = "hi"
v = 2
b = 8
etc.

I'm not sure I understand how your question related to determining the time of day as is the topic of this thread.

You might consider starting your own thread with a little more information than is currently being provided. What do you mean by 'delcare variable fast'? :blink:

Was This Post Helpful? 0

#15 Guest_LeeDJC*

Reputation:

Re: Time of Day Image Change

Posted 23 February 2011 - 09:34 AM

Thanks for all the responses above. I managed to get my code to work thanks to you guys.

However, I have one question. I want to get the images to change at half past the hour instead of on the hour. How do I do this? I've tried with the following code, but it doesn't work

var weekday = ['Sunday','Monday','Tuesday','Wednesday','Thrsday','Friday','Saturday'];
var ImgURL = 'images/';
 
var ImgList = [
  ['closed.gif'],
  ["open.gif"]      // Note: no comma at end of list
];
 
function pixTimeChange() {
  var t=new Date();
       
// See the time below. Note: The time is in 24 hour format.
// In the example here, "7" = 7 AM; "17" =5PM.
  var h = t.getHours(); 
  var m = t.getMinutes()
  var d = t.getDay();
   
  
	   
  var el=document.getElementById('myimage');
      el.src = ImgURL+ImgList[0]; 
      el.alt = ImgList[0];
  switch (d) {
       
    case 1 : // Mon
    case 2 : // Tue
    case 3 : // Wed
    case 4 : // Thu
		if ((h >= 16) && (m >=30) && (h < 22) && (m < 30)) { el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
        break;
	  
    case 5 : // Fri
		if ((h >= 11) && (h < 13))imgpath="morning.png";
		if ((h >= 16) && (h < 22)) { el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
		break;
	       
    case 6 : // Sat
		if ((h >= 16) && (h < 22))  { el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
        break;
             
    default ://>/ Sun
		if ((h >= 16) && (h < 21))  { el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
		break;
	  }
	}
	 
	// Multiple onload function created by: Simon Willison
	// http://simonwillison.net/2004/May/26/addLoadEvent/
	function addLoadEvent(func) {
	  var oldonload = window.onload;
	  if (typeof window.onload != 'function') {
	    window.onload = func;
	  } else {
	    window.onload = function() {
	      if (oldonload) { oldonload(); }
	      func();
	    }
	  }
	}
	 
	addLoadEvent( function() { pixTimeChange(); } );

Was This Post Helpful? 0

(2 Pages)
1
2
→

Change Images based on a time of day and by day

24 Replies - 7610 Views - Last Post: 08 August 2012 - 06:49 AM

Time of Day Image Change

Replies To: Time of Day Image Change

Re: Time of Day Image Change

Re: Time of Day Image Change

Re: Time of Day Image Change

Re: Time of Day Image Change

Re: Time of Day Image Change

Re: Time of Day Image Change

Re: Time of Day Image Change

Re: Time of Day Image Change

Re: Time of Day Image Change

Re: Time of Day Image Change

Re: Time of Day Image Change

Re: Time of Day Image Change

Re: Time of Day Image Change

#15 Guest_LeeDJC*

Re: Time of Day Image Change

Follow & Share

Give It A Try!

Programming

Web Development

Reference Sheets

Bye Bye Ads

Monthly Drawing