How to display a specific image for each day of the month?

**New2this** · 08-05-2011, 01:09 PM

Hi.

I'm new to Javascript. Trying to figure out how to show a specific image for each day of the month.

I think I need an array like this:

var dailypic=new Array()

dailypic[1]='http://www.mypic1.jpg'
dailypic[2]='http://www.mypic2.jpg'
dailypic[3]='http://www.mypic3.jpg'

etc..... to mypic31.jpg

Am I thinking along the right lines?

Also, how would I display the correct days image?

The code I am using to determine the date is:

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()+1
if (month<10)
month="0"+month
var daym=mydate.getDate()

Any help would be much appreciated. Thanks in advance.

**twseitex** · 08-05-2011, 06:28 PM

Hi,

---------------------------------------------------------------

// data of images

var dailypic=new Array // 31 days of month max
(
'http://www.mypic1.jpg',
...

'http://www.mypic31.jpg'
);

var dailypic_width=new Array // 31 days of month max
(
10, // pixel of 'http://www.mypic1.jpg',
...

10 // 'http://www.mypic31.jpg'
);

var dailypic_height=new Array // 31 days of month max
(
20, // pixel of 'http://www.mypic1.jpg',
...

20 'http://www.mypic31.jpg'
);

var arDayOfMonth=new Array
(
30, // Jan
...

31 // Dez
)

var CounterOfDays=0;

----------------------------------------------------------------

// create buffered images

var arBufferedImages=new Array();

for(CounterOfDays=0;CounterOfDays<31,CounterOfDays++)
{
arBufferedImages[CounterOfDays]=new Image(dailypic_width[CounterOfDays],dailypic_height[CounterOfDays]);
arBufferedImages[CounterOfDays].src=dailypic[CounterOfDays];
}

--------------------------------------------------------------

// set src of html object IMG in use of buffered images

<IMG ID="id_Day0"><BR>
<IMG ID="id_Day1"><BR> ...

// set .src of IMG

if(arBufferedImages[0]!=null){document.getElementById("id_Day0").src=arBufferedImages[0].src;}

---------------------------------------------------------------

create html object IMG dynamically

var TestPointer;
var arDynamicHtmlIMG=new Array();

for(CounterOfDays=0;CounterOfDays<31,CounterOfDays++)
{

TestPointer=document.createElement("IMG");
if(TestPointer!=null)
{
arDynamicHtmlIMG[CounterOfDays]=documment.body.appendChild(TestPointer)

// if you want you can use a DIV

// <BODY> .... <DIV ID="ContainerDIV"></DIV> ... </BODY>

// var DIVPointer=document.getElementById("ContainerDIV");

// arDynamicHtmlIMG[CounterOfDay]=DIVPointer.appendChild(TestPointer)

if(arDynamicHtmlIMG[CounterOfDays]!=null)
{

arDynamicHtmlIMG[CounterOfDays].width=arBufferedImages[CounterOfDays].width;
arDynamicHtmlIMG[CounterOfDays].height=arBufferedImages[CounterOfDays].height;

// arDynamicHtmlIMG[CounterOfDays].src=arBufferedImages[CounterOfDays].src;
// this renders images visible !!!!!

}
}
}

// f.e. Jan

for(CounterOfDays=0;CounterOfDays<CounterOfDays<arDayOfMonth[0],CounterOfDays++)

------------------------------------------------------

// set src of dynamic html object IMG in use of buffered images

// set .src of IMG 0

if(arBufferedImages[0]!=null)
{
if(arDynamicHtmlIMG[0])
{arDynamicHtmlIMG[0].src=arBufferedImages[0].src;} // renders visible
}

// set .src of IMG 1

if(arBufferedImages[1]!=null)
{
if(arDynamicHtmlIMG[1])
{arDynamicHtmlIMG[1].src=arBufferedImages[1].src;}
}

**New2this** · 08-06-2011, 02:38 AM

Thanks Try that.

**astupidname** · 08-06-2011, 02:52 AM

If your daily images are named "mypic" + a number from 1 to 31 + ".jpg" all you really need do is:

Code:

<script type="text/javascript">
window.onload = function () {
    document.getElementById('dailyPic').src = 'mypic'+ new Date().getDate() +'.jpg';
};
</script>
.....
<img src="blank.jpg" alt="pic" id="dailyPic">

Or, better yet, do yourself a favor and learn php a bit, then just do this instead:

PHP Code:


<img src="mypic<?php echo date('j');?>.jpg" alt="pic">

**New2this** · 08-06-2011, 07:20 AM

Thanks astupidname.

I have to use Javascript for this but your php alternative is appreciated.

**New2this** · 08-06-2011, 07:46 AM

Originally Posted by astupidname

If your daily images are named "mypic" + a number from 1 to 31 + ".jpg"

Hi again.

How does your solution work with:

var dailypic=new Array()

dailypic[1]='http://www.mypic1.jpg'
dailypic[2]='http://www.mypic2.jpg'
dailypic[3]='http://www.mypic3.jpg'

etc..... to mypic31.jpg

Thanks.

**JMRKER** · 08-06-2011, 08:11 AM

Originally Posted by New2this

Hi again.

How does your solution work with:

var dailypic=new Array()

dailypic[1]='http://www.mypic1.jpg'
dailypic[2]='http://www.mypic2.jpg'
dailypic[3]='http://www.mypic3.jpg'

etc..... to mypic31.jpg

Thanks.

You don't really need the array 'dailypic' if you use 'astupidname's JS post.
It creates and displays the images directly if in the same directory as script.

However, if you are determined to use the 'dailypic' array, then ...

Code:

<script type="text/javascript">
window.onload = function () {
    document.getElementById('dailyPic').src = dailypic[new Date().getDate()];
};
</script>
.....
<img src="blank.jpg" alt="pic" id="dailyPic">

**New2this** · 08-06-2011, 10:40 AM

Originally Posted by JMRKER

You don't really need the array 'dailypic' if you use 'astupidname's JS post.
It creates and displays the images directly if in the same directory as script.

However, if you are determined to use the 'dailypic' array, then ...

Code:

<script type="text/javascript">
window.onload = function () {
    document.getElementById('dailyPic').src = dailypic[new Date().getDate()];
};
</script>
.....
<img src="blank.jpg" alt="pic" id="dailyPic">

Thanks JMRKER

Using code as you suggested but not getting any pics. The blank.jpg is not being replaced by the daily pics.

**JMRKER** · 08-06-2011, 10:56 AM

What does your 'dailypic' array look like? Sample of 3-5 entries.

I don't have your array contents, so this is just an example using my own images.

Code:

<html>
<head>
<title>Daily Image</title>
<script type="text/javascript">

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var dailypic = ['',
    '11.jpg','12.jpg','13.jpg','14.jpg','15.jpg',
    '21.jpg','22.jpg','23.jpg','24.jpg','25.jpg',
    '31.jpg','32.jpg','33.jpg','34.jpg','35.jpg',
    '41.jpg','42.jpg','43.jpg','44.jpg','45.jpg',
    '51.jpg','52.jpg','53.jpg','54.jpg','55.jpg',
    '11.jpg','22.jpg','33.jpg','44.jpg','55.jpg',
    '21.jpg'
];
window.onload = function () {
    var now = new Date();
    var d = now.getDate();
    document.getElementById('dailyPic').src = baseURL+dailypic[d];
//    document.getElementById('dailyPic').title = d;  // test
};
</script>
</head>
<body>
<img src="" alt="pic" title="" id="dailyPic">
</body>
</html>

Thread: How to display a specific image for each day of the month?

Thread Tools

Display

How to display a specific image for each day of the month?

try that

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions