www.webdeveloper.com
Results 1 to 7 of 7

Thread: Different image every day

  1. #1
    Join Date
    Jun 2014
    Posts
    2

    Different image every day

    Hi guys
    I was wondering if you could help me with this. I've been trying to use this code but...

    Code:
    <script type="text/javascript"><!--
    var imlocation = "images/";
     function ImageArray (n) {
       this.length = n;
       for (var i =1; i <= n; i++) {
         this[i] = ' '
       }
     }
    image = new ImageArray(7);
    image[0] = 'sunday.gif';
    image[1] = 'monday.gif';
    image[2] = 'tuesday.gif';
    image[3] = 'wednesday.gif';
    image[4] = 'thursday.gif';
    image[5] = 'friday.gif';
    image[6] = 'saturday.gif';
    var currentdate = new Date();
    var imagenumber = currentdate.getDay();
    document.write('<img src="' + imlocation + image[imagenumber] + '">');
    //--></script>
    ... this seems to be working only with those seven days exactly. I need an array of four picture that would change after four days, not seven pictures-seven days. I tried this

    image = new ImageArray(4);
    image[0] = '01.gif';
    image[1] = '02.gif';
    image[2] = '03.gif';
    image[3] = '04.gif';
    but just making it short doesn't do it. Please, help me, I'm not good with this stuff and I would really appreciate any hint.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,680
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <img id="img" src="#" />
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var Images=[
     'http://www.vicsjavascripts.org/StdImages/1.gif',
     'http://www.vicsjavascripts.org/StdImages/2.gif',
     'http://www.vicsjavascripts.org/StdImages/3.gif',
     'http://www.vicsjavascripts.org/StdImages/4.gif'
    ];
    
    document.getElementById('img').src=Images[Math.floor(new Date()/1000/60/60/24)%Images.length];
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jun 2014
    Posts
    2
    Works like a charm, thank you very much!

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Also, do you have access to PHP?

    If you do then you could do the image selection serverside with a method like...

    In the head of the HTML page
    PHP Code:
    <?php
    $img 
    = array(0=>"Sunday.gif",1=>"Monday.gif",2=>"",3=>"Wednesday.gif",4=>"Thursday.gif",5=>"Friday.gif",6=>"Saturday.gif");
    $dayOfWeek Date("w"); // 0=sunday

    $theImage $img$dayOfWeek ];

    ?>
    then in the body where you want the DOW image
    HTML Code:
    <img name="DayOfWeek" src="./image/path/to/folder/<?php echo $theImage; ?>"  />
    *not tested and not guaranteed to work but the principle is to gather the DOW, assuming that the web host's server has the correct time / date.

    Anyway, thats the idea floated if you want to do the same server-side as opposed to client-side, both have advantages and disadvantages, one already discussed and also another is if the server and client are in different timezones or the clients clock is not set correctly, yes, some people can't be bothered to have the right time on their computers, go figure!!

    So if someone wants to add to that, point out any errors, be my guest.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  5. #5
    Join Date
    May 2014
    Posts
    909
    I agree that I'd handle it server-side instead of client-side in JS. I'd also code it so that the number of images can be variable instead of fixed; and base it on the actual *nix timestamp instead of day of week.

    Code:
    <?php 
    
    $images = [
    	'first.png',
    	'second.png',
    	'third.png',
    	'fouth.png'
    ];
    
    echo '
    	<img src="', $images[(time() / 86400) % count($images)], '" alt="daily image" />';
    
    ?>
    Far, FAR simpler.
    Java is to JavaScript as Ham is to Hamburger.

  6. #6
    Join Date
    May 2014
    Posts
    909
    Oh, and in JavaScript that would go like this:
    Code:
    var
    	images = [
    		'first.png',
    		'second.png',
    		'third.png',
    		'fourth.png'
    	],
    	d = new Date();
    	
    document.getElementById('img').src = images[
    	(d.getTime() / 86400000) % images.length
    ];
    You can change the number of images until blue in the face. Which is what vwPhillips was trying to do, but got a bit complicated on IMHO. (much less dividing Date() shouldn't work?)
    Java is to JavaScript as Ham is to Hamburger.

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Sweet.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles