/    Sign up×
Community /Pin to ProfileBookmark

Change background image by specific dates?

Copy linkTweet thisAlerts:
Jan 29.2010

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

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsJan 29.2010 — [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>[/CODE]
Copy linkTweet thisAlerts:
@mark146authorJan 30.2010 — 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
Copy linkTweet thisAlerts:
@vwphillipsJan 30.2010 — 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>[/CODE]

but best to set the image in the style sheet
Copy linkTweet thisAlerts:
@mark146authorJan 30.2010 — Thanks Vic and thanks from the Community of St Francis too
Copy linkTweet thisAlerts:
@mrwrightrlDec 12.2013 — 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/StdImages/'+Image+')';

/*]]>*/
Copy linkTweet thisAlerts:
@rootDec 13.2013 — 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.
Copy linkTweet thisAlerts:
@mrwrightrlDec 13.2013 — 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!!

?
×

Success!

Help @mark146 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...