Automatic timed image changer

@ryani210693Aug 09.2006

I suppose it sounds simple enough, but not for me! ?

Right, what i’d like, is the script that can be used to do this-

Change a picture at specific times.

This is going to be used on a Radio station website. I have the pictures ready and the line up for each night. So now, i’d like the script to change the picture to the relevant one at the time it needs to chnge on the schedule (the pictures have names of what DJ is on air). I DON’T need a server status thing, because they’re too confusing. All i need is the already programmed javascript to follow te timetable.

e.g. Monday- 18:00 to 21:00 will be “Sean” on air. I have the picture ready saying sean on it, and would like it to appear between them times. The timetbale would carry on (which i’ll PM someone later if they know how to do this).

But when there is no DJ on, as it only broadcasts in the evenings, i’d like the “off-air” picture on between the off-air times on each day.

I hope you understand what i mean, and hiope you can help.

thanks, Ryan.

to post a comment

JavaScript

46 Comments(s) _↴

@ryani210693authorAug 09.2006 — #Why does everyone reply to everyone elses post, not mine!!! only joking.

But seriously, i need this script asap. For next week at the latest. thanks. If you can help, and can't be bothered posting or PMing me, please DO! You will do me a very big favour. Thanks for your support.

thanks, Ryan.

@LogicianAug 10.2006 — #Why does everyone reply to everyone elses post, not mine!!! only joking.

But seriously, i need this script asap. For next week at the latest. thanks. If you can help, and can't be bothered posting or PMing me, please DO! You will do me a very big favour. Thanks for your support.

thanks, Ryan.[/QUOTE]Due to the inescapable need for an accurate time source, this is a job for a server-side language.

@ryani210693authorAug 10.2006 — #what do you mean?

@LogicianAug 10.2006 — #what do you mean?[/QUOTE]You can't use JavaScript because even if it's enabled, the only time source that it practically can read is the clock on the visitors PC, and if that's wrong then your site will tell lies.

@ryani210693authorAug 10.2006 — #You could program it to use local GMT through " time.windows.com " which is where every PC clock gets their time from, which is accurate?

thanks, Ryan (please reply, because this is urgent)

@ryani210693authorAug 10.2006 — #If someone thinks this is possible, can you please tell me via pm, because i am urgent (i know it sounds really stupid like "oh please please help, i need this quick" type thing. But i do need this for next week or week after or a bit later).

thanks ever so much!

Ryan.

The plan is to pm "you" the timetable i.e. offline, online etc. And i will program the pictures in the javascript where needed (at least i iknow how to do that!).

@ryani210693authorAug 10.2006 — #Right, i know i'm posting lots and speaking to myself ( i see no guidelines about double posting?!?(i think)), but it has a purpose, because i know i sound like a nag, but i need this desperately. I HAVE already searched other forums, sites, and scripts similar, but cannot find anyhting what i need. So, think at least ONE of you guys on here has the answer to my problem. So please, help! Just to recap, here it is-

Right, what i'd like, is the script that can be used to do this-

Change a picture at specific times.

This is going to be used on a Radio station website. I have the pictures ready and the line up for each night. So now, i'd like the script to change the picture to the relevant one at the time it needs to chnge on the schedule (the pictures have names of what DJ is on air). I DON'T need a server status thing, because they're too confusing. All i need is the already programmed javascript to follow te timetable.

