1. Technology
Send to a Friend via Email

Seasonal Backgrounds

One rather interesting effect that can be mostly achieved using Javascript is to place a seasonal background image onto your web page. The only difficulty is if you want the seasonal image to reflect the season at your visitor's location as the seasons in the northern and southern hemispheres are opposite to one another and you can't tell using Javascript where your visitor is located.

Assuming that you deside instead to display the seasons as they are where you live or have a server side script that looks up the IP address to determine where your visitor is located then determining which of four images to use as the background can be easily determined.

All that you need to do to install this effect onto your web page(s) is to copy the below code and save it either as a separate file (perhaps named season.js) or paste it between script tags in your web page itself. You then set up four images to reflect whatever you want for the four seasons and save them as summer.gif, winter,gif, spring.gif, and autumn.gif (or if you want to use different names then update the filenames in the backImg array. Set north to true to display northern hemisphere seasons or false to display southern hemisphere seasons.

var north = true;
var backImg = ['summer.gif','autumn.gif','winter.gif',
continued from previous line'spring.gif'];
var today = new Date();
var month = today.getMonth();
if (today.getDate() > 20) month++;
document.getElementsByTagName('body')[0].style.
continued from previous linebackgroundImage = 'url('+backImg[Math.floor((month
continued from previous line+(north?6:0))/3)%4]+')';

The only peculiar thing about this particular script is where you need to put it. This script must NOT go in the head of your page. To place it there and try to run it straight away will mean that the body tag is not yet defined and is therefore unable to be updated to attach the appropriate background image. Placing the code in a function and calling it from the onload event handler wont achieve the desired result either as this would mean that the rest of the page would be fully loaded before the background image is attached. The only place where this script can be placed in your web page where it will achieve the desired result is immediately after the body tag itself. So (assuming that you put it in an external file called season.js) the code to call the script will look like this:

<body>
<script type="text/javascript" src="season.js"></script>

Actually I have cheated slightly with the code in this script. The script assumes that the seasons always start on the 21st of the month where in fact only three of the seasons actually do with the fourth starting on the 22nd of the month. This means that the script will display the wrong seasons image on the 21st September each year but since the extra code to cater for this would make the script one third longer I figured that this is close enough for most people. If you want to correct this then you need to modify the test for day greater than 20 to take the month into account.

The script works by first retrieving the current month number (0 = January, 11 = December) and then adds 1 to it if the day of the month is after the 20th.The main piece of code that does the work of deciding which image to display is month+(north?6:0))/3)%4. For the northern hemisphere 6 months is added to the month to bring the month field into line with southern hemisphere dates. So now we have a number between 0 and 18. Dividing this by three gives us a number between 0 and 6 and taking the modulo 4 of this wraps 4 onto 0, 5 onto 1, and 6 onto 2. The resultant number between 0 and 3 represents Summer, Autumn (fall), Winter, and Spring respectively and so we grab the appropriate image from the array and put it into the background of the page.

As not all of your visitors will have Javascript enabled you will want to either select one of the images to always display for those visitors or perhaps display an entirely different image in that case. If (for example) you decide to always display the summer image when Javascript is not supported you would place the following code in your stylesheet:

body {backgroundImage:url(summer.gif);}

©2014 About.com. All rights reserved.