www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 29 of 29

Thread: Image changing based on Date in an html page

  1. #16
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,402
    You will still have to modify the <img height="38" src = "images/00_Spacer.png" width="228" /> so that you have an id tag in it to <img id="targetimage" height="38" src = "images/00_Spacer.png" width="228" />
    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?

  2. #17
    Join Date
    Jan 2014
    Posts
    15
    Thank you, I will try the above. Below is the message that I wrote with notepad to send BEFORE I saw the above.

    It is obvious from your last post that you still wish to help me and I thank you again. Here is what I have but unfortunately it still doesn't function (Yes, I do change the date on my computer to check it for the 00_Merry_Christmas.ping and the current date for the 00_Happy_New_Year.png. The only one that shows is the blank one which is the 00_Spacer.png. Please, what do you see wrong? and/or please correct it for me.


    This is positioned where I want the image to be located:--------------------------------------

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



    This is positioned at the end of the </body>---------------------------------------------------
    <!-- Start Date Check and image file name change accordingly -->
    <script type="text/javascript">

    targetimage = "image/00_Spacer.png";
    if ( new Date().getMonth()==11 && new Date().getDate() <=25 ){
    targetimage = "image/00_Merry_Christmas.png";
    }else if( new Date.getMonth()==1 ){
    targetimage = "image/00_New_Year.png";
    }

    <img id="targetimage" height="38" src="images/00_Spacer.png" width="228" />
    document.getElementsById("*targetimage*");

    </script>
    <!-- End Date Check and image file name change accordingly -->

  3. #18
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,402
    1. Don't change anything in the <img tag, thats now fine.

    2. in your page code find this :-

    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>
    and then change it to
    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");
    		}
    	}
    }
    
     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)
    }
    
    </script>
    The bits in red need changing to the names of the images you are using, the name only, not the URL path, just the name, so don't go putting the images/blah.jpg in, just the blah.jpg part of the file name only.

    See how that goes.

    some information on the logic.

    Code:
    setImage = {
        mm:CN_Now.getMonth()+1, // gets the month 0 to 11 and adds 1 to it
        dd:CN_Now.getDate(), // gets the day today 1 to nth day
        christmasday:( ( (this.dd<=25) && (this.mm==12) ) && true), // is a logic test to return a boolean value, which is tests if today is <=25 and is month 12, and tested agains true, it will return false otherwise. 
        newyear:(((this.dd==1) && (this.mm=1)) && true), // similar process as the above test.
        pic:(this.christmasday ? "merry_christmas.png" : (this.newyear ? "happy_new_year.png" : false ) ), // a ternary conditional test, this is a test ? true : false test for a value to be set for the picture. it will return false or a string 
        changeIt:function(){
            target = document.getElementById("targetimage"); // this grabs the object by its ID target
    		if(this.pic) target.src = "images/" + this.pic; // tests if the variable is set, it it is, it then changes it.
        },
        auto:setTimeout("setImage.changeIt()",2000) // an event timer that automatically calls the above function 2 seconds after the code is encountered.
    }
    When I tested this in my browser, I used a picture to check that the function was running and that the christmasday and newyear parts were returning boolean values, they were.

    So this should work for you. if it is not, I will need more information than a comment its not working or it doesn't work!
    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?

  4. #19
    Join Date
    Jan 2014
    Posts
    15
    Line 273 contains the call to the spacer.png OR merry_christmas.png OR happy_new_year.png -- I cannot see where the id "targetimage" is getting changed to the correct filename. I have changed the date on my computer to three different dates; the current date, December 24, 2013, December 25, 2013, and January 1, 2014 but the image has not changed from the spacer.png. I put a border around the image so you can see where it is supposed to display. The only one that is displaying is the spacer.png. Yes, I have cleared out my caches and history and tried the refresh on each occasion.

    Could it be that the line 273 is not contained in the <script> code?

    Again I thank you for your dilligence and patience and help. The current page that I have been working on is http://www.oiccs.com/index.html

    And the lines that contain the code you provided are 204 - 236

    I hope that this is enough detail as I know what you mean by "needing more information other than 'doesn't work'". I used to go through that with my clients and I fell into the same trap and am sorry that I did it to you.

    I also changed the actual filenames to accomodate your code but DID leave them in the images/ directory. The reason that I used "00_" as a prefix was to keep them together but that is irrelevant.

  5. #20
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,402
    Can you post the code you are using, if nothing is changing, you have either omitted something you should include or not implemented something properly, an error at line 273 means nothing to me because I don't have your code.
    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?

  6. #21
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,402
    Having looked, did you rename the images? if not, you need to alter the names of the images in the script to match those that you are using on the server in the /images/ folder.
    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. #22
    Join Date
    Jan 2014
    Posts
    15
    Yes, I did rename the images in the /images/ folder. I even made them all lower case to match the code.

    And I see from this post that you looked, but I will repost what I typed into my notepad.

    Sorry, I thought that you would 'view' the source from the web page. If you want the complete page, I will post it, but if you only want the code pertaining to what we are doing, here it is copied directly from the page:

    Lines 204-236

    <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");
    }
    }
    }

    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),
    picthis.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)
    }

    </script>



    Lines 270-275

    <tr>
    <td class="auto-style34" style="width: 30%; height: 20;" valign="top">
    <font color="#0000ff" face="Arial" size="2">
    <img id="targetimage" height="38" src="images/spacer.png" width="228" class="auto-style42" />
    </font></td>
    </tr>

    I even tried it on a page by itself and got the same results. http://www.oiccs.com/testchristmas.html

  8. #23
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,402
    A minor tweak
    Code:
    setImage = {
        mm:CN_Now.getMonth()+1,
        dd:CN_Now.getDate(),
        changeIt:function(){
    		christmasday = ( this.dd<=25 && this.mm==12 ) ? "merry_christmas.png" : false; 	
    		newyear = ( this.dd==1 && this.mm==1 ) ? "happy_new_year.png" : false;
    		pic = (christmasday  || newyear);
            if(pic){
    			target = document.getElementById("targetimage");
    			target.src = "images/" + pic;
    			}
        },
        auto:setTimeout("setImage.changeIt()",2000)
    }
    replace the old setImage with this version, you should find it now works perfectly.

    img1.jpg
    img2.jpg

    I moved and changed the logic so its inside the changeIt function
    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?

  9. #24
    Join Date
    Jan 2014
    Posts
    15
    Thank you, thank you, thank you. It works perfectly. Am saving the codes, etc. to see if I can find exactly what you did in the tweak. The only thing it is missing is the happy new year for December 26 through December 31. If you would like to tweak that one in, it will make it easier for me to figure out other holidays, but if not, I will work on it. AGAIN, thank you for helping me. If you would like for me to give you credit for the code, go to my home page and see my email and send me the notation to put on my page.

    All the Best,
    George

  10. #25
    Join Date
    Jan 2014
    Posts
    15
    Got the New Year's dates fixed and added the Valentine's Day. I cannot thank you enough for your assistance. If you look at the code that I put in, you will see that what I said toward the beginning may be true; I do pick up things rather quickly when I see results.
    *******
    setImage = {
    mm:CN_Now.getMonth()+1,
    dd:CN_Now.getDate(),
    changeIt:function(){
    christmasday = ( this.dd<=25 && this.mm==12 ) ? "merry_christmas.png" : false;
    newyear = ( this.dd==1 && this.mm==1 ) ? "happy_new_year.png" : false;
    newyear2 = ( this.dd>=26 && this.mm==12 ) ? "happy_new_year.png" : false;
    valentine = (this.dd==14 && this.mm==2 ) ? "valentines.png" : false;
    pic = (christmasday || newyear || newyear2 || valentine);

    if(pic){
    target = document.getElementById("targetimage");
    target.src = "holiday_images/" + pic;
    }
    },
    auto:setTimeout("setImage.changeIt()",2000)
    *******

  11. #26
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,402
    Yep, your getting it

    When you have several holidays, you can chose another method of evaluating more than one date. When you are done then it would make a good project to work out how to write another routine that evaluates different date ranges.
    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?

  12. #27
    Join Date
    Jan 2014
    Posts
    15
    Thank you. After putting in those different holidays, spring, summer, fall and winter, (still working on getting Dec 21 to display "winter.png" instead of merry_christmas.png but decided to relax this evening) it is amazing how close to the BASIC's AND/OR returning the true/false; just using different symbols, for example == in place of the single = and the && to replace the single + and or &, it can be quite simple BUT the placements still elude me but our project has even helped me with placements also. I cannot wait until I figure out other things to add to the site such as certain web pages in place of other links when needed.

    Again, thank you for sticking it out with me. There was a point when I was starting to feel pretty inadequate (something I hadn't felt in over 50 years). H&R Block was one of my clients and I had even helped their main corporate office solve a software problem (my not knowing their code) but simple deduction as to what was happening back in the old DOS days. They even offered me a job which I refused. I used to be the "go to" guy here. I even wrote a BBS software on a TRS Model 4 that put out MS-DOS screens to the caller along with color graphics which the Model 4 did not offer. That BBS Sofware (originally written by Bob Ackerman but transferred to my ownership after much modification) was in over 76 cities in North America including Canada and Mexico, but was short lived when the internet arrived.

    Thanks again and
    All the Best,
    George

  13. #28
    Join Date
    Jan 2014
    Posts
    15
    I won't bug you again with this topic, but I thought you would like to see what I have accomplished after your help got me started.

    code
    -----------------------------------------------------------
    <script language="JavaScript">
    //CN Insert Greeting Ver 1.0.2 - CEA CrystalNet & George Lee for SetImage Ver 1.0.0
    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");
    }
    }
    }

    setImage = {
    mm:CN_Now.getMonth()+1,
    dd:CN_Now.getDate(),
    changeIt:function(){
    christmasday = ( this.dd<21 && this.mm==12 ) ? "merry_christmas.png" : false;
    xmasday1 = ( this.dd>21 && this.dd<=25 && this.mm==12 ) ? "merry_christmas.png" : false;
    newyear = ( this.dd==1 && this.mm==1 ) ? "happy_new_year.png" : false;
    newyear2 = ( this.dd>=26 && this.mm==12 ) ? "happy_new_year.png" : false;
    valentine = (this.dd==14 && this.mm==2 ) ? "valentines.png" : false;
    stpatrick = (this.dd==17 && this.mm==3 ) ? "stpatrick.png" : false;
    spring = (this.dd==21 && this.mm==3 ) ? "spring.png" : false;
    summer = (this.dd==21 && this.mm==6 ) ? "summer.png" : false;
    fall = (this.dd==21 && this.mm==9 ) ? "fall.png" : false;
    halloween = (this.dd==31 && this.mm==10 ) ? "halloween.png" : false;
    winter = (this.dd==21 && this.mm==12 ) ? "winter.png" : false;
    pic = (christmasday || xmasday1 || newyear || newyear2 || valentine || spring || stpatrick || summer || fall || halloween || winter);

    if(pic){
    target = document.getElementById("targetimage");
    target.src = "holiday_images/" + pic;
    }
    },
    auto:setTimeout("setImage.changeIt()",2000)
    }

    </script>
    ----------------------------------------------------------
    and of course, the display line reads the same as before with a size change.

    <tr>
    <td class="auto-style34" style="width: 30%; height: 20;" valign="top">
    <font color="#0000ff" face="Arial" size="2">
    <img id="targetimage" height="38" src="images/spacer.png" width="228" class="auto-style42" />
    </font></td>
    </tr>

  14. #29
    Join Date
    Jan 2014
    Posts
    15
    I got the problem solved but thank you for your help. I didn't understand yours because of the references to different files and web pages to bring up the images. BUT, I will, now that I understand what I am looking for, try your code. Again, thank you.
    George

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