Improved Holiday Images

HOME

SCRIPT ARCHIVE

TUTORIALS

SUBMIT A SCRIPT

BOOK STORE

HOME / IMAGE SCRIPTS / HOLIDAY IMAGES

Thanks to Paul for suggesting this variation on the Holiday Images script. This script is an improvement over the other Holiday Images script in that you do not have to specify the year. Just plug in the start and end dates that you want your special images to appear and you're good to go for any year.

For the purposes of this explaination, pretend this line of text is a picture:

You will see where to change the text to your img src tag, but first grab the code from the box below.

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -
/* This is one of Chris's JavaScript Experiments and is copyrighted 1998, Chris Kelley. Use it as you wish, but please leave this note intact. Thanks.Find more at http://www.geocities.com/siliconvalley/bay/4125/.  Questions? email ckelley@inwave.com

var now = new Date();                  //creates the new date object
var date = now.getDate();            //gets the date of the month 1 thru 31
var month = now.getMonth();  // month as an intiger 0 (jan) thru 11 (dec)

//create special greetings on holidays

//if the start and end dates are in different months, use "||" operand
if ((month == 8 && date >= 28) || (month == 9 && date <= 1)) {
document.write("Today is between September 28th and October 1!"); 
}

//if the start and end dates are within the same month, use the "&&" operand
else if ((month == 9 && date >= 2) && (month == 9 && date <= 10)) {
document.write("Today is between October 2nd and October 10!");
}

else if ((month == 9 && date >= 12) && (month == 9 && date <= 17)) {
document.write("Today is between October 12th and October 17th!");
}

else if ((month == 11 && date >= 5) || (month == 0 && date <= 1)) {
document.write("Happy Holidays!");
}

else {
document.write("No special date is set for today!");
}

// - End of JavaScript - -->
</SCRIPT>

Let's go through it piece by piece.

var now = new Date();

This line creates the new Date object. You can get lots of information from the Date object, but for this script we will use just the current month and day.

var date = now.getDate();

This line extracts the current date from the Date object. JavaScript returns the date as an intiger from 1 to 31.

var month = now.getMonth();

This line extracts the current month from the Date object. JavaScript returns the month as an intiger from 0, January, to 11, December.

Once you have your date parts to work with, you can create a bunch of "if...else" statements to set your dates followed by document.write to display the image (or text in this case) during the time span you set.

if ((month == 8 && date >= 28)

Translation: if the current month equals September (month 8 in JS) AND (&&) today's date is greater than or equal to 28, OR (||) the current month equals October (month 9 in JS) AND today's date is less than or equal to 1

Then write this text to the page: Today is between September 28th and October 1!

{
document.write("Today is between September 28th and October 1!");
}

I noticed that if the start and end dates of your image (or text) display are in different months, you use the OR (||) operand. Since JavaScript returns the day of the month as in intiger between 1 and 31, your start date range will only go to the end of the month and your end date range will include the dates from the beginning of the month up to the date you specify. However, if your start and end dates are in the same month, use the AND (&&) operand. This will make your script end at the end date you specify before the 31st of the month.

else {
document.write("No special date is set for today!");
}

This line specifies the image (or text) that should display on all other days between holidays.