Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Location
    American living in UAE
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Change image monthly

    I see the day of the week image displayer code (below):

    I no nothing about writing javascript, but would like to change this to display a different picture each month.

    Thanks in advance if any one can help.


    <script>
    <!--
    <!--Week Of The Day Image Displayer script- By JavaScript Kit (www.javascriptkit.com) More free scripts here-->
    var mondayimg=&quot;../m1.gif&quot;
    var tuesdayimg=&quot;../m2.gif&quot;
    var wednesdayimg=&quot;../m3.gif&quot;
    var thursdayimg=&quot;../m4.gif&quot;
    var fridayimg=&quot;../m5.gif&quot;
    var saturdayimg=&quot;../m6.gif&quot;
    var sundayimg=&quot;../m7.gif&quot;
    var mydate=new Date()
    var today=mydate.getDay()
    if (today==1)
    document.write('&lt;img src=&quot;'+mondayimg+'&quot;&gt;')
    else if (today==2)
    document.write('&lt;img src=&quot;'+tuesdayimg+'&quot;&gt;')
    else if (today==3)
    document.write('&lt;img src=&quot;'+wednesdayimg+'&quot;&gt;')
    else if (today==4)
    document.write('&lt;img src=&quot;'+thursdayimg+'&quot;&gt;')
    else if (today==5)
    document.write('&lt;img src=&quot;'+fridayimg+'&quot;&gt;')
    else if (today==6)
    document.write('&lt;img src=&quot;'+saturdayimg+'&quot;&gt;')
    else
    document.write('&lt;img src=&quot;'+sundayimg+'&quot;&gt;')
    //--&gt;
    &lt;/script&gt;

    &lt;p align=&quot;center&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;-2&quot;&gt;This free script provided by&lt;/font&gt;&lt;br&gt;
    &lt;font face=&quot;arial, helvetica&quot; size=&quot;-2&quot;&gt;&lt;a href=&quot;http://javascriptkit.com&quot;&gt;JavaScript
    Kit&lt;/a&gt;&lt;/font&gt;&lt;/p&gt;</textarea></p>
    </form>

    <p align="left"><font size="5"><small><small>Many large sites on the internet use similar
    scripts to display an image that spells out the current day of the week, ie <a
    href="http://www.cnet.com">Cnet</a>.</small></small></font></p>

    <hr width="90%" size="1">

    <p align="left"><script type="text/javascript"><!--
    google_ad_client = "pub-3356683755662088";
    google_alternate_color = "FFFFFF";
    google_ad_width = 468;
    google_ad_height = 60;
    google_ad_format = "468x60_as";
    google_ad_type = "text_image";
    google_ad_channel ="";
    google_color_border = "FFFFFF";
    google_color_bg = "FFFFFF";
    google_color_link = "000099";
    google_color_url = "999999";
    google_color_text = "000033";
    //--></script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script></p>

    <p align="center"><script type="text/javascript" src="http://www.javascriptkit.com/ssireplace.js"></script>

    <p align="center"><font face="Arial" size="1">
    Copyright © 1997-2007 <a href="http://www.javascriptkit.com">JavaScript Kit</a>.
    NO PART may be reproduced without author's permission.</font></p>

    <style>
    .footad a{
    text-decoration: none;
    }
    .sponsors{
    line-height: 14px;
    font: normal 12px Arial;
    }

    </style>

    <div align="center" class="footad" style="font-size: 85%"> <a href="http://www.dynamicdrive.com/style/" target="offsite">CSS Library</a>
    |
    <a href="http://www.dynamicdrive.com/dynamicindex1/" target="offsite">JavaScript & DHTML Menus</a>
    |
    <a target="offsite" href="http://www.hostsearch.com/low_cost_web_hosting.asp">
    Cheap Web Hosting</a> | -<a target="offsite" href="http://www.sharewareconnection.com">Software
    Connection</a> | <a target="offsite" href="http://www.filehungry.com">
    Software Library</a><br>
    <a target="offsite" href="http://www.thescripts.com/">Web Development</a>
    | <a target="offsite" href="http://www.bluedogink.com/">Cheap Printer Ink</a>
    | <a target="offsite" href="http://www.daniweb.com/forums/forum117.html">JavaScript Community</a>
    | <a target="offsite" href="http://www.eukhost.com">Web hosting</a></div></p>
    </body>
    </html>
    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

  • #2
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    When copying the original code, you seem to have saved it as entities rather than the original code. I suspect that you pasted it into the design view of your html editor.

    The first section should look like this:
    Code:
    <script>
    <!--
    <!--Week Of The Day Image Displayer script- By JavaScript Kit (www.javascriptkit.com) More free scripts here-->
    var mondayimg="../m1.gif"
    var tuesdayimg="../m2.gif"
    var wednesdayimg="../m3.gif"
    var thursdayimg="../m4.gif"
    var fridayimg="../m5.gif"
    var saturdayimg="../m6.gif"
    var sundayimg="../m7.gif"
    var mydate=new Date()
    var today=mydate.getDay()
    if (today==1)
    document.write('<img src="'+mondayimg+'">')
    else if (today==2)
    document.write('<img src="'+tuesdayimg+'">')
    else if (today==3)
    document.write('<img src="'+wednesdayimg+'">')
    else if (today==4)
    document.write('<img src="'+thursdayimg+'">')
    else if (today==5)
    document.write('<img src="'+fridayimg+'">')
    else if (today==6)
    document.write('<img src="'+saturdayimg+'">')
    else
    document.write('<img src="'+sundayimg+'">')
    //-->
    </script>
    
    <p align="center"><font face="arial" size="-2">This free script provided by</font><br>
    <font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
    Kit</a></font></p></textarea></p>
    </form>
    Now in the definitions of the images, change each occurrence of a day-image to a corresponding month-image. Thus
    Code:
    var mondayimg="../m1.gif"
    becomes
    Code:
    var januaryimg="../m1.gif"
    etc.

    Change the
    Code:
    var today=mydate.getDay()
    call to
    Code:
    var thisMonth=mydate.getMonth()
    And the code:
    Code:
    if (today==1)
    document.write('<img src="'+mondayimg+'">')
    else if (today==2)
    document.write('<img src="'+tuesdayimg+'">')
    would become
    Code:
    if (thisMonth==1)
    document.write('<img src=&quot;'+februaryimg+'&quot;&gt;')
    else if (thisMonth==2)
    document.write('&lt;img src="'+marchimg+'">')
    But remember that the value of thisMonth will range between 0 and 11, so the last lines will be:
    Code:
    else
    document.write('<img src="'+januaryimg+'">')
    John

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    If you name the monthly files month1.jpg through to month12.jpg*, you can do away with the need to repeatedly if check the month and call the appropriate file more directly.

    * naming them month1.jpg to month12.jpg also makes them easier to 'read' as orderly months, compared to starting at 0. (It also helps keep the files gathered together in the images folder [when sorted by name].) It's a simple thing to add 1 to the getMonth value to calibrate it for the correct file.


    e.g.
    Code:
    var mydate = new Date()
    var thisMonth = mydate.getMonth();
    document.write('<img src="month'+(thisMonth+1)+'.jpg" alt="something" />');
    However, not being a fan of document.write, I'd recommend using a more 'unobtrusive' approach. Add a default image directly in the markup and then use js/Dom to swap that for a month-specific one.

    (rough) e.g.
    Code:
    <script type="text/javascript">
    
    window.onload = function() {
    
    	var monthImg = document.getElementById('monthimage');
    	var mydate = new Date()
    	var thisMonth = mydate.getMonth();
    
    	monthImg.src = '/images/month' + (thisMonth+1) +'.jpg';
    
    }
    
    </script>
    
    ...
    
    <img src="/images/monthdefault.jpg" alt="Something useful." id="monthimage" />

    Fwiw, another option, still avoiding the if statements, would be...
    (files names january.jpg, february.jpg, march.jpg, etc...)

    Code:
    <script type="text/javascript">
    
    window.onload = function() {
    
    	var months = ['january','february','march','april',...,'december'];
    
    	var monthImg = document.getElementById('monthimage');
    	var mydate = new Date()
    	var thisMonth = mydate.getMonth();
    
    	monthImg.src = '/images/' + months[thisMonth] + '.jpg';
    
    }
    
    </script>
    
    ...
    
    <img src="/images/monthdefault.jpg" alt="Something useful." id="monthimage" />
    Last edited by Bill Posters; 12-31-2007 at 05:18 PM.

  • Users who have thanked Bill Posters for this post:

    talibiddeenjr (01-08-2008)

  • #4
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    Bill Posters is quite right, if I were writing this from scratch, I would do it a quite different way. However, since talibiddeenjr is a new coder, I thought it simpler to just make a modification of what he/she already had.

    John

  • Users who have thanked Actinia for this post:

    talibiddeenjr (01-08-2008)

  • #5
    New to the CF scene
    Join Date
    Dec 2007
    Location
    American living in UAE
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by JohnRostron View Post
    Bill Posters is quite right, if I were writing this from scratch, I would do it a quite different way. However, since talibiddeenjr is a new coder, I thought it simpler to just make a modification of what he/she already had.

    John
    Thank you John for your prompt response. I am just now getting around to tinkering with it. Your suggestions worked!

    Here's is the final code I came up with (with your help) in case anyone might want to use it:

    <script>

    var januaryimg="m1.jpg"
    var februaryimg="m2.jpg"
    var marchimg="m3.jpg"
    var aprilimg="m4.jpg"
    var mayimg="m5.jpg"
    var juneimg="m6.jpg"
    var julyimg="m7.jpg"
    var augustimg="m8.jpg"
    var septemberimg="m9.jpg"
    var octoberimg="m10.jpg"
    var novemberimg="m11.jpg"
    var decemberimg="m12.jpg"


    var mydate=new Date()
    var thisMonth=mydate.getMonth()



    if (thisMonth==1)
    document.write('<img src="'+februaryimg+'">')
    else if (thisMonth==2)
    document.write('<img src="'+marchimg+'">')
    else if (thisMonth==3)
    document.write('<img src="'+aprilimg+'">')
    else if (thisMonth==4)
    document.write('<img src="'+mayimg+'">')
    else if (thisMonth==5)
    document.write('<img src="'+juneimg+'">')
    else if (thisMonth==6)
    document.write('<img src="'+julyimg+'">')
    else if (thisMonth==7)
    document.write('<img src="'+augustimg+'">')
    else if (thisMonth==8)
    document.write('<img src="'+septemberimg+'">')
    else if (thisMonth==9)
    document.write('<img src="'+octoberimg+'">')
    else if (thisMonth==10)
    document.write('<img src="'+novemberimg+'">')
    else if (thisMonth==11)
    document.write('<img src="'+decemberimg+'">')
    else
    document.write('<img src="'+januaryimg+'">')
    //-->
    </script>

  • #6
    New to the CF scene
    Join Date
    Dec 2007
    Location
    American living in UAE
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you as well. I didn't see your reply until after I had already played around John's suggestions. If I get a chance to play around with it again, I will look into these suggestions.


  •  

    Posting Permissions

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