Display an hyperlinked image daily - Help!

**MCForty** · 03-14-2012, 03:54 AM

Hi, I'm struggling with this code that I found whilst surfing for a script that would display a different image on a website daily. This particular script does that but I also want the respective daily image to be a hyperlink rather than being static.

Objective of the script is to fetch and display a daily image on a webpage which it currently does (no mysql just an image folder library in a directory), however, I need each day's respective image to link to perhaps a wikipedia article about the respective subject - target_blank as well. Or better yet, onLoad to display the link separtely underneath the image would be ideal.

The code is below:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>retrieval</title>
<link href="../css/2012layout.css" rel="stylesheet" type="text/css" />


<script> 
// Function from http://www.developerfusion.co.uk/show/2310/  
// used to create MultiDiension arrays quickly 


function MultiDimensionalArray(iRows,iCols)  
{  
var i;  
var j;  
   var a = new Array(iRows);  
   for (i=0; i < iRows; i++)  
   {  
       a[i] = new Array(iCols);  
       for (j=0; j < iCols; j++)  
       {  
           a[i][j] = "";  
       }  
   }  
   return(a);  
} 

function setDailyPic() 
{
	
// Calendar Prep work 
 calendar = new Date(); 
 day = calendar.getDay(); 
 month = calendar.getMonth(); 
 date = calendar.getDate(); 
 year = calendar.getYear(); 
 if (year < 1000) 
 year+=2000 
 cent = parseInt(year/100); 
 g = year % 20; 
 k = parseInt((cent - 17)/25); 
 i = (cent - parseInt(cent/4) - parseInt((cent - k)/3) + 20*g + 15) % 30; 
 i = i - parseInt(i/28)*(1 - parseInt(i/28)*parseInt(29/(i+1))*parseInt((21-g)/11)); 
 j = (year + parseInt(year/4) + i + 2 - cent + parseInt(cent/4)) % 7; 
 l = i - j; 
 emonth = 3 + parseInt((l + 40)/44); 
 edate = l + 28 - 31*parseInt((emonth/4)); 
 emonth--; 
 

// Define new picture array and fill it 
  myPictureArray = MultiDimensionalArray(12,32); // Defines an array 0..11, 0..31 
// Easter 
  myPictureArray[emonth][edate]="../images/retrieve/birthdays/default.jpg"; 
// March 
  myPictureArray[2][5]="../images/retrieve/birthdays/march05.jpg";
  myPictureArray[2][6]="../images/retrieve/birthdays/march06.jpg";
  myPictureArray[2][7]="../images/retrieve/birthdays/march07.jpg";
  myPictureArray[2][8]="../images/retrieve/birthdays/march08.jpg";
  myPictureArray[2][9]="../images/retrieve/birthdays/march09.jpg";
  myPictureArray[2][10]="../images/retrieve/birthdays/march10.jpg";
  myPictureArray[2][11]="../images/retrieve/birthdays/march11.jpg";
  myPictureArray[2][12]="../images/retrieve/birthdays/march12.jpg";
  myPictureArray[2][13]="../images/retrieve/birthdays/march13.jpg";
  myPictureArray[2][14]="../images/retrieve/birthdays/march14.jpg";
  myPictureArray[2][15]="../images/retrieve/birthdays/march15.jpg";
  myPictureArray[2][16]="../images/retrieve/birthdays/march16.jpg";
  
  
// October 
  myPictureArray[3][1]="../images/retrieve/birthdays/default.jpg"; 
// November 
  // Melbourne Cup 
    for(var i=2; i<7; i++) 
    { 
      myPictureArray[10][i]="../images/retrieve/birthdays/default.jpg"; 
    } 
  myPictureArray[10][11]="../images/retrieve/birthdays/default.jpg"; 
// December 
  myPictureArray[11][25]="../images/retrieve/birthdays/default.jpg";  
  myPictureArray[11][31]="../images/retrieve/birthdays/default.jpg"; 

  // month=0; day=26; // Uncomment this line to test  

// Display Picture 
  // If a [month, day] is set in array, use that as source, else use default 
  var pictureSRC = (myPictureArray[month][date])?myPictureArray[month][date]:"../images/retrieve/birthdays/default.jpg";  
  document.getElementById("myPicture").setAttribute("src",pictureSRC); 
} 
</SCRIPT> 

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
}
-->
</style></head>

<BODY onLoad="setDailyPic()"> 

