www.webdeveloper.com
Results 1 to 9 of 9

Thread: How to display a specific image for each day of the month?

  1. #1
    Join Date
    Aug 2011
    Posts
    5

    How to display a specific image for each day of the month?

    Hi.

    I'm new to Javascript. Trying to figure out how to show a specific image for each day of the month.

    I think I need an array like this:

    var dailypic=new Array()

    dailypic[1]='http://www.mypic1.jpg'
    dailypic[2]='http://www.mypic2.jpg'
    dailypic[3]='http://www.mypic3.jpg'

    etc..... to mypic31.jpg

    Am I thinking along the right lines?

    Also, how would I display the correct days image?

    The code I am using to determine the date is:

    var mydate=new Date()
    var year=mydate.getYear()
    if (year < 1000)
    year+=1900
    var day=mydate.getDay()
    var month=mydate.getMonth()+1
    if (month<10)
    month="0"+month
    var daym=mydate.getDate()


    Any help would be much appreciated. Thanks in advance.

  2. #2
    Join Date
    May 2011
    Posts
    194

    try that

    Hi,

    ---------------------------------------------------------------

    // data of images

    var dailypic=new Array // 31 days of month max
    (
    'http://www.mypic1.jpg',
    ...

    'http://www.mypic31.jpg'
    );


    var dailypic_width=new Array // 31 days of month max
    (
    10, // pixel of 'http://www.mypic1.jpg',
    ...

    10 // 'http://www.mypic31.jpg'
    );


    var dailypic_height=new Array // 31 days of month max
    (
    20, // pixel of 'http://www.mypic1.jpg',
    ...

    20 'http://www.mypic31.jpg'
    );

    var arDayOfMonth=new Array
    (
    30, // Jan
    ...

    31 // Dez
    )

    var CounterOfDays=0;

    ----------------------------------------------------------------

    // create buffered images

    var arBufferedImages=new Array();

    for(CounterOfDays=0;CounterOfDays<31,CounterOfDays++)
    {
    arBufferedImages[CounterOfDays]=new Image(dailypic_width[CounterOfDays],dailypic_height[CounterOfDays]);
    arBufferedImages[CounterOfDays].src=dailypic[CounterOfDays];
    }


    --------------------------------------------------------------

    // set src of html object IMG in use of buffered images

    <IMG ID="id_Day0"><BR>
    <IMG ID="id_Day1"><BR> ...

    // set .src of IMG

    if(arBufferedImages[0]!=null){document.getElementById("id_Day0").src=arBufferedImages[0].src;}


    ---------------------------------------------------------------

    create html object IMG dynamically

    var TestPointer;
    var arDynamicHtmlIMG=new Array();

    for(CounterOfDays=0;CounterOfDays<31,CounterOfDays++)
    {

    TestPointer=document.createElement("IMG");
    if(TestPointer!=null)
    {
    arDynamicHtmlIMG[CounterOfDays]=documment.body.appendChild(TestPointer)

    // if you want you can use a DIV

    // <BODY> .... <DIV ID="ContainerDIV"></DIV> ... </BODY>

    // var DIVPointer=document.getElementById("ContainerDIV");

    // arDynamicHtmlIMG[CounterOfDay]=DIVPointer.appendChild(TestPointer)

    if(arDynamicHtmlIMG[CounterOfDays]!=null)
    {

    arDynamicHtmlIMG[CounterOfDays].width=arBufferedImages[CounterOfDays].width;
    arDynamicHtmlIMG[CounterOfDays].height=arBufferedImages[CounterOfDays].height;

    // arDynamicHtmlIMG[CounterOfDays].src=arBufferedImages[CounterOfDays].src;
    // this renders images visible !!!!!

    }
    }
    }

    // f.e. Jan

    for(CounterOfDays=0;CounterOfDays<CounterOfDays<arDayOfMonth[0],CounterOfDays++)


    ------------------------------------------------------

    // set src of dynamic html object IMG in use of buffered images

    // set .src of IMG 0

    if(arBufferedImages[0]!=null)
    {
    if(arDynamicHtmlIMG[0])
    {arDynamicHtmlIMG[0].src=arBufferedImages[0].src;} // renders visible
    }

    // set .src of IMG 1

    if(arBufferedImages[1]!=null)
    {
    if(arDynamicHtmlIMG[1])
    {arDynamicHtmlIMG[1].src=arBufferedImages[1].src;}
    }

  3. #3
    Join Date
    Aug 2011
    Posts
    5
    Thanks Try that.

  4. #4
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    If your daily images are named "mypic" + a number from 1 to 31 + ".jpg" all you really need do is:
    Code:
    <script type="text/javascript">
    window.onload = function () {
        document.getElementById('dailyPic').src = 'mypic'+ new Date().getDate() +'.jpg';
    };
    </script>
    .....
    <img src="blank.jpg" alt="pic" id="dailyPic">
    Or, better yet, do yourself a favor and learn php a bit, then just do this instead:
    PHP Code:
    <img src="mypic<?php echo date('j');?>.jpg" alt="pic">

  5. #5
    Join Date
    Aug 2011
    Posts
    5
    Thanks astupidname.

    I have to use Javascript for this but your php alternative is appreciated.

  6. #6
    Join Date
    Aug 2011
    Posts
    5
    Quote Originally Posted by astupidname View Post
    If your daily images are named "mypic" + a number from 1 to 31 + ".jpg"
    Hi again.

    How does your solution work with:

    var dailypic=new Array()

    dailypic[1]='http://www.mypic1.jpg'
    dailypic[2]='http://www.mypic2.jpg'
    dailypic[3]='http://www.mypic3.jpg'

    etc..... to mypic31.jpg


    Thanks.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,441

    Lightbulb

    Quote Originally Posted by New2this View Post
    Hi again.

    How does your solution work with:

    var dailypic=new Array()

    dailypic[1]='http://www.mypic1.jpg'
    dailypic[2]='http://www.mypic2.jpg'
    dailypic[3]='http://www.mypic3.jpg'

    etc..... to mypic31.jpg


    Thanks.
    You don't really need the array 'dailypic' if you use 'astupidname's JS post.
    It creates and displays the images directly if in the same directory as script.

    However, if you are determined to use the 'dailypic' array, then ...
    Code:
    <script type="text/javascript">
    window.onload = function () {
        document.getElementById('dailyPic').src = dailypic[new Date().getDate()];
    };
    </script>
    .....
    <img src="blank.jpg" alt="pic" id="dailyPic">

  8. #8
    Join Date
    Aug 2011
    Posts
    5

    Question

    Quote Originally Posted by JMRKER View Post
    You don't really need the array 'dailypic' if you use 'astupidname's JS post.
    It creates and displays the images directly if in the same directory as script.

    However, if you are determined to use the 'dailypic' array, then ...
    Code:
    <script type="text/javascript">
    window.onload = function () {
        document.getElementById('dailyPic').src = dailypic[new Date().getDate()];
    };
    </script>
    .....
    <img src="blank.jpg" alt="pic" id="dailyPic">
    Thanks JMRKER

    Using code as you suggested but not getting any pics. The blank.jpg is not being replaced by the daily pics.

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,441
    What does your 'dailypic' array look like? Sample of 3-5 entries.

    I don't have your array contents, so this is just an example using my own images.
    Code:
    <html>
    <head>
    <title>Daily Image</title>
    <script type="text/javascript">
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var dailypic = ['',
        '11.jpg','12.jpg','13.jpg','14.jpg','15.jpg',
        '21.jpg','22.jpg','23.jpg','24.jpg','25.jpg',
        '31.jpg','32.jpg','33.jpg','34.jpg','35.jpg',
        '41.jpg','42.jpg','43.jpg','44.jpg','45.jpg',
        '51.jpg','52.jpg','53.jpg','54.jpg','55.jpg',
        '11.jpg','22.jpg','33.jpg','44.jpg','55.jpg',
        '21.jpg'
    ];
    window.onload = function () {
        var now = new Date();
        var d = now.getDate();
        document.getElementById('dailyPic').src = baseURL+dailypic[d];
    //    document.getElementById('dailyPic').title = d;  // test
    };
    </script>
    </head>
    <body>
    <img src="" alt="pic" title="" id="dailyPic">
    </body>
    </html>
    Last edited by JMRKER; 08-06-2011 at 12:12 PM. Reason: Added sample code.

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