Re: Display image based on upcoming holiday

Yeah wrote:
I have a web site which changes the header logo based on the upcoming holiday.

For example, from December 10th to 25th, XMAS.JPG is displayed. From October 20th to 31st, HALLWEEN.JPG is displayed. Etc. etc. If today's date is not near a holiday, then the default LOGO.JPG is displayed.

A while back, I was looking for a JavaScript that does this automagically. But each snippet I found traditionally displays the default logo for a second, then switches to the holiday logo. I had one years ago that *instantly* displays the correct logo (but I misplaced it).

Can anybody point me to a more efficient JavaScript solution? Any help is appreciated. Thanks!

Do it on your server - create a copy of LOGO.JPG called BANNER.JPG (or similar) then replace LOGO.JPG in your markup with BANNER.JPG.

Have a script run on your server each day (say at 5 minutes past midnight) that copies the appropriate image to BANNER.JPG.

No client-side script and hopefully much more reliable. Users in different time zones will see the changed banner at different local times, but that doesn't seem important here.


A script based solution might be:


 <img name="theBanner" src="LOGO.JPG">

 <script type="text/javascript">

   function changeBanner()
   {
     var nowDate = new Date();
     var m = nowDate.getMonth()+1;  // Months are zero-indexed - jan=0
     var d = nowDate.getDate();
     var bannerImg;

     if (document.images && (bannerImg = document.images.theBanner)){

       if (12 == m && (d>9 && d<26)){
         bannerImg.src = 'XMAS.JPG';

       } else if (10 == m && (d>19 && d<32)){
         bannerImg.src = 'HALLWEEN.JPG';
       }
     }
   }

 </script>


But you are at the whim of client-side scripting and whether the users' system has been set with an accurate date. You are probably better off to put all your image names in lower case, but it's not much of an issue.


--
Rob
.