Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript Coding with Array

    I have a code that I implemented on my site. I was wondering if there was a way to had an active link within the 'blurb' section? I'm not familiar with Javascript...

    var blurb = new Array();
    blurb[0]="Text 1"
    blurb[1]="Text 2"
    blurb[2]="Text 3"
    blurb[3]="Text 4"
    blurb[4]="Text 5<br>More text<br>Add a link"
    blurb[5]="www.link.com"

    for (i=0; i < aryImages.length; i++) {
    var preload = new Image();
    preload.src = aryImages[i];
    }

    function swap(imgIndex) {
    document['imgMain'].src = aryImages[imgIndex];
    TheText = blurb[imgIndex];
    document.getElementById('blurbarea').innerHTML=TheText;
    }

    Any help would be great!!

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Lightbulb Something to try...

    With a bit more code you could...
    Code:
    <html>
    <head>
    <title>Test</title>
    
    <script type="text/javascript">
    //<![CDATA[
    var blurb = new Array();
    blurb[0]="Text 1"
    blurb[1]="Text 2"
    blurb[2]="Text 3"
    blurb[3]="Text 4"
    blurb[4]="Text 5<br>More text<br>Add a link to"
            +" <a href='http://www.webdeveloper.com'>Webdeveloper.com</a>"
    blurb[5]="<a href='http://www.codingforums.com'>www.codingforums.com</a>"
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var aryImages = ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg','21.jpg'];
    
    for (i=0; i < aryImages.length; i++) {
     var preload = new Image();
     preload.src = aryImages[i];
    }
    
    function swap(imgIndex) {
     document['imgMain'].src = baseURL+aryImages[imgIndex];
     TheText = blurb[imgIndex];
     document.getElementById('blurbarea').innerHTML=TheText;
    }
    //]]>
    </script>
    </head>
    <body>
    <button onclick="swap(0)">Swap 0</button>
    <button onclick="swap(1)">Swap 1</button>
    <button onclick="swap(2)">Swap 2</button>
    <button onclick="swap(3)">Swap 3</button>
    <button onclick="swap(4)">Swap 4</button>
    <button onclick="swap(5)">Swap 5</button>
    
    <br><img id="imgMain" src="" alt="Main image"><br>
    <div id="blurbarea"></div>
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    shayp (12-12-2011)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    By "active link" I assume you mean an <a> link?

    Yes.

    Code:
    var allinfo = [
        ["image0.jpg", "blurb 0", "www.site0.com"],
        ["image1.jpg", "blurb 1", "www.site1.com"],
        ["image2.jpg", "blurb 2", "www.site2.com"]
    ];
    
    var preload = [];
    for ( var i = 0; i < allinfo.length; ++i )
    {
        var pic = new Image();
        pic.src = allinfo[i][0];
        preload.push(pic);
    }
    
    function swap(ix)
    {
        info = allinfo[ix];
        document.getElementById("imgMain").src = info[0];
        document.getElementById("linkMain").innerHTML = info[1];
        document.getElementById("linkMain").href = info[1];
    }
    ...
    <img id="imgMain" ... />
    <a id="linkMain" href="url goes here">blurb goes here</a>
    Like that?
    Last edited by Old Pedant; 12-12-2011 at 09:33 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    jmrker:

    blurb[4]="Text 5<br>More text<br>Add a link to"
    +" <a href='http://www.webdeveloper.com'>Webdeveloper.com</a>"
    blurb[5]="<a href='http://www.codingforums.com'>www.codingforums.com</a>"

    this was perfect. Thank you!
    Last edited by shayp; 12-12-2011 at 10:23 PM.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Thumbs up

    Quote Originally Posted by shayp View Post
    jmrker:

    blurb[4]="Text 5<br>More text<br>Add a link to"
    +" <a href='http://www.webdeveloper.com'>Webdeveloper.com</a>"
    blurb[5]="<a href='http://www.codingforums.com'>www.codingforums.com</a>"

    this was perfect. Thank you!
    You're most welcome.
    Happy to help.

    I tried to keep your original code as much as possible.
    Note, my own design would be closer to 'Old Pedant's solution.
    Reason...If you wanted to randomize display, it is much easier to co-ordinate
    one array with the information, rather than keeping track of multiple arrays.
    Can it be done...yes, but is it worth it to use multiple arrays, probably not.

    Good Luck!


  •  

    Posting Permissions

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