PDA

View Full Version : displaying an image based on calendar date

mgbparts
09-30-2002, 06:43 PM
Hello,

I'm looking for help locating a Javascript that will display a different greeting card based on calendar dates. For example on Oct. 31 it will display a "Halloween graphic", etc.

All the holiday cards would be stored in the same directory and be made the same size. The page background would remain the same and any text on the page would remain the same, only the card displayed would change depending on the date.

If anyone could start me off with a basic script I would be pleased to add all the additional different dates I need.

Each card would be 450w x 300h, the directory would be called "holidays" and the cards would be located in a subdirectory within that directory called "images"

I've seen scripts that did this for time of day and even day of week, but none that would display a differt image based on a calendar date. Is this even possible?

Thank you in advance for looking at this request.

Bob
Garadon
09-30-2002, 08:36 PM
note the following is made really quick, but is it something like that u want?


<html>
<head>

<script language="javascript">
<!--
mytime=new Date();
mymonth=mytime.getMonth()+1;
mydate=mytime.getDate();
if (mymonth==12 && mydate==24){document.write("<img src=holiday/merrychristmas.bmp>");
}
if (mymonth==10 && mydate==31){document.write("<img src=holiday/hallowen.bmp>");
}


//-->
</script>
</head>
<body>
</body>
mgbparts
09-30-2002, 09:25 PM
Garadon,

This script will do what I need, but I'd like to take it another step if I might impose. The script as it is written will display the image on a page based on reading the system's date.

Is there any way to expand this script so that the image is displayed within a table cell on the page. The reason for this is I'd like to be able to add our MG clubs personal greeting in a cell above the image. This would allow me to change the greeting and page background colors as needed.

Thank you for your assistance...

Bob
Garadon
10-01-2002, 12:53 AM
something in that direction?

<html>
<head>

<script language="javascript">
<!--
mytime=new Date();
mymonth=mytime.getMonth()+1;
mydate=mytime.getDate();
if (mymonth==12 && mydate==24){picture="<img src=holiday/merrychristmas.bmp>";
}
if (mymonth==10 && mydate==31){picture="<img src=holiday/hallowen.bmp>";
}


//-->
</script>
</head>
<body>
<table>
<tr>
<td>
<script language="javascript">

document.write(picture);
</script>

</td>
</tr>
</table>
</body>
mgbparts
10-01-2002, 02:26 AM
Hello,

I've tried using the second part of the script and I get an error 'picture' is undefined.

<script language="javascript">document.write(picture);</script>

Any suggestions on how to make the script determine which picture to display?

thank you,

Bob
glenngv
10-01-2002, 03:29 AM
<html>
<head>
<script language="javascript">
<!--
function displayImage(){
today=new Date();
mm=today.getMonth()+1;
dd=today.getDate();
img = "" + mm + dd;
switch (img){
case "1225":
imgtag = "<img src='images/xmas.jpg'>";
break;
case "1031":
imgtag = "<img src='images/halloween.jpg'>";
break;

//other holidays here

default://no holiday
imgtag = "<img src='images/noholiday.jpg'>";
break;

}
return imgtag;
}
//-->
</script>
</head>
<body>
<table>
<tr>
<td>
<script language="javascript">
document.write(displayImage());
</script>
</td>
</tr>
</table>
</body>
</html>
adios
10-01-2002, 04:09 AM
<html>
<head>
<title>untitled</title>
<style type="text/css">

.msgCSS {
position: absolute;
font: 600 24px "comic sans ms";
color: darkred;
}

#placeholder {
font-size: 40px;
}

</style>
<script type="text/javascript" language="javascript">

var IMGpath = 'http://images.salon.com/comics/dark/4/dream/2000/11/src/';
var defaultIMGurl = 'default image url';
var default_msg = 'Hi there !';

var greet_dates = Object;
greet_dates['101'] = {url: '10dream1.gif' , msg: 'Happy Holidays !'};

function setGreeting() {
var now = new Date();
var which = (now.getMonth()+1).toString() + now.getDate().toString();
if (greet_dates[which]) {
document.greeting.src = IMGpath + greet_dates[which].url;
setMessage(greet_dates[which].msg);
} else {
document.greeting.src = defaultIMGurl;
setMessage(default_msg);
}
}

function setMessage(msg) {
var el = document.getElementById ? document.getElementById('msg') :
document.all ? document.all('msg') :
document.layers ? document.layers['msg'] : null;
if (el)
if (!document.layers) el.innerHTML = msg;
else {
el.document.write('<span class="msgCSS">' + msg + '</span>');
el.document.close();
}
}

onload = setGreeting;

</script>
</head>
<body>
<div id="msg" class="msgCSS"></div><div id="placeholder">&amp;nbsp;</div>
<img name="greeting" border="0" width="450" height="300" src="">
</body>
</html>

greet_dates['101']/// '10' is Oct., '1' is - today!

In practice, put a default <img src="..."> in there (transparent gif)...
Garadon
10-01-2002, 04:59 PM
This should remove the undefined fault

<html>
<head>

<script language="javascript">
<!--
var picture='';
mytime=new Date();
mymonth=mytime.getMonth()+1;
mydate=mytime.getDate();
if (mymonth==12 && mydate==24){picture="<img src=holiday/merrychristmas.bmp>";
}
if (mymonth==10 && mydate==31){picture="<img src=holiday/hallowen.bmp>";
}


//-->
</script>
</head>
<body>
<table>
<tr>
<td>
<script language="javascript">
if(picture!='')
{
document.write(picture);
}

</script>

</td>
</tr>
</table>
</body>
mgbparts
10-01-2002, 07:40 PM
Guys,

Thanks to everyone for their suggestions and help. I have been able to install the script on our clubs website and want to sincerely thank all for their work and time.


Bob:thumbsup: