As for the array, you could use one for links and one for texts, they would be similar to what the script you originally posted did with images. Or use just one array for both (scroll the block, there are other changes below for this in the href and innerHTML lines. I also moved the declaration of the default image up into the configuration area.):
Code:
<!DOCTYPE html>
<html>
<head>
<title>Daily Image - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<img id="dailyimage" src="images/default.gif" alt="daily image" title=""><br>
<a id="dailylink" href="http://en.wikipedia.org/wiki/January_1" target="_blank">Wiki Dates</a>
<script type="text/javascript">
// Daily Image Script (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
;(function(){
var folder = 'images/'; // set image folder
var diag = true; // true or false. true will alert a list of the images the code is looking for.
var defaultImage = 'default.gif';
var events = new Array(12);
for (var i = events.length - 1; i > -1; --i){
events[i] = new Array(31);
for (var j = events[i].length - 1; j > -1; --j){
events[i][j] = {};
}
}
events[3][14] = {link: 'http://www.google.com/', text: 'Google'};
////////////////////// No Need to Edit Below Here //////////////////////
var d = new Date(), dm = d.getMonth() + 1, dd = d.getDate(), dy = d.getFullYear(),
files = [
[dm, dd, dy].join('-') + '.jpg',
[dm, dd].join('-') + '.jpg',
dm + '.jpg',
defaultImage
], file, months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
function loadError(i){
var img = new Image();
img.onload = function(){
document.getElementById('dailyimage').src = this.src;
document.getElementById('dailylink').href = events[dm][dd].link || 'http://en.wikipedia.org/wiki/' + months[dm - 1] + '_' + dd;
document.getElementById('dailylink').innerHTML = events[dm][dd].text || 'Wiki Date: ' + months[dm - 1] + ' ' + dd;
};
img.onerror = function(){
if(++i < files.length){loadError(i);}
}
img.src = folder + files[i];
}
loadError(0);
if(diag){alert(folder + files.join('\n' + folder));}
})();
</script>
</body>
</html>
What this does is create an array of the 12 months, each with 31 days in it. I know that's unrealistic, but any days that don't exist will be ignored by the script because it will never look for them. The red line shows a typical entry for a date you want. You can have as many or as few of these as you like. They don't have to be in order, but that will help you keep track of them. The month numbers are human month numbers, not javascript month numbers, so 3 is March. 14 is the date. The link: property will be the href and the text: property will be what the link text will say. If there's a date you don't have configured, the href will default back to the wiki date page for that date and the text to:
Wiki Date: March 14
with the month and date corresponding to the current date.
Added later - An example of adding another entry is:
Code:
<script type="text/javascript">
// Daily Image Script (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
;(function(){
var folder = 'images/'; // set image folder
var diag = true; // true or false. true will alert a list of the images the code is looking for.
var events = new Array(12);
var defaultImage = 'default.gif';
for (var i = events.length - 1; i > -1; --i){
events[i] = new Array(31);
for (var j = events[i].length - 1; j > -1; --j){
events[i][j] = {};
}
}
events[3][14] = {link: 'http://www.google.com/', text: 'Google'};
events[3][15] = {link: 'http://www.dynamicdrive.com/', text: 'Dynamic Drive'};
////////////////////// No Need to Edit Below Here //////////////////////
Most grateful for your solution(s)
Reply With Quote
Sincerest thanks
Bookmarks