PDA

View Full Version : 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:


<!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



<!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:


<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.
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.


<!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>

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.


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:


<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:


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:



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:


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:


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:


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:


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):


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

Then the innerHTML line could be:


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

which for March 12 would then read:

Birthday Messages For Amy

MCForty
03-15-2012, 01:00 AM
John, you're a genius, I cant thank you enough and I also must thank 'Keyboard 1333' for responding to my post in the first place. I did have this query elsewhere on other forums but nobody responded so I am really grateful.

John, the array which you mentioned at the end of your last post was what I was after all along and still would like to obtain in the future, that way I can use the links from external sites to populate the array and it would take the surfer there instantly for the indepth information about the subject. However, I can, and will still work with the other method of having the html pages folder on the server and having them link to those. It means more work for me creating the pages but it's not a big problem - indeed it may well be more beneficial in the long term because it would mean they don't leave the site - and anything to keep people on the site for a little bit longer is all good.

This thread and your solutions has given me so many ideas for different dynamic content on my site and I'm eternally in your debt so thank you once again. :)

jscheuer1
03-15-2012, 02:41 AM
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.):


<!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:


<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 //////////////////////

MCForty
03-16-2012, 12:50 AM
Hi John

My sincerest thanks and gratitude goes out to you, this is precisely what I was looking for all along and you've realized it for me, it works like a dream.

Cant thank you enough!

Bless
:)