multiple variable images [Archive]

pacific_wolf

08-07-2009, 05:44 AM

Hi,

I've got this code below which basically does:

establish 2 x 4 table with an image holder in each cell
gets images from a server based on date format of ddmmyy
input of those images to appropriate image holder.

Improvements required:
1. If an image for a particular day is missing the red-cross appears in the image holder. It would be nicer to have a default image shown to indicate remote image not processed on this day. (somehow to do an error check when assigning image pointer? Maybe leaving or loading default image if days' image absent)
2. under each image I would like to show the date in, ddd, dd-mmm-yyyy
3. have the image target same named file with a .PDF extension
4. elegance in code may well make 2 & 3 above easier too.

Appreciate contributions to any/all issues.

Cheers

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

function convDate() {
thisDay = todaysDate.getDay(); // get the day of the week 0 - 6
thedays = todaysDate.getDate(); // get the day of the month 1 - 31
themnth = todaysDate.getMonth(); // get the month 0 - 11
theyear = todaysDate.getYear(); // get the year yyyy
tdy = theyear - 2000; // set the Two Digit Year
themnth = themnth + 1; // set the month to match calendar month
}

function adjDate() {
thedays = addNought(thedays);
themnth = addNought(themnth);
theyear = addNought(tdy);
}

function setPath() {
jpgpath = "http://website/coverimages/" + thedays + "" + themnth + "" + theyear + "-cover.jpg" // Set variable
}

function addNought(val) {
if (val<10) {
val = "0" + val;
}
return val;
}

</script>

</head>

<body>

<p align="center"><font face="Arial" size="4"><b>Table Title</b></font>
<p> </p>
<table>
<tr>
<td><img src"#" id="im1" width="170" height="243"></td>
<td><img src"#" id="im2" width="170" height="243"></td>
</tr>
<tr>
<td><img src"#" id="im3" width="170" height="243"></td>
<td><img src"#" id="im4" width="170" height="243"></td>
</tr>
<tr>
<td><img src"#" id="im5" width="170" height="243"></td>
<td><img src"#" id="im6" width="170" height="243"></td>
</tr>
<tr>
<td><img src"#" id="im7" width="170" height="243"></td>
<td><img src"#" id="im8" width="170" height="243"></td>
</tr>
</table>

<script type="text/javascript" language="javascript">
var todaysDate = new Date(); // set variable to todays date based on PC
var previous = -1; // set previous as a variable

convDate();
adjDate();
setPath();
document.getElementById("im1").src = jpgpath; // load the image

var todaysDate = new Date(todaysDate.getYear(), todaysDate.getMonth(), todaysDate.getDate()-0+previous);
convDate();
adjDate();
setPath();
document.getElementById("im2").src = jpgpath; // load the image

var todaysDate = new Date(todaysDate.getYear(), todaysDate.getMonth(), todaysDate.getDate()-0+previous);
convDate();
adjDate();
setPath();
document.getElementById("im3").src = jpgpath; // load the image

var todaysDate = new Date(todaysDate.getYear(), todaysDate.getMonth(), todaysDate.getDate()-0+previous);
convDate();
adjDate();
setPath();
document.getElementById("im4").src = jpgpath; // load the image

var todaysDate = new Date(todaysDate.getYear(), todaysDate.getMonth(), todaysDate.getDate()-0+previous);
convDate();
adjDate();
setPath();
document.getElementById("im5").src = jpgpath; // load the image

var todaysDate = new Date(todaysDate.getYear(), todaysDate.getMonth(), todaysDate.getDate()-0+previous);
convDate();
adjDate();
setPath();
document.getElementById("im6").src = jpgpath; // load the image

var todaysDate = new Date(todaysDate.getYear(), todaysDate.getMonth(), todaysDate.getDate()-0+previous);
convDate();
adjDate();
setPath();
document.getElementById("im7").src = jpgpath; // load the image

var todaysDate = new Date(todaysDate.getYear(), todaysDate.getMonth(), todaysDate.getDate()-0+previous);
convDate();
adjDate();
setPath();
document.getElementById("im8").src = jpgpath; // load the image

</script>

</body>