On air now - Radio station image changer

**djcrispysa** · 05-22-2012, 08:11 AM

HI
I am in need of a script that will change an image displayed on my html website based on time of the day + day of the week
I have searched for this on this site but might have used the incorrect search query
So , basically , Monday 2pm until 3pm will show a picture and Monday 3pm until 4pm will show a different time , similarly any other day of the week will do the same

**rnd me** · 05-22-2012, 08:08 PM

avoiding dom irregularities using dynamic css is my way, but there are millions...

using html like

Code:

<div id="sched">
 <div class="mon">
   <span class="hour h8">all things considered</span>
   <span class="hour h9">all things considered</span>
   <span class="hour h10">news</span>
   <span class="hour h11">weekly outlook</span>
   <span class="hour h12">lunchbox concert</span>
  </div>
</div>

and this exact script

Code:

function setTimecode(){
   var weekday=new Date(+new Date -new Date().getTimezoneOffset()*60000).toGMTString().split(",")[0].toLowerCase();
   var hour= "h" +new Date().getHours();
   document.body.setAttribute("data-dt", hour+" "+weekday);
}

setTimecode();
setInterval(setTimecode, 20000);

with expanded css along the lines of this

Code:

/* turn off all days */
[data-dt~=tue] #sched .mon,
[data-dt~=tue] #sched .tue,
[data-dt~=tue] #sched .wed,
[data-dt~=tue] #sched .thu,
[data-dt~=tue] #sched .fri,
[data-dt~=tue] #sched .sat,
[data-dt~=tue] #sched .sun{ display: none;}

/*turn off all hours */
#sched .hour { display:none; }



/* now, opt-in for each known day */
[data-dt~=mon] #sched .mon{ display: block; }
[data-dt~=tue] #sched .tue { display: block; }
[data-dt~=wed] #sched .wed{ display: block; }
/* (do other days here...)  */


/* now un-hide the proper hour */

[data-dt~=h8] #sched .h8 ,
[data-dt~=h8] #sched .h9 ,
[data-dt~=h8] #sched .h10, 
[data-dt~=h8] #sched .h11, 
[data-dt~=h8] #sched .h12   {display: block !important;} /* do other hours as well... */

the time is updated every 20 seconds automatically.

while this can be repetitive, it avoids a lot of complex programming and x-browser bugs.
it also lets you put the display logic in css, where it belongs.

**xelawho** · 05-22-2012, 09:14 PM

If you can rename your images to coincide with the date & time you want them to be displayed (such as mon20.jpg for the one you want to show at 8pm on Monday) you can do this:

Code:

<body>
<img id="thepic" src=""></img>
<script type="text/javascript">
function showPic(){
d=new Date()
document.getElementById("thepic").src=d.toString().substr(0,3).toLowerCase()+d.toString().substr(16,2)+".jpg"
}

showPic()
setInterval(showPic, 20000);
</script>

</body>

**xelawho** · 05-22-2012, 10:29 PM

although IE doesn't play nice with the above - better to use:

Code:

<body>
<img id="thepic" src=""></img>
<script type="text/javascript">
function showPic(){
d=new Date()
document.getElementById("thepic").src=d.toString().substr(0,3).toLowerCase()+d.getHours()+".jpg"
}

showPic()
setInterval(showPic, 20000);
</script>

</body>

**rnd me** · 05-23-2012, 10:04 PM

Originally Posted by xelawho

although IE doesn't play nice with the above

ie is not the only one. the format of Date().toString() is up to the browser to determine, so it cannot be counted upon to be the same in all locales and browsers. use toUTCString and toISOString...