SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Array Help...

    Okay, here is the code that I have so far:

    <xmp><script language="javascript" type="text/javascript"><!--
    var sampleImgs = new Array();
    sampleImgs[0] = "sample0.jpg";
    sampleImgs[1] = "sample1.jpg";
    sampleImgs[2] = "sample2.jpg";
    sampleImgs[3] = "sample3.jpg";
    --></script></xmp>

    Minus the xmp tag of course.

    This works to display the images. However, I would like each of the displayed images to be image links. How might I go about this aside from having to go back and designing a new page for every single image? A simple a href doesn't seem to do the trick as I didn't expect it to.

    Thanks, Bryan

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, for readability sake, you should organize your array using the literal syntax:
    Code:
    var sampleImages = ['sample0.jpg', 'sample1.jpg', 'sample2.jpg', 'sample3.jpg'];
    Since you want these to be links (which point to themselves I presume??), I'm guessing you mean this:

    Code:
    for ( var i=0, img, links=[]; img=sampleImages[i]; i++) {
      links.push('<a href="' + img + '"><img src="' + img + '" /></a>');
    }
    links.join("");
    You can now use the *links* variable and dump that into an element.

  3. #3
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I would like to have the links point outwards, how would I go about that? Here is what I'm playing around with:

    <script language="javascript" type="text/javascript"><!--
    var sampleImgs = new Array();
    sampleImgs[0] = "sample0.jpg";
    sampleImgs[1] = "sample1.jpg";
    sampleImgs[2] = "sample2.jpg";
    sampleImgs[3] = "sample3.jpg";
    document.write('<a href="http://www.w3.org/" target="_SELF"><img src="'+sampleImgs[0]+'" border=0></a>');
    --></script>

    Thanks, Bryan

  4. #4
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    links pointing outward? what is wrong with what you have now? are you getting errors? Nothing looks wrong with it, despite the frowned upon document.write and the target attribute and border... :\

  5. #5
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, outward to an external link, not inward to an internal link. It's not appropriately assigning the link to sampleImgs[0]. It's either just messed up or it randomly gives the link to some other image. There's not really all that much complexity to the code on this page, nothing for it to conflict with, and the server fully supports JavaScript.

  6. #6
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so do you want target="_blank" ??

  7. #7
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, this code is not working:

    <script language="javascript" type="text/javascript"><!--
    var sampleImgs = new Array();
    sampleImgs[0] = "sample0.jpg";
    sampleImgs[1] = "sample1.jpg";
    sampleImgs[2] = "sample2.jpg";
    sampleImgs[3] = "sample3.jpg";
    document.write('<a href="http://www.w3.org/" target="_SELF"><img src="'+sampleImgs[0]+'" border=0></a>');
    --></script>

    It wouldn't matter changing SELF to BLANK as the code isn't working, I wouldn't want to do that anyways as I hate when links open new windows. Go ahead and take a look at what I'm working on:

    http://www.edgygirl.com/edgy/gallery.php


    Now, when someone chooses a frame that they like form the drop down menu, I'd like the image to the right to be a clickable link, to link to whatever URL I choose to put in the code. Does this make sense?

    Thanks, Bryan

  8. #8
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, you've posted the same code three times in a row. (I got it )
    A quick tip, you can't use document.write after the page has finished writing. Anything from that point on, you'll have to create elements and append text nodes, or simply use the innerHTML method.

    For example
    Code:
    var example = document.getElementById('picture');
    example.innerHTML = '<a href="http://google.com"><img src="' + sampleImgs[0] + '"></a>';

  9. #9
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I certainly trust your judgment and knowledge seeing how you're a Google employee and I've taken a look at your website that has a PageRank of 6. I appreciate your help. However, I think it might be best if I take another route on this one and I don't want to take up anymore of your time. And I'll refrain from showing you any more code.

    Thanks, Bryan

  10. #10
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey bro it's all good I don't always get everything right, or read everything correctly. Maybe someone else can chip in and give a hand.

  11. #11
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,804
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Hi Bryan

    Maybe something simple like:
    Code:
    <script type="text/javascript">
    
    var sampleImages 	= ['69296_fat_elvis.jpg', '81451_76062990.jpg', '339673_15349052.jpg', '393327_52425535.jpg'];
    var sampleLinks 	= ['http://mypage.com', 'http://mypage.com', 'http://mypage.com', 'http://mypage.com'];
    
    	function displayImage(id) {
    		var displayDiv = document.getElementById('displayDiv');
    		displayDiv.innerHTML = '<a href="' + sampleLinks[id] + '"><img src="thumbs/' + sampleImages[id] + '"></a>';	
    	}
    
    </script>
    <p onmouseover="displayImage(0);">Image 0</p>
    <p onmouseover="displayImage(1);">Image 1</p>
    <p onmouseover="displayImage(2);">Image 2</p>
    <p onmouseover="displayImage(3);">Image 3</p>
    <div id="displayDiv">DISPLAY DIV</div>
    Where div id="displayDiv" is the div with your large picture in it.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by calmestghost View Post
    No, this code is not working:
    Go ahead and take a look at what I'm working on:

    http://www.edgygirl.com/edgy/gallery.php


    Now, when someone chooses a frame that they like form the drop down menu, I'd like the image to the right to be a clickable link, to link to whatever URL I choose to put in the code. Does this make sense?
    I see what you're doing: I don't like how you're doing it (it's very brittle and hard to handle when growth occurs), but I see what you're after there.

    You'll want to start by placing a link around the image to the right.

    HTML Code:
    <a id="biglink" href="path/file1.ext">
      <img src="images/gallery/sample_1.jpg" class="bigimage" id="bigimage" vspace="3">
    </a>
    Then use some javascript to change the anchor link.
    Code JavaScript:
    document.getElementById['biglink'].setAttribute('href', 'path/file2.ext');
    --
    Paul Wilkins
    Last edited by paul_wilkins; Dec 4, 2007 at 12:37.

  13. #13
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pmw57

    What you're showing me seems promising, but how would I set it so that each new image, when selected from the drop down menu, would link to a different URL?

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by calmestghost View Post
    pmw57

    What you're showing me seems promising, but how would I set it so that each new image, when selected from the drop down menu, would link to a different URL?
    You would use onclick so that when someone selects that option, the script is performed.

    Code HTML4Strict:
    <option value="0" onclick="dosomething();">affectionate</option>

  15. #15
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To be honest, I really don't like the way that this is coded either. This isn't my original work, I'm simply trying to help a friend out. Not to knock JavaScript (I really do like it), but I only use it when necessary, for pop-ups, etc. I use CSS and HTML as my primary languages, which would have made this project a walk. Everyone keeps mentioning how poorly this was coded and I have to agree. There is really no breathing room at all with this code, it wasn't really left open for easy editing, it only had one purpose, exactly what it's doing now. See here's the problem there are no traditional option values, it imports them from a JS file. So aside from redesigning this gallery (which needs to be done, otherwise I can't really apply any of the help you guys have given me), I'm going to have to go a different route. I appreciate all the help.

    Thanks, Bryan

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by calmestghost View Post
    See here's the problem there are no traditional option values, it imports them from a JS file. So aside from redesigning this gallery (which needs to be done, otherwise I can't really apply any of the help you guys have given me), I'm going to have to go a different route. I appreciate all the help.
    Let's approach this from a different direction then. You were wanting the select box to change the location of the picture when someone clicks on it.

    Give us some examples of what you want to happen. When this option is selected people should go here, and when that option is selected they should go there.

  17. #17
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are 41 options in the select box, now when you click on any one of them that image is displayed to the right. Now that larger image displayed to right, I would like that to be a clickable image link to link to whatever URL I want, http://www.w3.org/, etc. I would like to do this for all 41 images, so for which ever option I choose there would have to be a unique URL assigned for it.

    Someone chooses:

    affectionate >> Image Displayed Links To: http://www.google.com/
    alluring >> Image Displayed Links To: http://www.w3.org/
    amazing >> Image Displayed Links To: http://dictionary.reference.com/

    The file that is used to collect all option names is found at:
    http://www.edgygirl.com/edgy/includes/names.js

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by calmestghost View Post
    Someone chooses:

    affectionate >> Image Displayed Links To: http://www.google.com/
    alluring >> Image Displayed Links To: http://www.w3.org/
    amazing >> Image Displayed Links To: http://dictionary.reference.com/

    The file that is used to collect all option names is found at:
    http://www.edgygirl.com/edgy/includes/names.js
    If there is some kind of pattern to the link then that can be easily done by javascript.

    If there is no pattern, as indeed you appear to be implying, that information will have to be provided somehow, perhaps with the names.js file.

    Now instead of redesigning everything (as we are all agreed that it should be) you can add another array to the names.js file. As the names array is called frameNames you may want to call this array frameLinks, and in that array have the destination for each image.

    Then the javascript can get the image from frameNames[f] and the location can be got from frameLinks[f].

    Code JavaScript:
    function setFrameLink(link) {
      document.getElementById['biglink'].setAttribute('href', link);
    }
    // and use the function elsewhere, such as
    myHTML += '<option value="' + f + '" ' +
      'onclick="setFrameLink(' + frameLinks[f] + ');">' +
      frameNames[f] + '</option>';

  19. #19
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm really not sure what to say, I have no idea how to implement this code. I tried and failed, of course. I have no idea where to place the URL? I have no idea where to place the image/array name? Do I need to place any additional code on the actual Gallery page, or can I control what I'd like to do strictly from the JS file? Here is where I placed the code in the JS file:

    Code JavaScript:
    function getArrayNumber(arrayName,arrayElemName) {
    	var arrayNo = null;
    	for (var i=0; i < arrayName.length; i++) {
    		if (arrayName[i] == arrayElemName)
    			arrayNo = i;
    	}
    	return arrayNo;
     
    function setFrameLink(link) {
      document.getElementById['biglink'].setAttribute('href', link);
    }
    // and use the function elsewhere, such as
    myHTML += '<option value="' + f + '" ' +
      'onclick="setFrameLink(' + frameLinks[f] + ');">' +
      frameNames[f] + '</option>';

    Now, for each additional link, would I have to do something like this:

    Code JavaScript:
    function setFrameLink(link) {
      document.getElementById['biglink'].setAttribute('href', link);
    }
    // and use the function elsewhere, such as
    myHTML += '<option value="' + f + '" ' +
      'onclick="setFrameLink(' + frameLinks[f] + ');">' +
      frameNames[f] + '</option>';
     
    myHTML += '<option value="' + f + '" ' +
      'onclick="setFrameLink(' + frameLinks[f] + ');">' +
      frameNames[f] + '</option>';
     
    myHTML += '<option value="' + f + '" ' +
      'onclick="setFrameLink(' + frameLinks[f] + ');">' +
      frameNames[f] + '</option>';

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)

    Post

    Quote Originally Posted by calmestghost View Post
    I'm really not sure what to say, I have no idea how to implement this code. I tried and failed, of course. I have no idea where to place the URL? I have no idea where to place the image/array name? Do I need to place any additional code on the actual Gallery page, or can I control what I'd like to do strictly from the JS file?
    The JS file currently contains the array of names, so the array of matching links can be placed there too.

    Code JavaScript:
    var frameNames = new Array(
      "affectionate",
      "alluring",
      "amazing",
    // snip
      "voluptuous");
     
    var frameLinks = new Array(
      "http://www.affectionate.com/",
      "http://www.alluring.com/",
      "http://www.amazing.com/",
    // snip
      "http://www.voluptuous.com/");

    Add a link around the image with an appropriate id attribute.

    Code HTML4Strict:
    <a id="biglink" href="http://www.defaultlink.com/">
      <img src="images/gallery/sample_1.jpg" class="bigimage" id="bigimage" name="bigimage" vspace="3">
    </a>

    The existing javascript on the page uses the following code.

    Code JavaScript:
      myHTML = '';
      for (var f=0; f < frameNames.length; f++) {
        myHTML += '<option value="' + f + '">' + frameNames[f] + '</option>';
      }
      document.write(myHTML);

    I *want* to add the function that sets the link to an external js file, but to keep things simple for now, the setLinkById() can go just above the code that's going to use it.

    Add the setLinkById() function and change the option output as follows

    Code JavaScript:
    function setLinkById(id, link) {
      document.getElementById(id).setAttribute('href', link);
    }
      myHTML = '';
      for (var f=0; f < frameNames.length; f++) {
        myHTML += '<option value="' + f + '"' +
            ' onclick="' + setLinkById('biglink', frameLink(f)) + '">' + frameNames[f] + '</option>';
      }
      document.write(myHTML);

  21. #21
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, everything is in place except for the last part. Am I suppose to paste this:

    Code JavaScript:
    function setLinkById(id, link) {
      document.getElementById(id).setAttribute('href', link);
    }
      myHTML = '';
      for (var f=0; f < frameNames.length; f++) {
        myHTML += '<option value="' + f + '"' +
            ' onclick="' + setLinkById('biglink', frameLink(f)) + '">' + frameNames[f] + '</option>';
      }
      document.write(myHTML);

    Over this:

    Code JavaScript:
    myHTML = '';
      for (var f=0; f < frameNames.length; f++) {
        myHTML += '<option value="' + f + '">' + frameNames[f] + '</option>';
      }
      document.write(myHTML);

    I tried that and just placing it above the original code. Both end with an error of there being no options in the select box. Was I suppose to change or add anything myself for functionality purposes? Aside from changing the URL's and adding more. If so, I'm unclear on what. Maybe you can take a look again to make sure I'm doing everything correctly:

    http://www.edgygirl.com/edgy/gallery.php

    http://www.edgygirl.com/edgy/includes/names.js

    The help you're giving me is immeasurable.

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by calmestghost View Post
    I tried that and just placing it above the original code. Both end with an error of there being no options in the select box. Was I suppose to change or add anything myself for functionality purposes? Aside from changing the URL's and adding more. If so, I'm unclear on what. Maybe you can take a look again to make sure I'm doing everything correctly:

    http://www.edgygirl.com/edgy/gallery.php

    http://www.edgygirl.com/edgy/includes/names.js

    The help you're giving me is immeasurable.
    The code I wrote has been of the top of my head and is untested. The tested code is as follows

    Code JavaScript:
    function setLinkById(id, link) {
      document.getElementById(id).setAttribute('href', link);
    }
      myHTML = '';
      for (var f=0; f < frameNames.length; f++) {
        myHTML += '<option value="' + f + '"' + ' onclick="setLinkById(\'biglink\', frameLinks[f])">' + frameNames[f] + '</option>';
      }
      document.write(myHTML);

    You will also need to update the names.js fils so that there are an identical number of array items for frameNames and frameLinks.

  23. #23
    SitePoint Zealot calmestghost's Avatar
    Join Date
    Dec 2007
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much. I appreciate all the help. This all appears to be solid.

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The next step from here could be to optimise things, so that instead of the following:

    Code JavaScript:
    frameNames = new Array(
      'firstname',
      'secondname',
    // ...
    );
    frameLinks = new Array(
      'firstlink',
      'secondlink',
    // ...
    );
    name = frameNames[n];
    link = frameLinks[n];

    This could be better by using an object literal array instead.

    Code JavaScript:
    frames = [
      {name: 'firstname', link: 'firstlink'},
      {name: 'secondname', link: 'secondlink'},
    // ...
    ];
    name = frames[n].name;
    link = frames[n].link;


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
  •