Tag Archives: banners

How to change a banner automatically based on time of day

Posted on by

Tech alert: If you’re comfortable  messing around in your page’s  HTML code, you’ll find this easy to do. If not, pass it along to your web administrator or programmer. For lots of nifty Javascript code snippets, see JavaScript Source (just don’t add blinky, smashy things to your pages).

You can rotate through different pictures on your web page according to the time of the day.  Follow these steps to swap between a day banner and a night banner, for example:

1. Copy the following code into a file called PicturetimeChange.js:

function IMGChange() {var t=new Date();var h = t.getHours();var r1=”image name can be .gif or .jpeg“;var r2=”image name can be .gif or .jpeg “;var el=document.getElementById(‘changeIMG’);el.src = (h>=6 && h<18) ? r1 : r2;}

function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != ‘function’) {

window.onload = func;

} else {

window.onload = function() {

if (oldonload) {

oldonload();

}

func();

}

}

}

addLoadEvent(function() {

IMGChange();

});

2. Copy this line somewhere inside the <head></head> tags:

<script type=”text/javascript” src=”PicturetimeChange.js”></script>

3. Copy the following code into the spot where you want your picture to appear (such as the banner area):

<img src=”full path of image” id=”changeIMG” alt=”add alt text here“>