<img id='myPicture' src='../images/retrieve/birthdays/default.jpg'></img>.





<body>

</body>
</html>

**keyboard** · 03-14-2012, 04:40 AM

Try this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>retrieval</title>
<link href="../css/2012layout.css" rel="stylesheet" type="text/css" />


<script> 
// Function from http://www.developerfusion.co.uk/show/2310/  
// used to create MultiDiension arrays quickly 


function MultiDimensionalArray(iRows,iCols)  
{  
var i;  
var j;  
   var a = new Array(iRows);  
   for (i=0; i < iRows; i++)  
   {  
       a[i] = new Array(iCols);  
       for (j=0; j < iCols; j++)  
       {  
           a[i][j] = "";  
       }  
   }  
   return(a);  
} 

function setDailyPic() 
{
	
// Calendar Prep work 
 calendar = new Date(); 
 day = calendar.getDay(); 
 month = calendar.getMonth(); 
 date = calendar.getDate(); 
 year = calendar.getYear(); 
 if (year < 1000) 
 year+=2000 
 cent = parseInt(year/100); 
 g = year % 20; 
 k = parseInt((cent - 17)/25); 
 i = (cent - parseInt(cent/4) - parseInt((cent - k)/3) + 20*g + 15) % 30; 
 i = i - parseInt(i/28)*(1 - parseInt(i/28)*parseInt(29/(i+1))*parseInt((21-g)/11)); 
 j = (year + parseInt(year/4) + i + 2 - cent + parseInt(cent/4)) % 7; 
 l = i - j; 
 emonth = 3 + parseInt((l + 40)/44); 
 edate = l + 28 - 31*parseInt((emonth/4)); 
 emonth--; 
 

// Define new picture array and fill it 
  myPictureArray = MultiDimensionalArray(12,32); // Defines an array 0..11, 0..31 
// Easter 
  myPictureArray[emonth][edate]="../images/retrieve/birthdays/default.jpg"; 
// March 
  myPictureArray[2][5]="../images/retrieve/birthdays/march05.jpg";
  myPictureArray[2][6]="../images/retrieve/birthdays/march06.jpg";
  myPictureArray[2][7]="../images/retrieve/birthdays/march07.jpg";
  myPictureArray[2][8]="../images/retrieve/birthdays/march08.jpg";
  myPictureArray[2][9]="../images/retrieve/birthdays/march09.jpg";
  myPictureArray[2][10]="../images/retrieve/birthdays/march10.jpg";
  myPictureArray[2][11]="../images/retrieve/birthdays/march11.jpg";
  myPictureArray[2][12]="../images/retrieve/birthdays/march12.jpg";
  myPictureArray[2][13]="../images/retrieve/birthdays/march13.jpg";
  myPictureArray[2][14]="../images/retrieve/birthdays/march14.jpg";
  myPictureArray[2][15]="../images/retrieve/birthdays/march15.jpg";
  myPictureArray[2][16]="../images/retrieve/birthdays/march16.jpg";
  
  
// October 
  myPictureArray[3][1]="../images/retrieve/birthdays/default.jpg"; 
// November 
  // Melbourne Cup 
    for(var i=2; i<7; i++) 
    { 
      myPictureArray[10][i]="../images/retrieve/birthdays/default.jpg"; 
    } 
  myPictureArray[10][11]="../images/retrieve/birthdays/default.jpg"; 
// December 
  myPictureArray[11][25]="../images/retrieve/birthdays/default.jpg";  
  myPictureArray[11][31]="../images/retrieve/birthdays/default.jpg"; 

  // month=0; day=26; // Uncomment this line to test  

// Display Picture 
  // If a [month, day] is set in array, use that as source, else use default 
  var pictureSRC = (myPictureArray[month][date])?myPictureArray[month][date]:"../images/retrieve/birthdays/default.jpg";  
  document.getElementById("myPicture").setAttribute("src",pictureSRC); 
} 
</SCRIPT> 

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
}
-->
</style></head>

<BODY onLoad="setDailyPic()"> 
<a href="">
<img id='myPicture' src='../images/retrieve/birthdays/default.jpg'></img>.
</a>

Keyboard1333

**MCForty** · 03-14-2012, 05:33 AM

Hi Keyboard, thanks for a quick reply and I'm sorry for reposting.

Forgive me for being ignorant but I'm not sure I understand the following:

HTML Code:

