PDA

View Full Version : Change Picture every 2 hours


mico2292
03-13-2014, 09:01 PM
Hi all,

I am designing an online radio website and I'm looking for a code in html. I'd like it to be able to display a specific image during specific times of day. The times need to be based on server time, not the viewer's PC clock. I want the images to change every two hours starting from 10:00am till 02:00am. Thanks in advance.

edbr
03-14-2014, 02:03 AM
not with html, you can use javascript for this. ill try and get a function for you

edbr
03-14-2014, 02:15 AM
ok i quickly cobbled together this but im not that up on javascript so you will have to test it
function timeImage() {
var d = new Date;
var n = d.getHours();
var img = null;
if (n > 10 || n < 2) {

img = '1.gif';
} else if (n < 12) {
img = '2.gif';
} else if (n < 14) {
img = '3.gif';
} else if (n < 16 {
img = '4.gif';
} else if (n < 18) {
img = '5.gif';
} else if (n < 20) {
img = '6.gif';
} else if (n< 22) {
img = '7.gif';
}else if (n< 24) {
img = '7.gif';
}
else {
img = '8.gif';
}
document.write('<img src="graphics\/'+img+'" width="200" height="80"
/>');
}


to call it
<script type="text/javascript">
timeImage();
</script>

mico2292
03-14-2014, 05:11 PM
Thank you so much, i will try that. Can I also do it in a whole week cycle?

edbr
03-15-2014, 02:30 AM
yes there is a function /method called getDay which returns the day as a number o=sunday 1= monday etc so I would suggest set a new var and put each day in an if condition

var dt=d.getday();

if(dt==0){

do stuff
}


if(dt==1){

do different stuff
}
Again subject to testing

mico2292
03-16-2014, 10:57 PM
<div align="center"><script type="text/javascript">
timeImage();
function timeImage() {
var d = new Date;
var n = d.getHours();
var dt=d.getday();
var img = null;
if(dt==0)
if (n > 10 || n < 2) {

img = 'Images/djs/49.png';
} else if (n < 12) {
img = 'Images/djs/50.png';
} else if (n < 14) {
img = 'Images/djs/51.png';
} else if (n < 16) {
img = 'Images/djs/52.png';
} else if (n < 18) {
img = 'Images/djs/53.png';
} else if (n < 20) {
img = 'Images/djs/54.png';
} else if (n< 22) {
img = 'Images/djs/55.png';
}else if (n< 24) {
img = 'Images/djs/56.png';
}
else {
img = 'Images/djs/56.png';
}
if(dt==1)
if (n > 10 || n < 2) {

img = 'Images/djs/1.png';
} else if (n < 12) {
img = 'Images/djs/2.png';
} else if (n < 14) {
img = 'Images/djs/3.png';
} else if (n < 16) {
img = 'Images/djs/4.png';
} else if (n < 18) {
img = 'Images/djs/5.png';
} else if (n < 20) {
img = 'Images/djs/6.png';
} else if (n< 22) {
img = 'Images/djs/7.png';
}else if (n< 24) {
img = 'Images/djs/8.png';
}
else {
img = 'Images/djs/8.png';
}
if(dt==2)
if (n > 10 || n < 2) {

img = 'Images/djs/9.png';
} else if (n < 12) {
img = 'Images/djs/10.png';
} else if (n < 14) {
img = 'Images/djs/11.png';
} else if (n < 16) {
img = 'Images/djs/12.png';
} else if (n < 18) {
img = 'Images/djs/13.png';
} else if (n < 20) {
img = 'Images/djs/14.png';
} else if (n< 22) {
img = 'Images/djs/15.png';
}else if (n< 24) {
img = 'Images/djs/16.png';
}
else {
img = 'Images/djs/16.png';
}
if(dt==3)
if (n > 10 || n < 2) {

img = 'Images/djs/17.png';
} else if (n < 12) {
img = 'Images/djs/18.png';
} else if (n < 14) {
img = 'Images/djs/19.png';
} else if (n < 16) {
img = 'Images/djs/10.png';
} else if (n < 18) {
img = 'Images/djs/21.png';
} else if (n < 20) {
img = 'Images/djs/22.png';
} else if (n< 22) {
img = 'Images/djs/23.png';
}else if (n< 24) {
img = 'Images/djs/24.png';
}
else {
img = 'Images/djs/24.png';
}
if(dt==4)
if (n > 10 || n < 2) {

img = 'Images/djs/25.png';
} else if (n < 12) {
img = 'Images/djs/26.png';
} else if (n < 14) {
img = 'Images/djs/27.png';
} else if (n < 16) {
img = 'Images/djs/28.png';
} else if (n < 18) {
img = 'Images/djs/29.png';
} else if (n < 20) {
img = 'Images/djs/30.png';
} else if (n< 22) {
img = 'Images/djs/31.png';
}else if (n< 24) {
img = 'Images/djs/32.png';
}
else {
img = 'Images/djs/32.png';
}
if(dt==5)
if (n > 10 || n < 2) {

img = 'Images/djs/33.png';
} else if (n < 12) {
img = 'Images/djs/34.png';
} else if (n < 14) {
img = 'Images/djs/35.png';
} else if (n < 16) {
img = 'Images/djs/36.png';
} else if (n < 18) {
img = 'Images/djs/37.png';
} else if (n < 20) {
img = 'Images/djs/38.png';
} else if (n< 22) {
img = 'Images/djs/39.png';
}else if (n< 24) {
img = 'Images/djs/40.png';
}
else {
img = 'Images/djs/40.png';
}
if(dt==6)
if (n > 10 || n < 2) {

img = 'Images/djs/41.png';
} else if (n < 12) {
img = 'Images/djs/42.png';
} else if (n < 14) {
img = 'Images/djs/43.png';
} else if (n < 16) {
img = 'Images/djs/44.png';
} else if (n < 18) {
img = 'Images/djs/45.png';
} else if (n < 20) {
img = 'Images/djs/46.png';
} else if (n< 22) {
img = 'Images/djs/47.png';
}else if (n< 24) {
img = 'Images/djs/48.png';
}
else {
img = 'Images/djs/autopilot.png';
}
document.write(<img src="Images/djs/'+img+'" width="340" height="500"
/>);
}
</script></div>

mico2292
03-16-2014, 10:59 PM
the above code is what ive got so far but it seems to be not working, the images doesnt display.

edbr
03-17-2014, 02:50 AM
hm must be a mistake in the document write section i suspect, ill try and test if i have time

edbr
03-18-2014, 03:25 AM
sorry no time yet but i dd notice if(dt==0) no curly braces

edbr
03-18-2014, 03:34 AM
try this simpler days worth without the bad function

<script>

var d = new Date;
var n = d.getHours();
var dt=d.getday();
var img = null;

if (n > 10 || n < 2) {
document.write("<img src='Images/djs/49.png'>")
}
else if (n < 12) {
document.write("<img src='Images/djs/50.png'>")
} else if (n < 14) {
document.write("<img src='Images/djs/51.png'>")
} else if (n < 16) {
document.write("<img src='Images/djs/52.png'>")
} else if (n < 18) {
document.write("<img src='Images/djs/53.png'>")
} else if (n < 20) {
document.write("<img src='Images/djs/54.png'>")
} else if (n< 22) {
document.write("<img src='Images/djs/55.png'>")
}else if (n< 24) {
document.write("<img src='Images/djs/56.png'>")
}
else {
document.write("<img src='Images/djs/57.png'>")
}<script>

edbr
03-18-2014, 03:40 AM
try this simpler days worth without the bad function

<script>

var d = new Date;
var n = d.getHours();
var dt=d.getday();
var img = null;

if (n > 10 || n < 2) {
document.write("<img src='Images/djs/49.png'>")
}
else if (n < 12) {
document.write("<img src='Images/djs/50.png'>")
} else if (n < 14) {
document.write("<img src='Images/djs/51.png'>")
} else if (n < 16) {
document.write("<img src='Images/djs/52.png'>")
} else if (n < 18) {
document.write("<img src='Images/djs/53.png'>")
} else if (n < 20) {
document.write("<img src='Images/djs/54.png'>")
} else if (n< 22) {
document.write("<img src='Images/djs/55.png'>")
}else if (n< 24) {
document.write("<img src='Images/djs/56.png'>")
}
else {
document.write("<img src='Images/djs/57.png'>")
}<script>

mico2292
03-18-2014, 08:13 PM
WOW it works!!

mico2292
03-18-2014, 08:15 PM
<div align="center"><script>
var d = new Date;
var n = d.getHours();
var dt=d.getDay();
var img = null;
<!---Monday---!>
if(dt==1 & n >= 2 && n < 10) {document.write ("<img src= 'Images/djs/8.png'>")}
if(dt==1 & n >= 10 && n < 12) {document.write ("<img src= 'Images/djs/1.png'>")}
if(dt==1 & n >= 12 && n < 14) {document.write ("<img src= 'Images/djs/2.png'>")}
if(dt==1 & n >= 14 && n < 16) {document.write ("<img src= 'Images/djs/3.png'>")}
if(dt==1 & n >= 16 && n < 18) {document.write ("<img src= 'Images/djs/4.png'>")}
if(dt==1 & n >= 18 && n < 20) {document.write ("<img src= 'Images/djs/5.png'>")}
if(dt==1 & n >= 20 && n < 22) {document.write ("<img src= 'Images/djs/6.png'>")}
if(dt==1 & n >= 22 && n < 24) {document.write ("<img src= 'Images/djs/7.png'>")}
if(dt==1 & n >= 24 && n < 2) {document.write ("<img src= 'Images/djs/8.png'>")}
<!---Tuesday---!>
if(dt==2 & n >= 2 && n < 10) {document.write ("<img src= 'Images/djs/16.png'>")}
if(dt==2 & n >= 10 && n < 12) {document.write ("<img src= 'Images/djs/9.png'>")}
if(dt==2 & n >= 12 && n < 14) {document.write ("<img src= 'Images/djs/10.png'>")}
if(dt==2 & n >= 14 && n < 16) {document.write ("<img src= 'Images/djs/11.png'>")}
if(dt==2 & n >= 16 && n < 18) {document.write ("<img src= 'Images/djs/12.png'>")}
if(dt==2 & n >= 18 && n < 20) {document.write ("<img src= 'Images/djs/13.png'>")}
if(dt==2 & n >= 20 && n < 22) {document.write ("<img src= 'Images/djs/14.png'>")}
if(dt==2 & n >= 22 && n < 24) {document.write ("<img src= 'Images/djs/15.png'>")}
if(dt==2 & n >= 24 && n < 2) {document.write ("<img src= 'Images/djs/16.png'>")}

mico2292
03-18-2014, 08:18 PM
That's the code that i did i just tweeked your code a little but same principle. Thanks so much for you help.

edbr
03-19-2014, 06:37 AM
noprob, i just made a horses rear end out of the function. just not my thing javascript but it should be these days I think