Fade & Swap Images @ Specific Time?

[CWatsonJr]

First off I would like to thank all those who have posted answers to questions. I have learned much in my searches.

I would like to swap a banner on my homepage for morning and night. I have the swap script working (all 6 lines :rolleyes: ).

Now I want to try something more elaborate and am having problems.



1. Swap banner even if visitor hasn't refreshed
2. Fade banners.

I have found an excellent fade script at:

http://javascript.internet.com/miscellaneous/image-fader-transition.html

but it goes back and forth, I just want it to switch at a specific time.

Here is my swap script:

datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if (thehour > 19) document.write('<img src="chief_night.jpg">');
else document.write('<img src="chief_day.jpg">');


Thanks again for any assistance with this!

Cliff Watson

[demo]

when exactly do you want them to change?

[CWatsonJr]

:eek: Sorry...

7AM and 7PM

Just have the 7pm referenced...

I knew I forgot something! :)

[demo]

give me ten minutes and i'll write a script

[demo]

datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if (thehour > 19){document.write('<img id="the_pic" src="chief_night.jpg" style="filter:blendTrans(duration=3)">');whichPic="night"}
else{document.write('<img id="the_pic" src="chief_day.bmp" style="filter:blendTrans(duration=3)">');whichPic="day"}


function checkTime(){
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if(thehour > 19 && whichPic=="day"){changeFade("chief_night.jpg");return}
if(thehour < 19 && whichPic=="night"){changeFade("chief_day.jpg");return}
setTimeout("checkTime()",800);
}
function changeFade(pic){
document.getElementById("the_pic").filters.blendTrans.Apply();
document.getElementById("the_pic").src = pic;
document.getElementById("the_pic").filters.blendTrans.Play();
setTimeout("checkTime()",3000);
}
setTimeout("checkTime()",1000)


i hope that this works for you

demo

[demo]

i forgot to mention that this fades between the pictures

[CWatsonJr]

WOW...

Thank you very much!!!!!

I will go over this so I can understand what I was doing wrong.

Thank you again!!!!

This is a great forum :D

[CWatsonJr]

The evening fade works perfect. The morning fade doesn't. It will change on refresh but doesn't fade. Doesn't make sense since the code is the same, just the time is different.

I had to change one of the file references (bmp>jpg) and I changed the times for the file change.

Thanks so much for this!! I will continue to look at it to see if I can figure out why the second part doesn't fade :)

datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if (thehour > 17){document.write('<img id="the_pic" src="chief_night.jpg" style="filter:blendTrans(duration=3)">');whichPic="night"}
else{document.write('<img id="the_pic" src="chief_day.jpg" style="filter:blendTrans(duration=3)">');whichPic="day"}


function checkTime(){
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if(thehour > 17 && whichPic=="day"){changeFade("chief_night.jpg");return}
if(thehour < 6 && whichPic=="night"){changeFade("chief_day.jpg");return}
setTimeout("checkTime()",800);
}
function changeFade(pic){
document.getElementById("the_pic").filters.blendTrans.Apply();
document.getElementById("the_pic").src = pic;
document.getElementById("the_pic").filters.blendTrans.Play();
setTimeout("checkTime()",3000);
}
setTimeout("checkTime()",1000)

Thanks again!!

Cliff Watson

[demo]

OOooops sorry i made big mistake i forgot to add something the script below should work fine now:



datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if (thehour > 17){document.write('<img id="the_pic" src="chief_night.jpg" style="filter:blendTrans(duration=3)">');whichPic="night"}
else{document.write('<img id="the_pic" src="chief_day.jpg" style="filter:blendTrans(duration=3)">');whichPic="day"}


function checkTime(){
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if(thehour > 17 && whichPic=="day"){changeFade("chief_night.jpg");whichPic=="night";return}
if(thehour < 6 && whichPic=="night"){changeFade("chief_day.jpg");whichPic=="day";return}
setTimeout("checkTime()",800);
}
function changeFade(pic){
document.getElementById("the_pic").filters.blendTrans.Apply();
document.getElementById("the_pic").src = pic;
document.getElementById("the_pic").filters.blendTrans.Play();
setTimeout("checkTime()",3000);
}
setTimeout("checkTime()",1000)


hope this works for you!

demo