www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 29

Thread: Image changing based on Date in an html page

  1. #1
    Join Date
    Jan 2014
    Posts
    15

    Question Image changing based on Date in an html page

    I would like to know how to change the name of an image file and have it displayed on my web page based on a specific month and/or day, i.e. Christmas.png for December, new_year.png for after Christmas; 12-26- (mm-dd) through January and blank_space.png for the rest of the year. And possibly images for other holidays. So, can anyone help by offering suggestions and/or JavaScript code?

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,294
    First off you need to show what code you have or have attempted yourself, the request you make can be achieved in several ways and by different methods
    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?

  3. #3
    Join Date
    Jan 2014
    Posts
    15
    Actually, being new to JavaScript other than trying samples (which I don't have for something like this), I have no idea and have not attempted anything for fear of ruining my web page. I do know that it can be accomplished from codes I have seen in the distant past when I had no interest in designing complicated web pages; the late 1990s. That is why I am reaching out to the javascript community. I usually pick things up pretty quickly when I can see actual examples of things. I used to write and compile BASIC software and could understand, "IF 'THIS' THEN DO SOMETHING ELSE IF 'SOMETHING ELSE' ELSE 'MAINTAIN CURRENT' and do many nested instructions. VISUAL BASIC eludes me with its vaguely 'implied' logic. I would appreciate if you or someone would do something basic for what I need. A simple way for me to explain what I need is to list it as so: (please forgive the CAPS but they would normally help to distinguish the BASIC code)

    FILE$="BLANK_SPACE.PNG" ' THIS SETS THE FILENAME TO A STANDARD
    IF ((VAL(MID$(DATE$,1,2))=12) AND ((VAL(MID$(DATE$,4,2)) <=25)) THEN FILE$="CHRISTMAS.PNG" ' THIS CHANGES THE FILENAME TO THE CHRISTMAS THEMED IMAGE
    ELSE IF VAL(MID$(DATE$(1,2)) =1 THEN FILE$="NEW_YEAR.PNG" ' THIS CHANGES THE FILENAME TO THE NEW YEARS SALUTATION IMAGE
    END IF ' THIS CLOSES THE NESTING
    GET FILE$ ' LOADS THE APPROPRIATE FILE FOR DISPLAY (NOT GENERALLY USED IN THIS MANNER IN BASIC)
    DISPLAY THE FILE ' TO DISPLAY THE APPROPRIATE FILE FOR DISPLAY (ALSO NOT GENERALLY USED IN BASIC)

    Thank you for your quick response to my query and I hope you understand my answer (I know BASIC is long gone especially in this age of WEB and the Internet).

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,294
    Another imprtant feature of (most) forums is the code, html and php tags that are enclosed in [] brackets.

    If you are looking at BASIC, then the JavaScript version of the above code would be...

    Code:
    file = "BLANK_SPACE.PNG";  //THIS SETS THE FILENAME TO A STANDARD
    
    if ( new Date().getMonth()==12 && new Date().getDate() <=25 ){
        file = "CHRISTMAS.PNG"; // THIS CHANGES THE FILENAME TO THE CHRISTMAS THEMED IMAGE
    }else if( new Date.getMonth()==1 ){
        file="NEW_YEAR.PNG"; // THIS CHANGES THE FILENAME TO THE NEW YEARS SALUTATION IMAGE
    }
    However, all dates in JavaScript follow ISO standards and are either DD/MM/YYYY or YYYY,MM,DD formats and all months start at 0 and end at 11.

    The better option is to use a serverside to do this work of setting what image is to be used.

    PHP Code:
    $pic "blank_space.png";

    $MM=date("m");
    $DD=date("d");

    if( 
    $MM==12 and $DD<=25 ){
        
        
    $pic "christmas.png";
        
    }else if( 
    $MM==){

        
    $pic "new_year.png";

    }

    echo 
    "<img name="imageoutput" src="{$pic}" title="siteimage"> 
    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
    Jan 2014
    Posts
    15
    I am even less familiar with "serverside" stuff and really prefer to try to use the javascript codes.

    Your help has been extremely valuable and I appreciate you immensely, but am still having a little problem; calling the file.
    AND maybe need to change the variable name because it seems that Microsoft Expression 4 wants to use "file" as a part of its codes so I have replaced "file" in the code with "filepic". Also, sorry I forgot to include the 'path' for the file location which is necessary in my case -- images/

    I have also replaced the filenames with the actual filenames to make it easier on me when I try to use the code.


    <script language="JavaScript"> //Do I need THIS line?

    filepic = "image/00_Spacer.png"; //THIS SETS THE FILENAME TO A STANDARD

    if ( new Date().getMonth()==12 && new Date().getDate() <=25 ){
    filepic = "image/00_Merry_Christmas.png"; // THIS CHANGES THE FILENAME TO THE CHRISTMAS THEMED IMAGE
    }else if( new Date.getMonth()==1 ){
    filepic = "image/00_New_Year.png"; // THIS CHANGES THE FILENAME TO THE NEW YEARS SALUTATION IMAGE
    }

    </javascript> //Do I need THIS line?


    What is showing in my page where I want the file to display: (the image is small and fits permanently in this table)
    -------------------------------------------------------------
    <table id="table1" class="auto-style30" style="width: 100%">
    <tr>
    <td class="auto-style34" style="width: 30%; height: 20;" valign="top">
    <font color="#0000ff" face="Arial" size="2">
    <img height="38" src="images/00_Spacer.png" width="228" /></font></td>
    -------------------------------------------------------------

    Please, how do I get the image to display-- with What do I replace the src="images/00_Spacer.png"? AND, do I use the
    <script language="JavaScript"> and </javascript> lines? If I put src="filepic" it doesn't find the file and if I remove the quotes, it doesn't like that either.

    Again, I really thank you for your help and hope you don't get too tired of my novice questions in this matter. At 68 yrs old it makes me feel like a 2 year old.

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,294
    You didn't show me what the image object you are trying to change was so I only supplied what code I could.

    So... HTML

    HTML Code:
    <img name="targetimage" id="targetimage" src="image/00_Spacer.png" height="38" width="288" >
    When the page has loaded fully, you are able to access the <img element by using either the getElementsByTagName or getElementsById methods of document, see one below.

    Code:
    imagetarget = document.getElementById("targetimage");
    imagetarget.src = "image/whatever_you_are_changeing_image_to.ext";
    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?

  7. #7
    Join Date
    Jan 2014
    Posts
    15
    Okay, thank you for your input and please do not get upset when I re-phrase my question to accomplish my goal. What you suggested in the code SHOULD work for the first part and makes sense to me completely. I like what I see in your code. But, without a way to actually display the corrected variable "filepic" it doesn't function for me. I was a fourth grade teacher and am probably trying to over simplify what I need so I will put in what I have deduced from our correspondence and then at the end, will ask the question that needs answering now.

    <script language="JavaScript">

    filepic = "image/00_Spacer.png";

    if ( new Date().getMonth()==12 && new Date().getDate() <=25 ){

    filepic = "image/00_Merry_Christmas.png";

    }else if( new Date.getMonth()==1 ){

    filepic = "image/00_New_Year.png";
    }
    </javascript>

    imagetarget = document.getElementById("targetimage");
    imagetarget.src = "filepic";

    <img name="targetimage" id="targetimage" src="filepic" height="38" width="288" >

    I am still unsure of where in the code to place the above but if it functioned, I could probably figure where it should go.

    If the above is correct, it still does not function. If it is not, please put it into the correct structure for me.
    I have the three .png files on the web server in the images folder.

    What I said about the "two year old" in the other post was referring to ME. I used to be a fairly intelligent BASIC programmer and solved all of my clients' problems for 20 plus years and even wrote database programs before DBase for them, but now the new programming languages are foreign to me.

    The 'filepic' is the variable that I want to use to display the image for the corresponding date(s) and I don't know HOW to call them for the screen display on the web page. I can make the files into .jpg if necessary, please advise.
    Thanks again for all your help thusfar.

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>title</title>
    <style>
    body{text-align:center;}
    </style>
    <script>
    /* here you can put as many pairs ['img','text'] as you want. the last pair IS NOT followed by "," */
    var myimgs=[
    /* indexes start from 0 */
    ['http://3.bp.blogspot.com/-MA-ID-zRFPc/UOGQAV9wqgI/AAAAAAAABV0/72ZmYouRiFM/s1600/happy+new+year.png','Happy New Year'],
    ['http://www.wpclipart.com/holiday/Christmas/Christmas_signs/merry_christmas.png','Merry Christmas'],
    ['http://www.clker.com/cliparts/b/a/7/0/12168326821517306230labor-day.svg.med.png','It\'s enough for vodka']
    ];
    
    /* shorthand for document.getElementById */
    function doc(id){return document.getElementById(id);}
    /* the function for changing images */
    function imChange(){
    var im=doc('targetimage'),
        slgn=doc('mySlogan'),
        date=new Date(),
    	month=date.getMonth(),/* starts from 0 --> 0=Jan,1=Feb...11=Dec */
    	day=date.getDate(),
    	src,text;
    switch(month){
    case 0: if(day <= 5){src=myimgs[0][0];text=myimgs[0][1];} break;/* from 1st Jan to 5th Jan */
    case 11: if(day <= 25){src=myimgs[1][0];text=myimgs[1][1];} break;/* from 1st Dec to 25th Dec*/
    default: src=myimgs[2][0];text=myimgs[2][1]; break;/* or just default:; for doing nothing */
    }
    /*
    // uncomment this for testing
    alert('month = '+month+'; day = '+day+'\n\nsrc = '+src+'; text = '+text);
    */
    if(src){im.src=src;}
    if(text){slgn.innerHTML=text;}
    }
    
    /* executes as the page is loaded */
    window.onload=imChange;
    </script>
    </head>
    <body>
    <img name="targetimage" id="targetimage" src="http://www.webdeveloper.com/forum/images/webdev-logo2.gif" />
    <h1 id="mySlogan"></h1>
    </body>
    </html>
    Last edited by Padonak; 01-16-2014 at 01:53 AM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  9. #9
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,294
    If you are only having 2 images and 3 slogans, then you can just code your function like so.

    Code:
    function setImage(){
    var dor = new Date();
    var dd = dor.getDate();
    var mm = dor.getMonth()+1;
    var christmasday = ( (dd==25) && (mm==12) ) && true;
    var newyear = ((dd==1) && (mm=1)) && true;
    var slug = (christmasay ? "Merry Christmas" : (newyear ? "Happy New Year" : "Good Day" );
    var pic = christmasday ? "merry_christmas.png" : (newyear ? "happy_new_year.png" : "just_another_day.png" );
    target = document.getElementById("targetimage");
    target.src = pic;
    target.title = slug;
    }
    
    window.onload = setImage;
    it then sets the image onload of the page.

    as for server-sides. it would be far simpler and more rugged code because the image will get set correctly as you have a problem with some browsers and not having javascript turned on, some browsers don't understand javascript so taking a simpler step towards a server side which is written directly in to your web page code, php renders HTML, so it is a good step to take.

    Example.
    PHP Code:
    <?php
    date_default_timezone_set
    ('Europe/London');
    $MM=date("m");
    $DD=date("d");
    $pic = ( $MM==12 and $DD<=25 ) ? "http://www.wpclipart.com/holiday/Christmas/Christmas_signs/merry_christmas.png" : ( ( $MM==and $DD==) ? "http://3.bp.blogspot.com/-MA-ID-zRFPc/UOGQAV9wqgI/AAAAAAAABV0/72ZmYouRiFM/s1600/happy+new+year.png" "http://www.clker.com/cliparts/b/a/7/0/12168326821517306230labor-day.svg.med.png" );
    $slogan = ( $MM==12 and $DD<=25 ) ? "Merry Christmas" : ( ( $MM==and $DD==) ? "Happy New Year for " date("Y") : "Just Another Day");
    ?>
    <!DOCTYPE html>
     <html>
     <head>
       <meta charset="utf-8" />
       <title>title</title>
       <style>
          body{text-align:center;}
       </style>
     </head>
     <body>
    <?php echo "<img name='imageoutput' src='{$pic}' title='siteimage'>"?>
    <?php 
    echo "<h1 id='mySlogan'>{$slogan}</h1>"?>
     </body>
    </html>
    The advantage should be immediately apparent, the difficulty is minimal.
    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?

  10. #10
    Join Date
    Jan 2014
    Posts
    15
    Thank you both for your attempts to help me but we are getting confused with what I want to accomplish. I am putting links to three samples to show that I already have the image files on my site and what I want each page to show on certain dates. Someday I may get it figured out but thank you for your efforts.
    http://www.oiccs.com/index_sample1.html
    http://www.oiccs.com/index_sample2.html
    http://www.oiccs.com/index_sample3.html

  11. #11
    Join Date
    Jan 2014
    Posts
    15
    Forgot to mention that you may look at the sources for each of those.

  12. #12
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,294
    Either of the codes supplied will do the job as requested. All you need to do is implement them.

    <img height="38" src = "images/00_Spacer.png" width="228" />

    Has NO name tag or ID tag so that you can change the image.

    <img id="targetimage" height="38" src = "images/00_Spacer.png" width="228" />

    If you ise the ID tag then you use the getElementsById method, if you use the NAME tag then you use the getElementsByTagName
    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?

  13. #13
    Join Date
    Jan 2014
    Posts
    15
    Either of the codes supplied will do the job as requested. All you need to do is implement them.

    <img height="38" src = "images/00_Spacer.png" width="228" />

    Has NO name tag or ID tag so that you can change the image.

    <img id="targetimage" height="38" src = "images/00_Spacer.png" width="228" />

    Therein lies my problem; I don't know how to implement them. The above line(s) are only calling ONE file, the images/00_spacer.png image file. From what I am seeing from any of the codes suggested (especially since your first reply) I only see the one actually called as a src. I have three, unless I decide to add other holidays and during the appropriate period, can only see where ONE will be called. The line directly above the "Therein" functions only for the one src="images/00_Spacer.png". How can different files be called when only one "src" is called.

    In other words, I have tried all the suggestions but none of them functioned. My host server does NOT offer .php where I can utilize it, and therefore that is not an option.

    I have provided the three filenames and unless I can see an actually functioning code applying to those filenames, I have no alternative but to physically changing the filenames during the periods and re-publishing. Unless I can find a book that gives actual functioning samples that I can try, and to relate to 'from start to finish'.

    Thank you for your assistance and trying to help. It appears that until I can understand the newer tech languages (which will probably not happen) I will have to do with what I have. Again thank you for your efforts.

  14. #14
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,294
    Ok, simpler...

    Where you see this

    HTML Code:
    <img height="38" src = "images/00_Spacer.png" width="228" />
    change it to this

    HTML Code:
    <img id="targetimage" height="38" src = "images/00_Spacer.png" width="228" />
    When you have done that...

    Where you see
    HTML Code:
    <script type="text/javascript">
    <!--
    after the
    HTML Code:
    <!--
    add a few new lines (blanks) and copy and paste one of the javascript codes that takes your fancy.

    Now, the really simple part... Change the name of the ID reference in the
    Code:
    <img id="targetimage" height="38" src = "images/00_Spacer.png" width="228" />
    part of the web page ... OR ... the reference to it in the document.getElementsById("targetimage"); so that they match.

    Job done, any issues are likely to bey typos, recheck the code.

    now what happens...

    Whoever is viewing your page will get the 00_Spacer.png image served to them between 2nd Jan of any given year through to 30th Nov of that same given year, then for 25 days (inc Xmas day) the Merry Christmas image is displayed before it returns to the 00_Spacer.png image between 26th Dec of given year to 31st of that same month & year and the following year on new years day, between midnight to midnight your happy new year image shows.

    All that relies on the users computer having the correct operating system time set, which is really a useful thing to have as a user but occasionally you get the random user for whatever reason has a wrong time like instead of today's date and time is operating 6 or 7 months behind, go figure, but hopefully that sorts your issue out.
    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?

  15. #15
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,294
    Having had another sniff around, I can see that you have this code
    Code:
    <script language="JavaScript">
    //CN Insert Greeting Ver 1.0.2 - CEA CrystalNet
    CN_Now = new Date();
    localtime = CN_Now.toString();
    CN_Hours = CN_Now.getHours();
    if (CN_Hours < 12) {
    	document.write("Good Morning");
    } else {
    	if (CN_Hours >= 12 && CN_Hours < 17)  {
    			document.write("Good Afternoon");
    	} else {
    		if (CN_Hours >= 17) {
    			document.write("Good Evening");
    			} else {
      			document.write("Good Day");
    		}
    	}
    }
    </script>
    What you can do is modify this code so that you get the date and month in addition to the time of day and then use that to change the image you want changing.

    so after
    Code:
    	document.write("Good Day");
    		}
    	}
    }
    </script>
    add the following JSON code
    Code:
     setImage = {
        mm:CN_Now.getMonth()+1,
        dd:CN_Now.getDate(),
        christmasday:( ( (this.dd==25) && (this.mm==12) ) && true),
        newyear:(((this.dd==1) && (this.mm=1)) && true),
        pic:(this.christmasday ? "merry_christmas.png" : (this.newyear ? "happy_new_year.png" : false ) ),
        changeIt:function(){
            target = document.getElementById("targetimage");
    		if(this.pic) target.src = "images/" + this.pic;
        },
        auto:setTimeout("setImage.changeIt()",2000)
    }
    What that does is uses a JSON object method of JavaScript, without needint a window.onload event to controll it, the routine fires after 2 seconds and determines if the image needs changing, it uses an existing time object created by your existing function to grab the local time.

    all you need to do is change the names of the images that get changed OR you could rename the images on the server through your control panel or FTP client to match those in the script, whichever you find easier.
    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