View Full Version : Banner -Times

05-08-2006, 07:09 PM
Hi Ppl,
I have a banner and it is for an internet radio station. I want the DJ to be shown on the banner be this would change every hour. 24/7 how shall i do this? :thumbsup:

05-08-2006, 07:30 PM
More than likely, you'd be better served by a server side language determining which image to send up at the current time. I would check out PHP or ASP for that. You'll have to add a little javascript anyway, so I'll cover that now. If you have to do it with javascript and no server side language you still can.

You need the "setInterval" function, and you need to the interval of a function (like, "changeDJBanner") to be 1 hour.

Then, if you have the server side working to serve you the right image, you can make your changeDJBanner function simple. Otherwise, you'll need to figure out which image to display in the javascript. I'll show both:

For this you need a php script called DJImageServer.php that sends a header for JPEG data, calculates the current time, and finds the necessary file, reads it, and sends the data as a byte stream.

function changeDJBannerWithServer()
var bannerElement = document.getElementById("djBannerIMGTag");
var djImg = new Image();
djImg.src = 'DJImageServer.php';
bannerElement.src = djImg.src;

setInterval(changeDJBannerWithServer, 3600000);

For this you need an image per hour named DJImage0.jpg through DJImage23.jpg

function changeDJBannerWithoutServer()
var bannerElement = document.getElementById("djBannerIMGTag");
var today = new Date();
var djImg = new Image();
djImg.src = 'DJImage'+today.getHours()+'.jpg';
bannerElement.src = djImg.src;

setInterval(changeDJBannerWithoutServer, 3600000);

05-08-2006, 08:09 PM
to tke care if the first part hour

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"



<body onload="InitBanner()" >

<img id="Test" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="500" height="500" >

<script language="JavaScript" type="text/javascript">
var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
var ImageAry=['Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif'];

// just to make arry of 24 images
while (ImageAry.length<24){

var zxcImgCnt;

function InitBanner(){
var ToDay=new Date();
var Hour=ToDay.getHours();
var NextHour=new Date(ToDay.getFullYear(),ToDay.getMonth(),ToDay.getDate(),Hour+1)-ToDay;

function Banner(){




05-08-2006, 10:59 PM
I wouldn't use setTimeout with an hour delay as that will update the banner exactly one hour after the person first visits the page (not that anyone will stay there long enough for it to trigger). Whant you need is a setInterval loop that tests if the hour has changed and then changes the banner appropriately. You will also need to adjust the time setting for whichever timezone that you want to use rather than using the timezone setting of the computer running the browser. There is nothing you can do when the time on the computer is set wrong and the wrong image will always display in that case.

To avoid all of these issues go with a server side solution for loading the initial banner. At least then you will not be more than 59 minutes out with the changes of the banner from within the Javascript.

05-08-2006, 11:10 PM
Ok, the timezone thing is a good reason to go server side for the image select. but here's a great way to keep your banner in sync.

Have the server generate the number of minutes to the next hour and set a timeout like so:

setTimeout(bannerInitRotate, <?php echo $numberOfMinutesToNextHour;?>);

function bannerInitRotate()
setInterval(bannerRotate, 360000);

function bannerRotate()
img.src = 'DJImageServer.php';

This will fire the banner rotate at the next hour based on when the server thinks the next hour is, and then it will begin the hour interval for rotation. This will be the best way to ensure an accurate banner for the client. If they show up at 8:59, they get the 8:00 banner, and one minute later it swaps, if they leave the page open for a day, every hour it will change as you want. If they're in a different timezone, by using the server to generate the time, you won't have to worry about it, and if they're clock is set wrong, you're using relative time (minutes to the next hour) based on the server time, so you're only using their clock for counting, not reference.

05-09-2006, 09:17 AM
Ok cheers guys thats alot of help
However what script do I need on my server for the banner to actually change every hour?

05-09-2006, 04:54 PM
any1 know?

05-12-2006, 09:18 AM
Is there anyway for the banner to change time every hour but the script to change not the whole banner. I have my banner in fireworks. Is it possible?

05-12-2006, 04:46 PM
can u help me?