Display an hyperlinked image daily - Help!
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>
I'm not sure I understand
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.
