Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Display an hyperlinked image daily - Help!

  1. #1
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

  2. #2
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,588
    Thanks
    57
    Thanked 99 Times in 97 Posts
    Blog Entries
    4

    Default

    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
    Posting Tips + FAQ | Issues? Feel free to PM me
    - keyboard1333[at]gmail[dot]com

  3. #3
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default 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.
    Last edited by jscheuer1; 03-14-2012 at 07:53 AM. Reason: Format

  4. #4
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,588
    Thanks
    57
    Thanked 99 Times in 97 Posts
    Blog Entries
    4

    Default

    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.
    Posting Tips + FAQ | Issues? Feel free to PM me
    - keyboard1333[at]gmail[dot]com

  5. #5
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,370
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 03-14-2012 at 09:48 AM. Reason: fix typo in code, later add edit
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,370
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 03-14-2012 at 05:26 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Indebted

    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.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,370
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •