PDA

View Full Version : Displaying new image each month


janet
04-28-2008, 07:42 AM
Please does anybody know how to Display different image each month? Like in April the image on the website should automatically display April image and in may different image instead of me changing it manually every month.

Thank you for your help in advance
pghcollectibles
04-28-2008, 04:07 PM
you could use a javascript code to create a variable=filename and the variable would depend on which month it was. here is sort of an example

this code would go into your <head></head> section

<script type="text/javascript">
var d=new Date();
document.write(d.getMonth());
if (d.getmonth()=="0"){
picofmonth="januarypic.jpg";
} else if (d.getmonth()=="1"){
picofmonth="februarypic.jpg";
} else if (d.getmonth()=="2"){
picofmonth="marchpic.jpg";
} else if (d.getmonth()=="3"){
picofmonth="aprilpic.jpg";
} else if (d.getmonth()=="4"){
picofmonth="maypic.jpg";
} else if (d.getmonth()=="5"){
picofmonth="junepic.jpg";
} else if (d.getmonth()=="6"){
picofmonth="julypic.jpg";
} else if (d.getmonth()=="7"){
picofmonth="augustpic.jpg";
} else if (d.getmonth()=="8"){
picofmonth="septemberpic.jpg";
} else if (d.getmonth()=="9"){
picofmonth="octoberpic.jpg";
} else if (d.getmonth()=="10"){
picofmonth="novemberpic.jpg";
} else if (d.getmonth()=="11"){
picofmonth="decemberpic.jpg";
}
</script>

this would be in your <body> where you wanted the pic

<img src="picofmonth" ... />

make sure you have the location of the file correct. this might be kind of rough i think it looks ok but i dont have time to test it right now. there is probably a cleaner way of typing this but im not the greatest. anyway here is a link that will provide more info about it w3schools (http://www.w3schools.com/jsref/jsref_getMonth.asp)
janet
05-01-2008, 03:42 AM
Thank you for you help, I've tried it but I couldnt get it to work. The image and the file is in the same location, but the output only show 4 instead of the maypic.jpg.
shadmego
05-01-2008, 04:11 PM
Here is another option. I tried it and it worked for me ...


Put this in your html head (between <head></head> tags):


<script type="text/javascript">
<!--
var d=new Date();

var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
//-->
</script>
Now you can refer to months by their name. To insert the proper picture for each month, put the following between the <body></body> tags where you want the image to appear:



<script type="text/javascript">
<!--
if(month[d.getMonth()] == "January") {
document.write("<img src=\"januarypic.jpg\" />");
} elseif(month[d.getMonth()] == "February") {
document.write("<img src=\"februarypic.jpg\" />");
} elseif(month[d.getMonth()] == "March") {
document.write("<img src=\"marchpic.jpg\" />");
} elseif(month[d.getMonth()] == "April") {
document.write("<img src=\"aprilpic.jpg\" />");
} elseif(month[d.getMonth()] == "May") {
document.write("<img src=\"maypic.jpg\" />");
} elseif(month[d.getMonth()] == "June") {
document.write("<img src=\"junepic.jpg\" />");
} elseif(month[d.getMonth()] == "July") {
document.write("<img src=\"julypic.jpg\" />");
} elseif(month[d.getMonth()] == "August") {
document.write("<img src=\"augustpic.jpg\" />");
} elseif(month[d.getMonth()] == "September") {
document.write("<img src=\"septemberpic.jpg\" />");
} elseif(month[d.getMonth()] == "October") {
document.write("<img src=\"octoberpic.jpg\" />");
} elseif(month[d.getMonth()] == "November") {
document.write("<img src=\"novemberpic.jpg\" />");
} elseif(month[d.getMonth()] == "December") {
document.write("<img src=\"decemberpic.jpg\" />");
} else {
document.write("No image to display this month!! Sorry!!");
}
//-->
</script>
That should do it. You will want to make sure the img src path is correct (image name and location), but that should put an image based on month on your website.

Let me know if that worked because I'm not that great with javascript.

~regards
linFox
05-02-2008, 03:08 AM
Here's a little bit of a cleaner version of the same sort of thing.

This goes in the <head>, this time the image path/names go here:

<script type="text/javascript">
<!--
var d = new Date();
var month = new Array(12);
month[0] = "januarypic.jpg";
month[1] = "februarypic.jpg";
month[2] = "marchpic.jpg";
month[3] = "aprilpic.jpg";
month[4] = "maypic.jpg";
month[5] = "junepic.jpg";
month[6] = "julypic.jpg";
month[7] = "augustpic.jpg";
month[8] = "septemberpic.jpg";
month[9] = "octoberpic.jpg";
month[10] = "novemberpic.jpg";
month[11] = "decemberpic.jpg";
//-->
</script>

And this is all that's needed in the <body>, in the location you want the image:

<script type="text/javascript">
<!--
document.write("<img src=\""+ month[d.getMonth()] + "\" />");
//-->
</script>
janet
05-02-2008, 03:36 AM
Thank you for all your help.

To shadmego, their is a syntax error on the code, am not that good with sorting out code errors. But I still appreciate the time you spent to post the code.

To linFox, the code works. Thank you very much.

Thanks to everybody that have tried their best in helping me out.
God bless you all. (AMEN) I appreciate you all.