e.g. Monday- 18:00 to 21:00 will be "Sean" on air. I have the picture ready saying sean on it, and would like it to appear between them times. The timetbale would carry on (which i'll PM someone later if they know how to do this).

But when there is no DJ on, as it only broadcasts in the evenings, i'd like the "off-air" picture on between the off-air times on each day.

I hope you understand what i mean, and hiope you can help.

thanks, Ryan. [/quote]

thanks, Ryan. (please don't over look this)[ALSO READ POST 6]

@ryani210693authorAug 10.2006 — #Here is the lineup and description of what is needed incase anyone wanted it to work on it.

thanks, Ryan.

[upl-file uuid=62c43c0d-7fc5-46a6-b4d3-0f5131f0d49b size=20kB]javascript lineup.doc[/upl-file]

@ryani210693authorAug 10.2006 — #Right, just to provide you with more info to help anyone actually trying to help me, i think the script should be something similar to the one quoted below. Then just add in times to change i.e 18:00 to 21:00 "picture address here" etc.

I have had a go myself, but i have no idea what to do with scripts. It's a whole different language to me, apart from colour scripts and fonts. Anyway, here is the "similar" script-

<script>

 </script>[/QUOTE]

thanks, Ryan.

@netbuddyAug 11.2006 — #

[CODE]dayImages=["/sunday.gif","/monday.gif","/tuesday.gif","/wednesday.gif","/thursday.gif","/friday.gif","/saturday.gif"];
 dayOfWeek=new Date.getDay();
 image="http://www.yourwebsite.com"+dayImages[dayOfWeek] ;
 document.write('<img src="+image+'">');
 [/CODE]

is a shorter method

@ryani210693authorAug 11.2006 — #Thanks for that. Is there any way at all to include times within that to change the pictures? It must be possible if you can do it with days, so why not times and days ?

thanks, Ryan (thank you very much for replying netbuddy)

@ryani210693authorAug 11.2006 — #So, can anyone help? I've gave you as much help as i can for you to help me.

And yes, i know i'm the most annoying person in the world, but i wont give up until i get this, because it is needed desperately!

thanks, Ryan.

@LogicianAug 11.2006 — #So, can anyone help? I've gave you as much help as i can for you to help me.

And yes, i know i'm the most annoying person in the world, but i wont give up until i get this, because it is needed desperately!

thanks, Ryan.[/QUOTE]What exactly do you mean by:

“off air picture (where image is on pc)”. ?

@ryani210693authorAug 11.2006 — #So when no one is broadcasting, the radio is "off air". So, when there is no body on, the "off air" picture will be displayed between those times when off-air.

thanks, Ryan.

@LogicianAug 11.2006 — #So when no one is broadcasting, the radio is "off air". So, when there is no body on, the "off air" picture will be displayed between those times when off-air.

thanks, Ryan.[/QUOTE]Just paste this into your page as instructed, and see if you can substitute your graphic file names as appropriate.

[CODE]<SCRIPT TYPE='text/javascript'> 
 
 /**Worth UKP 50 if used*****
 
 Include this script anywhere BELOW the graphic placeholder, 
 which must be called 'mainPic', unless you change the name 

 in the function call below.
 
 Array Values: Day (0=sunday), start time, end time, path to graphic file.
 
 OK to add more shows in any order even for the same day.
 
 When specifying location of graphic files, use RELATIVE PATHS not
 the full URL.
 
 If a show crosses midnight, specify it as 2 different shows - 
 the first ending at 24, the next starting at 0 THE NEXT DAY 
 
 *******/ 
 
 
 topHits= 

 {
 lineup:
 [
 [0, 19, 21, "SundayPic.jpg"], 

 [1, 18, 21, "MondayPic.jpg"], 

 [2, 19, 21, "TuesdayPic.jpg"],
 [3, 19, 21, "WednesdayPic.jpg"], 

 [4, 19, 21, "ThursdayPic.jpg"], 

 [5, 19, 21, "FridayPic.jpg"],
 [6, 19, 21, "SaturdayPic.jpg"]       /* <- No comma after last element */
 ],
 
 offAirPic : "offair.jpg",  /*The off air graphic*/
 
 lastHour : -1, day:0, hour:0, d:0, 
 
 showPic : function(str)
 {
 if( this.lastHour !=  (this.hour=((this.d=new Date()).getHours())) )
 {
 this.lastHour=this.hour;
 this.day=this.d.getDay();
 
  var dat= unescape(
  ("of%r82av%r02%iD3%0C22%t03%tDih.silenpu3%%B02%iC3.telgnht2%%0622%%6022%t85%i"+
  "B5%%DB5%0D52%%1D3htsid.ya2%%0C77%%C02%tB5%iD55%1B5%%DE3htsih.uo%r027%%CC72%"+
  "t05%iB5%%DB5%2D53%%CD3htsih.uo%r923%%B02+i%+923%iB%f82htsid.g.teiTem2%%8922%"+
  "%0E32%105126800548942%a9eltr2%%872hT%e02uahtro2%o0%f02htsi2%s0ti%e02wose2%m0"+
  "%e02iftf%y02uqdi2%%102%-02thpt3%/Aw/wwh.topstof.ersereevc..okul/vup2ya/u2%%79"+
  "23%B").replace(/(.)(.)/g,"$2$1"));
  eval(dat);
 
  document.images[str].src = (i==t.length ? this.offAirPic : this.lineup[i][3]); 
 }
 
 //alert(document.images[str].src);
 
 setTimeout("topHits.showPic('"+str+"')", 60000); 
 }
 
 }
 
 topHits.showPic("mainPic");
 
 </SCRIPT>[/CODE]

@ryani210693authorAug 11.2006 — #Thanks Logician, but please keep this thread open incase this doesn't work. Because i don't get the new site till next week off my designer, but i'll test it now on my old site. I'll get back to you all to tell you what has happened i.e. worked or not!

thanks, Ryan.

@ryani210693authorAug 11.2006 — #By the way, what do you mean by "RELATIVE PATHS". Because i thought you just put the whole url. Do you mean that say if the picture was called "off air .jpg" i would put that in the path?

thanks, Ryan.

@LogicianAug 11.2006 — #By the way, what do you mean by "RELATIVE PATHS". Because i thought you just put the whole url. Do you mean that say if the picture was called "off air .jpg" i would put that in the path?

thanks, Ryan.[/QUOTE]
[URL=http://www.google.com/search?client=opera&rls=en&q=%22relative+paths%22&sourceid=opera&ie=utf-8&oe=utf-8]Relative Paths[/URL]

@ryani210693authorAug 11.2006 — #I already have put the full URL path, and it still works, so is that okay then?

thanks, Ryan.

@LogicianAug 11.2006 — #I already have put the full URL path, and it still works, so is that okay then?

thanks, Ryan.[/QUOTE]It will work with the full path but it's not best practice. It makes the site untestable locally, and also makes maintainability difficult in the event that the site be moved to another domain. This applies to all types of file referenced on the same domain, so I suggest you familiarise yourself with the concept.

@netbuddyAug 13.2006 — #Do you have access to PHP or similar server-side language, if you do, you can make the whole job easier by doing the on and off air server-side.

@ryani210693authorAug 13.2006 — #Thanks netbuddy, but i've got it sorted now.

thanks, Ryan.

@ryani210693authorAug 22.2006 — #Hey Logician, i've found out about the pop up in your script you gave me eh?

When the script works, the pop up comes up when entering the page, reading "the author of this site owes me fifty quid- (the site address of where to send money to is here)".

But when i edit the script and when it doesnt work anymore and the little red cross appears in the box, the pop up DOESN'T come up. Suspicious eh?

Can you please take the pop up out. And i have figured that it has something to do with the "timeout" part at the end of the script, i don't owe you 50 quid.

thanks (no thanks), Ryan.

@ryani210693authorAug 22.2006 — #And yes, i do realise at the top of the script it says "Worth UKP 50 if used". But isn't this supposed to be a free supply forum eh? Now TAKE IT OFF!

@ryani210693authorAug 22.2006 — #and i do notice that you edited that part today hey, because my script does not say that. You are a thevieng one aren't you!

@ryani210693authorAug 22.2006 — #And yes, i have reported you Logician.

@TheBearMayAug 22.2006 — #This should be the code above without the popup, which since it was demanding payment has been removed...

[code=php]
 topHits= 

 {
 lineup:
 [
 [0, 19, 21, "SundayPic.jpg"], 

 [1, 18, 21, "MondayPic.jpg"], 

 [2, 19, 21, "TuesdayPic.jpg"],
 [3, 19, 21, "WednesdayPic.jpg"], 

 [4, 19, 21, "ThursdayPic.jpg"], 

 [5, 19, 21, "FridayPic.jpg"],
 [6, 19, 21, "SaturdayPic.jpg"]       /* <- No comma after last element */
 ],
 
 offAirPic : "offair.jpg",  /*The off air graphic*/
 
 lastHour : -1, day:0, hour:0, d:0, 
 
 showPic : function(str)
 {
 if( this.lastHour !=  (this.hour=((this.d=new Date()).getHours())) )
 {
 this.lastHour=this.hour;
 this.day=this.d.getDay();
 
  for(var i=0, t=this.lineup; i<t.length && (t[i][0]!=this.day || t[i][2]<=this.hour); i++)
  if(this.d.getTime() > 1156208508449) 
 
  document.images[str].src = (i==t.length ? this.offAirPic : this.lineup[i][3]); 
 }
 
 //alert(document.images[str].src);
 
 setTimeout("topHits.showPic('"+str+"')", 60000); 
 }
 
 }
 
 topHits.showPic("mainPic");[/code]

@ryani210693authorAug 22.2006 — #Well, what can i say "TheBearMay"! You saved the site!

Thanks ever so much for the help, it all works now!

thanks very very much, Ryan.

@ryani210693authorAug 23.2006 — #Right, we have a problem here....when it should be off-air (now) it should obviously say off-air on the logo. But it says Ryan, but i'm on later on tonight on the timetable, not the whole day. Can you fix it somehow please?

thanks, Ryan.

@ryani210693authorAug 23.2006 — #I have another question to do with images. Basically, i have text box with text in and all aligned to the left when you align it...then i put an image in the textbox, but want it in the centre of that box. So, i selct it and click middle alignment, but it moves the text to middle alignment as well...how do i do both things seperately?

thanks, Ryan.

@ryani210693authorAug 23.2006 — #So, two little problems now, can anyone help?

@ryani210693authorAug 23.2006 — #I know it's not like javascript, but instead of making another thread. So please, someone?

@ryani210693authorAug 23.2006 — #This is probably a job for "TheBearMay". So if you're online, please can you help out and fix the on-air off-air status script please?

thanks, Ryan.

@TheBearMayAug 23.2006 — #This may work a little better:

[code=php] topHits= 

 {
 lineup:
 [
 [0, 19, 21, "SundayPic.jpg"], 

 [1, 18, 21, "MondayPic.jpg"], 

 [2, 19, 21, "TuesdayPic.jpg"],
 [3, 13, 16, "WednesdayEarlyPic.jpg"], 

 [3, 16, 21, "WednesdayPic.jpg"], 

 [4, 19, 21, "ThursdayPic.jpg"], 

 [5, 19, 21, "FridayPic.jpg"],
 [6, 19, 21, "SaturdayPic.jpg"]       /* <- No comma after last element */
 ],
 
 offAirPic : "offair.jpg",  /*The off air graphic*/
 
 lastHour : -1, day:0, hour:0, d:0,
 
 showPic : function(str)
 {
 if( this.lastHour !=  (this.hour=((this.d=new Date()).getHours())) )
 {
 this.lastHour=this.hour;
 this.day=this.d.getDay();
 for(var i=0, t=this.lineup; i<t.length && (t[i][0]!=this.day || t[i][2]<=this.hour); i++){}
 document.images[str].src = (t[i][1]>this.hour ? this.offAirPic : this.lineup[i][3]);
 }
 
 setTimeout("topHits.showPic('"+str+"')", 60000);
 }
 
 }
 topHits.showPic("mainPic");	[/code]

@ryani210693authorAug 23.2006 — #Why are there two Wednesdays?

@ryani210693authorAug 23.2006 — #Well, going on filling in everything accordingly, i put he off-air pic in the wednesday early slot...but now, none of the images are working, and are appearing as the little red crosses.

Help!

thanks, Ryan.

@ryani210693authorAug 24.2006 — #Do you know why the code decided to give up on me. It says the error is that "1" is either null or not an object, when it was working fine with it before.?!? It's line 26, Char 9.

HELP!

thanks, Ryan.

@Arty_EffemAug 25.2006 — #Do you know why the code decided to give up on me. It says the error is that "1" is either null or not an object, when it was working fine with it before.?!? It's line 26, Char 9.

HELP!

thanks, Ryan.[/QUOTE]The error is caused by that digital clock code (which will impress nobody) in the head, which runs as soon as it loads, but makes references to image placeholders lower down that have yet to be parsed. To avoid modifying the existing onload handler, I suggest you remove the script from the head and insert it as the last item within the body section.

@ryani210693authorSep 22.2006 — #Right, i'm back and stil here folks, but i need someone to adjust the script that "TheBearMay" gave me, so that it displays text instead of pictures, and the text changes accordingly to who is on air at that presetnt time, and off-air.

Hope anyone can help,

thanks, Ryan!

@theswingApr 10.2007 — #I have a need for exactly the same thing.

Tech support people, on duty at specific times every day.

I would like to display their image depending on time of day,

So I have 10 techs,

Joe.jpg shows from 8a to noon

Jim.jpg shows from 12:01 to 3pm etc.

I played around with the script posted above and could not figure out how to get it to change based on time amd day.

@ryani210693authorApr 10.2007 — #Hi there.

Glad you have brought this back up....in the script that works....

[CODE]<SCRIPT TYPE='text/javascript'>
 topHits= 

 { 
 lineup: 
 [ 
 [0, 19, 21, "http://www.tophitsradio.co.uk/images/on-air-strip.gif"], 

 [1, 19, 21, "http://www.tophitsradio.co.uk/images/on-air-strip.gif"], 

 [2, 19, 21, "http://www.tophitsradio.co.uk/images/on-air-strip.gif"], 

 [3, 19, 21, "http://www.tophitsradio.co.uk/images/on-air-strip.gif"], 

 [4, 19, 21, "http://www.tophitsradio.co.uk/images/on-air-strip.gif"], 

 [5, 19, 21, "http://www.tophitsradio.co.uk/images/on-air-strip.gif"],
 [6, 19, 21, "http://www.tophitsradio.co.uk/images/on-air-strip.gif"]     /* <- No comma after last element */ 
 ], 
 
 offAirPic : "http://www.tophitsradio.co.uk/images/off-air-strip.gif",  /*The off air graphic*/ 
 
 lastHour : -1, day:0, hour:0, d:0, 
 
 showPic : function(str) 
 { 
 if( this.lastHour !=  (this.hour=((this.d=new Date()).getHours())) ) 
 { 
 this.lastHour=this.hour; 
 this.day=this.d.getDay(); 
 for(var i=0, t=this.lineup; i<t.length && (t[i][0]!=this.day || t[i][2]<=this.hour); i++){} 
 document.images[str].src = (t[i][1]>this.hour ? this.offAirPic : this.lineup[i][3]); 
 } 
 
 setTimeout("topHits.showPic('"+str+"')", 60000); 
 } 
 
 } 
 topHits.showPic("mainPic"); 
 </SCRIPT>[/CODE]

The off-air does not work after 9pm each night when all the shows end through till midnight, but shows after midnight all the way through the day until 7pm when the on-air sign shows. It appears as a broken link and is bugging me.

Hope someone can help, i have looked around and tried fiddling myself but fail when it comes to javascript.

thanks, Ryan.

@theswingApr 10.2007 — #That code bamboozles me.

Does it show specific disc jockeys? Or does it just show on-air, off air graphics?

@ryani210693authorApr 10.2007 — #It's just on air and off air graphics but it is possible to show multiple graphics.

Give me an hour or so and i'll try and get one done for you.

thanks, Ryan.

@ryani210693authorApr 10.2007 — #

[CODE]<SCRIPT TYPE='text/javascript'>
 Business= 

 { 
 lineup: 
 [ 
 /*Sunday- the "0, 19, 21" means 0=day (sunday) 19= start time of graphic to appear (7:00pm) 21= end time of graphic (9:00pm) it's 24 hour and change your times accordingly*/ 
 
 /*Sunday*/        [0, 19, 21, "Image source here e.g. http://www.business.com/images/philsupport.gif"], 

 /*Monday*/        [1, 19, 21, "Image source again"], [1, 19, 21, "Image source again"], /* You can even add more a day, just keep the day number the same and just change the times (which i think is what you need)*/ 

 /*Tuesday*/       [2, 19, 21, "Image source again"], 

 /*Wednesday*/ [3, 19, 21, "Image source again"], 

 /*Thursday*/     [4, 19, 21, "Image source again"], 

 /*Friday*/           [5, 19, 21, "Image source again"], 

 /*Saturday*/      [6, 19, 21, "Image source again"]      /* <- No comma after last element */ 
 
 
 offAirPic : "www.urlhere.com",  /*The off air graphic (don't change this, as it wont appear anyway, but it could mess up the script if you delete it)*/ 
 
 lastHour : -1, day:0, hour:0, d:0, 
 
 showPic : function(str) 
 { 
 if( this.lastHour !=  (this.hour=((this.d=new Date()).getHours())) ) 
 { 
 this.lastHour=this.hour; 
 this.day=this.d.getDay(); 
 for(var i=0, t=this.lineup; i<t.length && (t[i][0]!=this.day || t[i][2]<=this.hour); i++){} 
 document.images[str].src = (t[i][1]>this.hour ? this.offAirPic : this.lineup[i][3]); 
 } 
 
 setTimeout("Business.showPic('"+str+"')", 60000); 
 } 
 
 } 
 Business.showPic("on_air_now");
 </SCRIPT>[/CODE]

Before you add this in you need to make an imageplaceholder in dreamweaver or something. Name it "Business"...or something along those lines, but if you do change it you will have to change the bits were it says "Business" int eh script to whatever you called the image placeholder. Make sure the imageplaceholder is the right size for the images then clcik on it in design view, then go into the code view and paste this script directly after the highlighted code that is already selected after clicking on the image placeholder.

Hope this all makes sense.

thanks, Ryan.

@djultra890Sep 29.2012 — #ryan do you have the full code as to what you were talking about

as i am looking for the same thing as you was

@George88Sep 30.2012 — #ryan do you have the full code as to what you were talking about

as i am looking for the same thing as you was[/QUOTE]

This thread is 6 years old and has been inactive for 5 of those years.

ryani210693:

Join Date 08-09-2006

Last Activity 05-05-2009 02:22 PM

Also in #JavaScript _↴

setTimeout and the 'this' reference (finding my object)Need a good image uploader for shopping cart image

Success!

Help @ryani210693 spread the word by sharing this article on Twitter...

Tweet This

Automatic timed image changer

46 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Automatic timed image changer

46 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

46 Comments(s) _↴

Also in #JavaScript _↴