Monday, June 6, 2011

How to make a picture change according to a date?

Ok so I need a little help here. I want a picture on my site to change when it's a certain date. Like when it's August 28th I want to display clouds, when it's August 29th I want it to display a sun, and on August 30th a football. I don't want those exact images those are just examples. One last thing I need it to be a monthly type of thing so I don't have to change it every week. Thanks, I will chose best answer depending on who's works! How to make a picture change according to a date?
Here is an example that will work for you, on a monthly basis it will change the picture each month. You can change the names of the pictures of course in the array in the script. Note that a default image is placed in the body in case user does not have javascript turned on. And that image must have an id (';monthlyPic';) that matches what is in the getElementById in the script. You can change that id of course, just change it in both the img and the script if you want. Also note, if you are not familiar with counting in javascript, the numbering in the array is correct as counting in javascript begins at 0.



%26lt;!DOCTYPE -don't forget to use one of these!

%26lt;html%26gt;

%26lt;head%26gt;

%26lt;title%26gt;%26lt;/title%26gt;

%26lt;script type=';text/javascript';%26gt;

window.onload = function(){chgMonthlyPic();}

function chgMonthlyPic()

{

var month = new Array(12);

month[0] = ';JanuaryPicture.jpg';;

month[1] = ';FebruaryPicture.jpg';;

month[2] = ';MarchPicture.jpg';;

month[3] = ';AprilPicture.jpg';;

month[4] = ';MayPicture.jpg';;

month[5] = ';JunePicture.jpg';;

month[6] = ';JulyPicture.jpg';;

month[7] = ';AugustPicture.jpg';;

month[8] = ';SeptemberPicture.jpg';;

month[9] = ';OctoberPicture.jpg';;

month[10] = ';NovemberPicture.jpg';;

month[11] = ';DecemberPicture.jpg';;



var d = new Date();

document.getElementById (';monthlyPic';).src = month[d.getMonth()];

/*** I left a space in the line above between ById and first ( just so yahoo would not drop the code, could take that space out ***/

}

%26lt;/script%26gt;

%26lt;/head%26gt;

%26lt;body%26gt;

%26lt;div%26gt;

%26lt;img src=';defaultMonthlyPicture.jpg'; alt=';picture'; width=';700'; height=';200'; id=';monthlyPic'; /%26gt;

%26lt;/div%26gt;

%26lt;/body%26gt;

%26lt;/html%26gt;

No comments:

Post a Comment