[RESOLVED] time of day picture change

**GammalGubbe** · 11-12-2011 07:01 AM

Hello! im new to JavaScript and im trying to learn by modifying existing scripts.

Im trying this one:
http://www.javascriptsource.com/time...re-change.html

I want it so that the picture changes every hour.

and ive changed the code so it looks like this:

Code:

function pixTimeChange() {
  var t=new Date();
  var h = t.getHours();
  var r1="0100.jpg";
  var r2="0200.jpg";
  var r3="0300.jpg";
  var r4="0400.jpg";
  var r5="0500.jpg";
  var r6="0600.jpg";
  var r7="0700.jpg";
  var r8="0800.jpg";
  var r9="0900.jpg";
  var r10="1000.jpg";
  var r11="1100.jpg";
  var r12="1200.jpg";
  var r13="1300.jpg";
  var r14="1400.jpg";
  var r15="1500.jpg";
  var r16="1600.jpg";
  var r17="1700.jpg";
  var r18="1800.jpg";
  var r19="1900.jpg";
  var r20="2000.jpg";
  var r21="2100.jpg";
  var r22="2200.jpg";
  var r23="2300.jpg";
  var r24="2400.jpg";
  var el=document.getElementById('myimage');

  // See the time below. Note: The time is in 24 hour format.
  // In the example here, "7" = 7 AM; "17" =5PM.
  el.src = (h>=1 && h<2) ? r1 : r2;
  el.src = (h>=2 && h<3) ? r2 : r3;
  el.src = (h>=3 && h<4) ? r3 : r4;
  el.src = (h>=4 && h<5) ? r4 : r5;
  el.src = (h>=5 && h<6) ? r5 : r6;
  el.src = (h>=6 && h<7) ? r6 : r7;
  el.src = (h>=7 && h<8) ? r7 : r8;
  el.src = (h>=8 && h<9) ? r8 : r9;
  el.src = (h>=9 && h<10) ? r9 : r10;
  el.src = (h>=10 && h<11) ? r10 : r11;
  el.src = (h>=11 && h<12) ? r11 : r12;
  el.src = (h>=12 && h<13) ? r12 : r13;
  el.src = (h>=13 && h<14) ? r13 : r14;
  el.src = (h>=14 && h<15) ? r14 : r15;
  el.src = (h>=15 && h<16) ? r15 : r16;
  el.src = (h>=16 && h<17) ? r16 : r17;
  el.src = (h>=17 && h<18) ? r17 : r18;
  el.src = (h>=18 && h<19) ? r18 : r19;
  el.src = (h>=19 && h<20) ? r19 : r20;
  el.src = (h>=20 && h<21) ? r20 : r21;
  el.src = (h>=21 && h<22) ? r21 : r22;
  el.src = (h>=22 && h<23) ? r22 : r23;
  el.src = (h>=23 && h<24) ? r23 : r24;
  el.src = (h>=24 && h<01) ? r24 : r1;
}

but it only wievs the 0100.jpg image...

what am i doing wrong?

**Logic Ali** · 11-12-2011 08:04 AM

Rename 2400.jpg to 0000.jpg, then this is all you need:

Code:

<img.src='0000.jpg' id='myimage'> <!-- Put script somewhere BELOW here -->


<script type='text/javascript'>
  
(function( elemId )
{
  var img = document.getElementById( elemId );  
      
  function f()
  {
    var hrs = new Date().getHours();   
      
    img.src = ( hrs < 10 ? '0' : '' ) + hrs + '00.jpg' ;
    
    setTimeout( f, 60000 );
  }
  
  f();
  
})( 'myimage' );

**JMRKER** · 11-12-2011 08:14 AM

In military time, there is no such value as '24:00', it become '00:00'
But you can name the image whatever you want.

Consider this shortened code...

Code:

<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=253363

var baseURL = '';  // set this to the directory where the images are located
var hourImages = [
  '2400.jpg',
  '0100.jpg','0200.jpg','0300.jpg','0400.jpg',
  '0500.jpg','0600.jpg','0700.jpg','0800.jpg',
  '0900.jpg','1000.jpg','1100.jpg','1200.jpg',
  '1300.jpg','1400.jpg','1500.jpg','1600.jpg',
  '1700.jpg','1800.jpg','1900.jpg','2000.jpg',
  '2100.jpg','2200.jpg','2300.jpg'            // Note: NO COMMA after last entry
// ,'2400.jpg' // No such military time entry, hence the moving to 1st element 
];
function pixTimeChange() {
  var t=new Date();
  var h = t.getHours();
  document.getElementById('myimage').src = baseURL+hourImages[h];
  document.getElementById('myimage').alt = hourImages[h];
}
window.onload = function() {
  pixTimeChange();
}
</script>

</head>
<body>
<img id="myimage" src="" alt="">
</body>
</html>

**GammalGubbe** · 11-12-2011 08:27 AM

oh! right! its 00:00 not 24:00...

Thanks guys! this works great now, and i understand a bit more

**JMRKER** · 11-12-2011 09:22 AM

You're most welcome, I'm sure, from both of us.
Happy to help.
Good Luck!

PS: Mark thread as resolved if you are satisfied with solutions provided.

Thread: [RESOLVED] time of day picture change

Thread Tools

Display

[RESOLVED] time of day picture change

Consider this ...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions