...

View Full Version : Change image monthly



talibiddeenjr
12-31-2007, 10:44 AM
I see the day of the week image displayer code (below):

I no nothing about writing javascript, but would like to change this to display a different picture each month.

Thanks in advance if any one can help.


<script>
<!--
<!--Week Of The Day Image Displayer script- By JavaScript Kit (www.javascriptkit.com) More free scripts here-->
var mondayimg=&quot;../m1.gif&quot;
var tuesdayimg=&quot;../m2.gif&quot;
var wednesdayimg=&quot;../m3.gif&quot;
var thursdayimg=&quot;../m4.gif&quot;
var fridayimg=&quot;../m5.gif&quot;
var saturdayimg=&quot;../m6.gif&quot;
var sundayimg=&quot;../m7.gif&quot;
var mydate=new Date()
var today=mydate.getDay()
if (today==1)
document.write('&lt;img src=&quot;'+mondayimg+'&quot;&gt;')
else if (today==2)
document.write('&lt;img src=&quot;'+tuesdayimg+'&quot;&gt;')
else if (today==3)
document.write('&lt;img src=&quot;'+wednesdayimg+'&quot;&gt;')
else if (today==4)
document.write('&lt;img src=&quot;'+thursdayimg+'&quot;&gt;')
else if (today==5)
document.write('&lt;img src=&quot;'+fridayimg+'&quot;&gt;')
else if (today==6)
document.write('&lt;img src=&quot;'+saturdayimg+'&quot;&gt;')
else
document.write('&lt;img src=&quot;'+sundayimg+'&quot;&gt;')
//--&gt;
&lt;/script&gt;

&lt;p align=&quot;center&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;-2&quot;&gt;This free script provided by&lt;/font&gt;&lt;br&gt;
&lt;font face=&quot;arial, helvetica&quot; size=&quot;-2&quot;&gt;&lt;a href=&quot;http://javascriptkit.com&quot;&gt;JavaScript
Kit&lt;/a&gt;&lt;/font&gt;&lt;/p&gt;</textarea></p>
</form>

<p align="left"><font size="5"><small><small>Many large sites on the internet use similar
scripts to display an image that spells out the current day of the week, ie <a
href="http://www.cnet.com">Cnet</a>.</small></small></font></p>

<hr width="90%" size="1">

<p align="left"><script type="text/javascript"><!--
google_ad_client = "pub-3356683755662088";
google_alternate_color = "FFFFFF";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "000099";
google_color_url = "999999";
google_color_text = "000033";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>

<p align="center"><script type="text/javascript" src="http://www.javascriptkit.com/ssireplace.js"></script>

<p align="center"><font face="Arial" size="1">
Copyright 1997-2007 <a href="http://www.javascriptkit.com">JavaScript Kit</a>.
NO PART may be reproduced without author's permission.</font></p>

<style>
.footad a{
text-decoration: none;
}
.sponsors{
line-height: 14px;
font: normal 12px Arial;
}

</style>

<div align="center" class="footad" style="font-size: 85%"> <a href="http://www.dynamicdrive.com/style/" target="offsite">CSS Library</a>
|
<a href="http://www.dynamicdrive.com/dynamicindex1/" target="offsite">JavaScript & DHTML Menus</a>
|
<a target="offsite" href="http://www.hostsearch.com/low_cost_web_hosting.asp">
Cheap Web Hosting</a> | -<a target="offsite" href="http://www.sharewareconnection.com">Software
Connection</a> | <a target="offsite" href="http://www.filehungry.com">
Software Library</a><br>
<a target="offsite" href="http://www.thescripts.com/">Web Development</a>
| <a target="offsite" href="http://www.bluedogink.com/">Cheap Printer Ink</a>
| <a target="offsite" href="http://www.daniweb.com/forums/forum117.html">JavaScript Community</a>
| <a target="offsite" href="http://www.eukhost.com">Web hosting</a></div></p>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

Actinia
12-31-2007, 04:22 PM
When copying the original code, you seem to have saved it as entities rather than the original code. I suspect that you pasted it into the design view of your html editor.

The first section should look like this:

<script>
<!--
<!--Week Of The Day Image Displayer script- By JavaScript Kit (www.javascriptkit.com) More free scripts here-->
var mondayimg="../m1.gif"
var tuesdayimg="../m2.gif"
var wednesdayimg="../m3.gif"
var thursdayimg="../m4.gif"
var fridayimg="../m5.gif"
var saturdayimg="../m6.gif"
var sundayimg="../m7.gif"
var mydate=new Date()
var today=mydate.getDay()
if (today==1)
document.write('<img src="'+mondayimg+'">')
else if (today==2)
document.write('<img src="'+tuesdayimg+'">')
else if (today==3)
document.write('<img src="'+wednesdayimg+'">')
else if (today==4)
document.write('<img src="'+thursdayimg+'">')
else if (today==5)
document.write('<img src="'+fridayimg+'">')
else if (today==6)
document.write('<img src="'+saturdayimg+'">')
else
document.write('<img src="'+sundayimg+'">')
//-->
</script>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p></textarea></p>
</form>

Now in the definitions of the images, change each occurrence of a day-image to a corresponding month-image. Thus

var mondayimg="../m1.gif"
becomes

var januaryimg="../m1.gif"
etc.

Change the
var today=mydate.getDay() call to
var thisMonth=mydate.getMonth()

And the code:

if (today==1)
document.write('<img src="'+mondayimg+'">')
else if (today==2)
document.write('<img src="'+tuesdayimg+'">')
would become
if (thisMonth==1)
document.write('<img src=&quot;'+februaryimg+'&quot;&gt;')
else if (thisMonth==2)
document.write('&lt;img src="'+marchimg+'">')
But remember that the value of thisMonth will range between 0 and 11, so the last lines will be:
else
document.write('<img src="'+januaryimg+'">')

John

Bill Posters
12-31-2007, 05:05 PM
If you name the monthly files month1.jpg through to month12.jpg*, you can do away with the need to repeatedly if check the month and call the appropriate file more directly.

* naming them month1.jpg to month12.jpg also makes them easier to 'read' as orderly months, compared to starting at 0. (It also helps keep the files gathered together in the images folder [when sorted by name].) It's a simple thing to add 1 to the getMonth value to calibrate it for the correct file.


e.g.

var mydate = new Date()
var thisMonth = mydate.getMonth();
document.write('<img src="month'+(thisMonth+1)+'.jpg" alt="something" />');

However, not being a fan of document.write, I'd recommend using a more 'unobtrusive' approach. Add a default image directly in the markup and then use js/Dom to swap that for a month-specific one.

(rough) e.g.

<script type="text/javascript">

window.onload = function() {

var monthImg = document.getElementById('monthimage');
var mydate = new Date()
var thisMonth = mydate.getMonth();

monthImg.src = '/images/month' + (thisMonth+1) +'.jpg';

}

</script>

...

<img src="/images/monthdefault.jpg" alt="Something useful." id="monthimage" />


Fwiw, another option, still avoiding the if statements, would be...
(files names january.jpg, february.jpg, march.jpg, etc...)


<script type="text/javascript">

window.onload = function() {

var months = ['january','february','march','april',...,'december'];

var monthImg = document.getElementById('monthimage');
var mydate = new Date()
var thisMonth = mydate.getMonth();

monthImg.src = '/images/' + months[thisMonth] + '.jpg';

}

</script>

...

<img src="/images/monthdefault.jpg" alt="Something useful." id="monthimage" />

Actinia
01-01-2008, 10:52 AM
Bill Posters is quite right, if I were writing this from scratch, I would do it a quite different way. However, since talibiddeenjr is a new coder, I thought it simpler to just make a modification of what he/she already had.

John

talibiddeenjr
01-08-2008, 12:06 PM
Bill Posters is quite right, if I were writing this from scratch, I would do it a quite different way. However, since talibiddeenjr is a new coder, I thought it simpler to just make a modification of what he/she already had.

John

Thank you John for your prompt response. I am just now getting around to tinkering with it. Your suggestions worked!

Here's is the final code I came up with (with your help) in case anyone might want to use it:

<script>

var januaryimg="m1.jpg"
var februaryimg="m2.jpg"
var marchimg="m3.jpg"
var aprilimg="m4.jpg"
var mayimg="m5.jpg"
var juneimg="m6.jpg"
var julyimg="m7.jpg"
var augustimg="m8.jpg"
var septemberimg="m9.jpg"
var octoberimg="m10.jpg"
var novemberimg="m11.jpg"
var decemberimg="m12.jpg"


var mydate=new Date()
var thisMonth=mydate.getMonth()



if (thisMonth==1)
document.write('<img src="'+februaryimg+'">')
else if (thisMonth==2)
document.write('<img src="'+marchimg+'">')
else if (thisMonth==3)
document.write('<img src="'+aprilimg+'">')
else if (thisMonth==4)
document.write('<img src="'+mayimg+'">')
else if (thisMonth==5)
document.write('<img src="'+juneimg+'">')
else if (thisMonth==6)
document.write('<img src="'+julyimg+'">')
else if (thisMonth==7)
document.write('<img src="'+augustimg+'">')
else if (thisMonth==8)
document.write('<img src="'+septemberimg+'">')
else if (thisMonth==9)
document.write('<img src="'+octoberimg+'">')
else if (thisMonth==10)
document.write('<img src="'+novemberimg+'">')
else if (thisMonth==11)
document.write('<img src="'+decemberimg+'">')
else
document.write('<img src="'+januaryimg+'">')
//-->
</script>

talibiddeenjr
01-08-2008, 12:14 PM
Thank you as well. I didn't see your reply until after I had already played around John's suggestions. If I get a chance to play around with it again, I will look into these suggestions.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum