Question:

How to make a picture change according to a date?

by | earlier

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!

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

1 ANSWERS

Sort By: Date | Rating

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.

<!DOCTYPE -don't forget to use one of these!

<html>

<head>

<title></title>

<script type="text/javascript">

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 ***/

}

</script>

</head>

<body>

<div>

<img src="defaultMonthlyPicture.jpg" alt="picture" width="700" height="200" id="monthlyPic" />

</div>

</body>

</html>
Report (0) (0) | earlier