<BODY onLoad="setDailyPic()"> 
<a href="">
<img id='myPicture' src='../images/retrieve/birthdays/default.jpg'></img>.
</a>

Sure enough it makes the outputted image into a hyperlink but that would mean I have to input the respective link each day which defeats the object.

With the existing script, I'm programming different jpegs to be displayed daily i.e.

Code:

  myPictureArray[2][5]="../images/retrieve/birthdays/march05.jpg";
  myPictureArray[2][6]="../images/retrieve/birthdays/march06.jpg";
  myPictureArray[2][7]="../images/retrieve/birthdays/march07.jpg";
  myPictureArray[2][8]="../images/retrieve/birthdays/march08.jpg";
  myPictureArray[2][9]="../images/retrieve/birthdays/march09.jpg";
  myPictureArray[2][10]="../images/retrieve/birthdays/march10.jpg";
  myPictureArray[2][11]="../images/retrieve/birthdays/march11.jpg";
  myPictureArray[2][12]="../images/retrieve/birthdays/march12.jpg";
  myPictureArray[2][13]="../images/retrieve/birthdays/march13.jpg";
  myPictureArray[2][14]="../images/retrieve/birthdays/march14.jpg";
  myPictureArray[2][15]="../images/retrieve/birthdays/march15.jpg";
  myPictureArray[2][16]="../images/retrieve/birthdays/march16.jpg";

I'm doing it piecemeal but eventually I aim to do the whole 365 days, however, I want to programme the respective links as well as the images so that I can relax in the knowledge that the image and the link will be displayed daily without me having to do anything - other than programme them in, in the first instance.

Have I misinterpreted or misunderstood your reply?

I appreciate it anyway.

**keyboard** · 03-14-2012, 05:36 AM

Oh, sorry if I wasn't clear enough.
What do you want the hyperlink to? The image?
Please answer that and then I think I can fix it up.

**MCForty** · 03-14-2012, 05:48 AM

Sorry I wasn't explicit enough to begin with.

I need each image to have a link to an external webpage - perhaps a wikipedia page about the image's subject so that viewers can read more about them. That's what I'm trying to achieve.

**jscheuer1** · 03-14-2012, 08:05 AM

Here's a little something I just whipped up. It will look for the images in a single folder (images in this case) whose path can be set. For instance, as currently configured, on March 14 it will look for, in this order:

images/3-14-2012.jpg
images/3-14.jpg
images/3.jpg
images/default.gif

So if you have an image for that date in that year, it will grab it, next it will look for one for that date in any year. Next it will look for one for that month in any year. Finally it will retrieve the default image - the one to show if none of the others are found. It will show one and only one image, the first found that fit the descending criteria I just outlined. The link beneath the image will be to the wiki page for that date.

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.

////////////////////// 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',
		'default.gif'
	], 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 = 'http://en.wikipedia.org/wiki/' + months[dm - 1] + '_' + dd;
			document.getElementById('dailylink').innerHTML = '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>

Edit: I also have a version that can look in subfolders of the folder by month. It would make organizing the images easier. Let me know if you're interested.

**MCForty** · 03-14-2012, 03:48 PM

Hi John

I'm so grateful for your script, I can't thank you enough. However, it's not quite what I was after, but with my creative mind I know I can use it in other ways.

When I mentioned about the Wiki link before, that was just an example. The subjects of the images that I'm programming for each day of the year will have their indepth details stored on various websites so the 'wiki' + 1 wouldn't work in those instances - however, I now see I can in effect use your script as a 'this day in history feature'

Also, when the page loads up, it emits an alert dialogue box saying, "message from webpage: images/3-14-12.jpeg; images/3-12.jpeg; images/3.jpeg; images/default.jpeg" Is there any way to stop that?

In the original script that I posted, the programmer had an array i.e.

Code:

  myPictureArray[2][12]="../images/retrieve/birthdays/march12.jpg";
  myPictureArray[2][13]="../images/retrieve/birthdays/march13.jpg";
  myPictureArray[2][14]="../images/retrieve/birthdays/march14.jpg";
  myPictureArray[2][15]="../images/retrieve/birthdays/march15.jpg";
  myPictureArray[2][16]="../images/retrieve/birthdays/march16.jpg";

And all I was after was a seperate array linked to the picture array for corresponding hyperlinks for each date in the picture array e.g.

myPictureArray[2][12]="../images/retrieve/birthdays/march12.jpg";
hyperlink for picture[2][12]="http://www.somesiteorother.html

