www.webdeveloper.com
Results 1 to 13 of 13

Thread: Add links to Javascript array

  1. #1
    Join Date
    Jan 2008
    Posts
    42

    Add links to Javascript array

    I have used this daily changing image script, it works well but I would like to add html links to each image. But I don't know how to do it.

    So instead of the array '1_side.jpg' '2_side.jpg' I would like somethinlike this:

    <a href="1_side.html" src='1_side.jpg'><a href="2_side.html" src='2_side.jpg'> and so on.

    Thanks in advance

    Here is the code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Daily Picture - Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">

    /* Daily Pic 2007 John Davenport Scheuer
    * This notice must remain for legal use */

    if(document.images&&document.getElementById)
    var daily={
    diurnal:true, //should script split between noon to midnight, midnight to noon if enough images are available? (true/false)
    path:'file://localhost/C:/sites/mysite/images/', //set absolute path to images here, and list them (minimum 31 required) on the next line
    pics:['1_side.jpg','2_side.jpg','3_side.jpg','5_side.jpg','8_side.jpg','leroy.jpg','leroy_o.jpg','lilac.jp g','lilac_sm.jpg','photo1.jpg','photo10.jpg','photo1_h1.jpg','photo1_h2.jpg','photo1_thumb.jpg','pho to2.jpg','photo2_h1.jpg','photo2_h2.jpg','photo2_thumb.jpg','photo3.jpg','photo3_h1.jpg','photo3_h2. jpg','photo3_thumb.jpg','photo4.jpg','photo4_h1.jpg','photo4_h2.jpg','photo4_thumb.jpg','photo5.jpg' ,'photo5_h1.jpg','photo5_h2.jpg','photo5_thumb.jpg','photo6.jpg','photo6_h1.jpg','photo6_h2.jpg','ph oto6_thumb.jpg','photo7.jpg','photo7_h1.jpg','photo7_h2.jpg','photo7_thumb.jpg','photo8.jpg','photo8 _h1.jpg','photo8_h2.jpg','photo8_lrg.jpg','photo8_thumb.jpg','photo9.jpg','photo9_h1.jpg','photo9_h2 .jpg','photo9_lrg.jpg','photo9_thumb.jpg','thumb1.jpg','thumb2.jpg','thumb3.jpg','35.gif','36.gif',' 37.gif','38.gif','40.gif','dynamicbook1.gif'],
    ///////////////// Stop Editing /////////////////
    tag:function(){return document.getElementById('dcontent');},
    d:new Date().getDate()-1,
    h:function(){return new Date().getHours()<12? 0 : 1;},
    img:document.createElement('img'),
    pic:function(){
    var d=daily;
    for (var a=[], i = 0; i < d.pics.length; ++i)
    a.push([d.pics[i++], d.pics[i]]);
    d.img.src=d.diurnal&&a[d.d][d.h()]? d.path+a[d.d][d.h()] : d.path+d.pics[d.d];
    d.img.title=d.img.alt='Daily Image';
    d.tag().appendChild(d.img);
    }};
    if(document.images&&document.getElementById)
    window.onload=daily.pic;
    </script>
    </head>
    <body>
    <div id="dcontent"></div>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    wrap each <img>, just like you would any other type of content, in a <a> element with the appropriate href set for each <a>.

  3. #3
    Join Date
    Jan 2008
    Posts
    42

    Thanks for your help

    Hi tirna

    Could you give me an example because the following code doesn't work:

    <a href="1_side.html" src='1_side.jpg'>

    Regards

    Martin

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    The <a> does not have a src attribute.

    This w3schools tute shows how to create html links.

    Replace the text they convert into a link with your appropriate <img> element.

  5. #5
    Join Date
    Jan 2008
    Posts
    42
    Hi, if you mean:

    '<a href='answers/image1.html'><img src='images/games/image1.jpg'></a>',

    Then it doesn't work, sorry

    Martin

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    That works for me so there must be something else going on in your code causing your problem.

  7. #7
    Join Date
    Jan 2008
    Posts
    42
    Can you please show me code so I can see where I am going wrong?

  8. #8
    Join Date
    Jan 2008
    Posts
    42
    Although I appreciate tirna' help, I think they are mistaken, I have tried every combination and I still can't get it working. So can anyone else help.

    Thanks in advance

  9. #9
    Join Date
    Jan 2009
    Posts
    3,346
    Quote Originally Posted by martin_b14 View Post
    Can you please show me code so I can see where I am going wrong?
    Can you show us your updated code so we can spot the error?

  10. #10
    Join Date
    Jan 2008
    Posts
    42

    Most current code

    Ok, after doing some research here is where i'm at:

    <!-- Begin
    today = new Date();
    day = today.getDay();
    arday = new Array
    { img: "http://www.snaptease.co.uk/images/games/aa01q.jpg",*url: "answers/aa01.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa02q.jpg",*url: "answers/aa02.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa03q.jpg",*url: "answers/aa03.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa04q.jpg",*url: "answers/aa04.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa05q.jpg",*url: "answers/aa05.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa06q.jpg",*url: "answers/aa06.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa07q.jpg",*url: "answers/aa07.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa08q.jpg",*url: "answers/aa08.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa09q.jpg",*url: "answers/aa09.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa10q.jpg",*url: "answers/aa10.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa11q.jpg",*url: "answers/aa11.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa12q.jpg",*url: "answers/aa12.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa13q.jpg",*url: "answers/aa13.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa14q.jpg",*url: "answers/aa14.html" },
    { img: "http://www.snaptease.co.uk/images/games/aa15q.jpg",*url: "answers/aa15.html" },
    { img: "http://www.snaptease.co.uk/images/games/am01q.jpg",*url: "answers/am01.html" },
    { img: "http://www.snaptease.co.uk/images/games/am02q.jpg",*url: "answers/am02.html" },
    { img: "http://www.snaptease.co.uk/images/games/am03q.jpg",*url: "answers/am03.html" },
    { img: "http://www.snaptease.co.uk/images/games/am04q.jpg",*url: "answers/am04.html" },
    { img: "http://www.snaptease.co.uk/images/games/am05q.jpg",*url: "answers/am05.html" },
    { img: "http://www.snaptease.co.uk/images/games/am06q.jpg",*url: "answers/am06.html" },
    { img: "http://www.snaptease.co.uk/images/games/am07q.jpg",*url: "answers/am07.html" },
    document.write(('<a href="' + arday[day].url + '"><img src="' + arday[day].img + '" /></a>');
    // End -->

  11. #11
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,672
    i can't believe that this code will work

  12. #12
    Join Date
    Jan 2008
    Posts
    42
    It doesn't work, that is why I'm posting for some help.

  13. #13
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,672
    Quote Originally Posted by martin_b14 View Post
    It doesn't work ...
    try this one

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Daily pic</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="JavaScript" type="text/javascript">
    <!-- Begin 
    var arday = new Array(
    {pic: "http://www.snaptease.co.uk/images/games/aa01q.jpg", lnk: "answers/aa01.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa02q.jpg", lnk: "answers/aa02.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa03q.jpg", lnk: "answers/aa03.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa04q.jpg", lnk: "answers/aa04.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa05q.jpg", lnk: "answers/aa05.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa06q.jpg", lnk: "answers/aa06.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa07q.jpg", lnk: "answers/aa07.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa08q.jpg", lnk: "answers/aa08.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa09q.jpg", lnk: "answers/aa09.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa10q.jpg", lnk: "answers/aa10.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa11q.jpg", lnk: "answers/aa11.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa12q.jpg", lnk: "answers/aa12.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa13q.jpg", lnk: "answers/aa13.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa14q.jpg", lnk: "answers/aa14.html" },
    {pic: "http://www.snaptease.co.uk/images/games/aa15q.jpg", lnk: "answers/aa15.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am01q.jpg", lnk: "answers/am01.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am02q.jpg", lnk: "answers/am02.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am03q.jpg", lnk: "answers/am03.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am04q.jpg", lnk: "answers/am04.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am05q.jpg", lnk: "answers/am05.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am06q.jpg", lnk: "answers/am06.html" },
    // temporary begin these are just double the previous line to fill the array up to 31
    {pic: "http://www.snaptease.co.uk/images/games/am06q.jpg", lnk: "answers/am06.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am06q.jpg", lnk: "answers/am06.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am06q.jpg", lnk: "answers/am06.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am06q.jpg", lnk: "answers/am06.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am06q.jpg", lnk: "answers/am06.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am06q.jpg", lnk: "answers/am06.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am06q.jpg", lnk: "answers/am06.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am06q.jpg", lnk: "answers/am06.html" },
    {pic: "http://www.snaptease.co.uk/images/games/am06q.jpg", lnk: "answers/am06.html" },
    // temporary end
    {pic: "http://www.snaptease.co.uk/images/games/am07q.jpg", lnk: "answers/am07.html" }
    );
    
    function showPic(){
    var today = new Date();
    var unik = today.getTime(); // to prevent caching (it's being discussed in the next your thread)
    var day = today.getDate() - 1; // because array indexes start from 0;
    document.getElementById('content').innerHTML = '<a href="' + arday[day]['lnk'] + '"><img src="' + arday[day]['pic'] +'?dummy='+unik + '" alt="daily pic" /></a>';
    }
    window.onload = showPic;
    // End -->
    </script>
    <style type="text/css">
    div#content{text-align:center;}
    div#content img{border:none;}
    </style>
    </head>
    <body>
    <div id="content">&nbsp;</div>
    </body>
    </html>
    Last edited by Padonak; 07-26-2010 at 12:39 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles