www.webdeveloper.com
Results 1 to 8 of 8

Thread: Change background image by specific dates?

  1. #1
    Join Date
    Jan 2010
    Location
    Bristol, UK
    Posts
    3

    Change background image by specific dates?

    Hi everyone - Ok, sorry - I'm new, but I'm trying hard to learn.
    I'm working (for free) at a church that have asked me if it is possible to change their webpage backgrounds, based on specific dates (this is so it fits in with the liturgical calendar). I'm not 100% sure of all the dates yet, but know there are seven images with assocaited colours that they'd use, and would like the website to automatically change the backgrounds, based on specific date.

    Here is the code at present:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

    <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE></TITLE>

    <LINK href="styles.css" type=text/css rel=stylesheet>

    <STYLE type=text/css>BODY {

    BACKGROUND-IMAGE: url(images/matt_bg.gif); BACKGROUND-REPEAT: no-repeat

    }

    </STYLE>

    The new images have been created by a graphics person, called "green_bg.gif", "blue_bg.gif", "gold_bg.gif" - etc. What they want is for, on Christmas Day, for example the "gold_bg.gif" image to be used.

    Any help would be greatly appreciated - I know there are lots of people who are tons more able to do this than me.

    Thanks,

    Mark

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,681
    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>
    <script  type="text/javascript">
    /*<![CDATA[*/
    var ToDay=new Date();
    var Month=ToDay.getMonth();
    var Date=ToDay.getDate();
    var Image=false;
    
    if (ToDay.getFullYear()==2010){
     if (Month==0){  // January
      if (Date>=20&&Date<=30){
       Image='One.gif';
      }
     }
     if (Month==1){  // Febuary
      if (Date>=20&&Date<=25){
       Image='Three.gif';
      }
     }
    
    }
    
    if (Image){
     document.body.style.backgroundImage='url(http://www.vicsjavascripts.org.uk/StdImages/'+Image+')';
    }
    
    /*]]>*/
    </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
    Jan 2010
    Location
    Bristol, UK
    Posts
    3
    Thanks Vic, will have a go at that - vey helpful. I think there are a lot of such dates to use - some in the same month, so I guess I just need to be careful of the date selection.

    If I wanted to display a "standard" image, rather than one of the special dates, I'm thinking I'd use an else statement - or is there a better way of handling that?


    thanks


    Mark

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,681
    you could
    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>
    <script  type="text/javascript">
    /*<![CDATA[*/
    var ToDay=new Date();
    var Month=ToDay.getMonth();
    var Date=ToDay.getDate();
    var Image='Zero.gif';
    
    if (ToDay.getFullYear()==2010){
     if (Month==0){  // January
      if (Date>=20&&Date<=28){
       Image='One.gif';
      }
     }
     if (Month==1){  // Febuary
      if (Date>=20&&Date<=25){
       Image='Three.gif';
      }
     }
    
    }
    
     document.body.style.backgroundImage='url(http://www.vicsjavascripts.org.uk/StdImages/'+Image+')';
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    but best to set the image in the style sheet
    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/

  5. #5
    Join Date
    Jan 2010
    Location
    Bristol, UK
    Posts
    3
    Thanks Vic and thanks from the Community of St Francis too

  6. #6
    Join Date
    Dec 2013
    Posts
    2
    I know how to call an external javascript but how do you change the code below to act as an external javascript. I tried to revise it to work but I am stumped. Thank you in advance...Any help appreciated.

    /*<![CDATA[*/
    var ToDay=new Date();
    var Month=ToDay.getMonth();
    var Date=ToDay.getDate();
    var Image='Zero.gif';

    if (ToDay.getFullYear()==2010){
    if (Month==0){ // January
    if (Date>=20&&Date<=28){
    Image='One.gif';
    }
    }
    if (Month==1){ // Febuary
    if (Date>=20&&Date<=25){
    Image='Three.gif';
    }
    }

    }

    document.body.style.backgroundImage='url(http://www.vicsjavascripts.org.uk/St...e+&#39;)&#39;;

    /*]]>*/

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    wrap the document.body.style.backgroundImage='url(... part in a function that you then have called by a window.onload event in the main HTML page

    The external JS side of things, simply put the script in the web site root and then refer to it with the <script tag in the head of your HTML that calls the .js file you want added to the web page.
    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?

  8. #8
    Join Date
    Dec 2013
    Posts
    2
    Thank you fellow "anonymous!" I figured it out already but now it's conflicting with my carousel script. So I have to make a choice; do I want to keep the carousel script or the background change by date script.

    Anyways,

    Thanks for your prompt reply and help. This is an excellent forum!!


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