Day and time change.js

[andysim]

Hi, hope someone can help!

Got this script that changes an image on my website but i can not get it to change the image more than twice..


function pixTimeChange() {
var t=new Date();
var h = t.getHours();
var r1="http://www.site.com/maxsite/ShowChange_Images/Change7a.png";
var r2="http://www.site.com/ShowChange_Images/Change7b.png";
var el=document.getElementById('myimage');

//I need to add more time changes, but it will not let me.. HELP

// See the time below. Note: The time is in 24 hour format.
// In the example here, "7" = 7 AM; "17" =5PM.
el.src = (h>=7 && h<17) ? r1 : r2;
}

I have some other code:


// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
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() { . . .



It works with this code (php?)



<script language="JavaScript1.2" type="text/javascript">

//Daily iframe content- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, and Terms Of use, visit http://dynamicdrive.com
//This credit MUST stay intact for use



var ie=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1


var iframeprops='width=150 height=490 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"'


var daycontent=new Array()
daycontent[1]="http://www.site/date1.php"
daycontent[2]="http://www.site.com/date2.php"
daycontent[3]="http://www.site.com/date3.php"
daycontent[4]="http://www.site.com/date4.php"
daycontent[5]="http://www.site.com/date5.php"
daycontent[6]="http://www.site.com/date6.php"
daycontent[0]="http://www.site.com/date7.php"

if (ie||dom)
document.write('<iframe id="dynstuff" src="" '+iframeprops+'></iframe>')

var mydate=new Date()
var mytoday=mydate.getDay()

function dayofweek_iframe(){
if (ie||dom){
var iframeobj=document.getElementById? document.getElementById("dynstuff") : document.all.dynstuff
iframeobj.src=daycontent[mytoday]
}
}

window.onload=dayofweek_iframe

</script>

Hope you understand what i am trying to do?

Cheers
Andy

[jscheuer1]

None of that is PHP code. The pages linked to in the last script are PHP pages though, but that may or may not be part of the problem I think you are asking about. Probably not.

The last script is from:

http://www.dynamicdrive.com/dynamicindex17/dowiframe.htm

and is lacking its script credit.

Please restore the credit first.

Anyways, the real problem appears to be with the first script not accepting more than two times/images, right?

You could use this script instead of the pixTimeChange() function. If you do, get rid of it and all references to it from your page:
Keep a backup of the page first though, just in case.


<script type="text/javascript">

// Time of Day Images Script (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use

/* Simply place this script where you want your time of day image to appear.
* Edit image properties as required.
* criteria start and end may be set in terms of hours(h) and minutes(m), or just hours(h) - see below for examples.
* Use hours in 24hr notatation
*/

;(function(){
var ims = [ //set in order from the earliest to the latest with the last ('default') being shown if none of the other criteria are met
{name: 'Morning', // name for this image for use in the alt attribute
criteria: {start: '7h', end: '12h'},// morning is 7am or later and before noon
image: 'morning.jpg' // source for this image for use as the src attribute
},
{name: 'Afternoon',
criteria: {start: '12h', end: '18h30m'}, // afternoon is noon or later and before 6:30pm
image: 'afternoon.jpg'
},
{name: 'Evening',
criteria: 'default', // all other times show evening
image: 'evening.jpg'
} // <-- no comma after last ims object !IMPORTANT! for some browsers, as ims objects may be added or taken away

//////////////////// No Need To Edit Below Here ////////////////////

], d = new Date(), m = d.getHours() * 60 + d.getMinutes(), i = 0, im, stime, etime;
for(i; i < ims.length; ++i){
if(typeof ims[i].criteria === 'object'){
stime = ims[i].criteria.start.split(/\D/);
etime = ims[i].criteria.end.split(/\D/);
stime = stime.length > 1? stime[0] * 60 + +stime[1] : stime[0] * 60;
etime = etime.length > 1? etime[0] * 60 + +etime[1] : etime[0] * 60;
if(m >= stime && m < etime){
im = ims[i];
break;
}
}
im = ims[i];
}
document.write('<img src="' + im.image + '" alt="' + im.name + ' Image" title="">');
})();
</script>

In any case though, the code you posted for the load function is incomplete. The first script could be fixed up independently to accept multiple times/pics, but that's no guarantee it would work with the rest of the page. And the substitute script I offered is already much easier to work with if you want to edit in more images and times and/or change the images or criteria for the existing ones. The iframe script doesn't appear to really work with the time/image script, perhaps just coexists with it via the Multiple onload function, that's not clear because we can't see all of that in your post. Give the substitute script a go. Place it in the body where you want the image to appear. Don't forget to get rid of the pixTimeChange() function and all references to it. Keep a backup of the page first though, just in case.

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[andysim]

Thank you John, I will give it a go!!!

Can this script only use 3 images? The reason I ask is that I run an internet radio station and I would like to have the image change for each show/presenter.

Thank you again

Andy:)

[jscheuer1]

You can add/remove and/or edit the ims Objects:


var ims = [ //set in order from the earliest to the latest with the last ('default') being shown if none of the other criteria are met
{name: 'Morning', // name for this image for use in the alt attribute
criteria: {start: '7h', end: '12h'},// morning is 7am or later and before noon
image: 'morning.jpg' // source for this image for use as the src attribute
},
{name: 'Afternoon',
criteria: {start: '12h', end: '18h30m'}, // afternoon is noon or later and before 6:30pm
image: 'afternoon.jpg'
},
{name: 'Evening',
criteria: {start: '18h30m', end: '21h30m'}, // evening is 6:30pm or later and before 9:30pm
image: 'evening.jpg'
},
{name: 'Night',
criteria: 'default', // all other times show night
image: 'night.jpg'
} // <-- no comma after last ims object !IMPORTANT! for some browsers, as ims objects may be added or taken away

[andysim]

Thank's again John

GOT IT,that was me being a bit thik thanks! just one more thing... I need to run diffrent images on a monday, tues ect... any ideas?

Andy

[andysim]

Thank's again John

GOT IT,that was me being a bit thik thanks! just one more thing... I need to run diffrent images on a monday, tues ect... any ideas?

Andy
Ok I found away of doing the change for every day.

Thanks