myPictureArray[2][13]="../images/retrieve/birthdays/march13.jpg";
hyperlink for picture[2][13]="http://www.somesiteorother.html

Something like that. I know what I'm after but I'm at a very elementary stage of language programming.

That said, I do like your code - indeed, would it be possible for your code to work without any images and just to update the wiki link - my creative mind is going into overdrive.

Anyway, thanks for everything, I look forward to your response

**jscheuer1** · 03-14-2012, 05:21 PM

You can disable the alert (which is only showing the hierarchy of filenames the script is looking for on that date) by changing diag to false:

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 = false; // true or false. true will alert a list of the images the code is looking for.

////////////////////// No Need to Edit Below Here //////////////////////

It's only intended as an aid in developing your image folder structure and image filenames.

The url for the link is controlled here:

Code:

		img.onload = function(){
			document.getElementById('dailyimage').src = this.src;
			document.getElementById('dailylink').href = 'http://en.wikipedia.org/wiki/' + months[dm - 1] + '_' + dd;
			document.getElementById('dailylink').innerHTML = 'Wiki Date: ' + months[dm - 1] + ' ' + dd;
		};

The first highlighted line creates the href, the second the text of the link. These can both be modified to respectively point wherever you want and to say whatever you want. By using the dm and dd tokens, you can pretty much have it point to any particular file for that date, and say anything with customization to that date without having to list out tons of filenames and accompanying texts.

Now about the image filename. Rather than having to write out tons of filenames, just use the folder structure and file naming convention of the demo. So instead of having - say:

Code:

 myPictureArray[2][12]="../images/retrieve/birthdays/march12.jpg";

You just need an image in the images folder named:

3-12.jpg

It will be selected automatically on that date.

**MCForty** · 03-14-2012, 06:44 PM

Ah, John, I'm forever in your debt and I'm sure that I'll be leaning upon you in the future.

I've haven't tried the modification yet because I'm a litte bit indisposed at present, but I will test it in the next few hours. However, I'm still a little unsure about the links.

Forgive me for my ineptitude but inasmuch that I'm intending to have arguably 365 different hyperlinks, wouldn't it follow that I'm still going to have tons of code in this section:

Code:

document.getElementById('dailylink').href = 'http://en.wikipedia.org/wiki/' + months[dm - 1] + '_' + dd;
			document.getElementById('dailylink').innerHTML = 'Wiki Date: ' + months[dm - 1] + ' ' + dd;
		};

The Wiki example I comprehend, if I was doing a this day in history feature that would be great because the Wiki site is dynamic and changes it's content by the day, but with the above code does it mean I would have to copy that aspect of the code 365 times with different links?

If you could demonstrate how two or three different links would be codified then I think that would be the end of the thread.

Just as an aside, can this script be modified just to display the link with no image attached to it? (I'm thinking of something else).

THANK you for all you help - sincerely.

**jscheuer1** · 03-14-2012, 10:40 PM

Well it does depend upon what you want your links to be. If they're on your server with this page, we could put them in the dailypages folder just off the folder your page with this code on it is in. You could name each one according to the date. So the code for the href line could read:

Code:

document.getElementById('dailylink').href = 'dailypages/' + months[dm - 1] + '_' + dd + 'htm';

For March 12, that would link to:

dailypages/March_12.htm

and so on for any date. The text that would be shown on the page under the image could be:

Code:

document.getElementById('dailylink').innerHTML = 'Messages For: ' + months[dm - 1] + ' ' + dd;

Which would read for March 12:

Messages For: March 12

and so on for any given date. Or:

Code:

document.getElementById('dailylink').innerHTML = 'Birthday Messages For: ' + months[dm - 1] + ' ' + dd;

which gives you:

Birthday Messages For: March 12

If you need something more specific than that, like the person's name, you would have to have an array elsewhere that could be pulled from. But I won't go into detail on that just yet. However, the entry in that array could be like (say the array is called birthdays):

Code:

birthdays[3][12] = 'Amy';

Then the innerHTML line could be:

Code:

document.getElementById('dailylink').innerHTML = 'Birthday Messages For ' + birthdays[dm][dd];

which for March 12 would then read:

Birthday Messages For Amy

Thread: Display an hyperlinked image daily - Help!

Thread Tools

Search Thread

Display an hyperlinked image daily - Help!

I'm not sure I understand

Indebted

Bookmarks

Bookmarks

Posting Permissions