Web Analytics Made Easy -
StatCounter Loop through elements in page and set src - CodingForum

Announcement

Collapse
No announcement yet.

Loop through elements in page and set src

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Loop through elements in page and set src

    Hi All!
    Please excuse my java-newbieness, not really my forte'. I have a series of hyperlinks in my page for navigation, and i am trying to set the "src" for the link images dynamically. My web page:
    Code:
    <img src="buttons/contact_us.php_cmp_5-ambition010_vbtn_a.gif" width="200" height="46" border="0" alt="Contact Us" id="contact_us" name="MSFPnav12"></a>
    <script type='text/javascript' src='javascript/behaviors.js'></script>
    and then the behaviors.js:
    Code:
    if (document.getElementById) { 
    document.getElementById('contact_us').src= "../buttons/contact_us.php_cmp_5-ambition010_vbtn_a.gif";
    }
    but I keep getting "document.getelementbyId is null or not an object"
    What I really would like is for the behaviors.js code to loop through ALL the images in the <TD></TD> tag that contains these buttons and set the src depending on if there is a match or not. Can someone help me, or is there a better way?
    TIA,
    Andy
    (Management+Coworkers)<>Logic

  • #2
    Ummm...you say you have "a series of hyperlinks", but I don't see any hyperlink, at all, in there. For that matter, I don't even see any URL in there, other than the URL of the <img src=> property.

    ANyway...

    If you use document.getElementById( ) then the ID you are after must be *unique* in the document, otherwise the action is undefined. In MSIE, the docs say you will get a reference to the first element with that ID. But I dunno what other browsers do, because I just am careful not to make the mistake.

    If you want to get all <IMG> tags that are, in turn, inside <TD> tags that are, in turn, part of some given <TABLE>, then it's not hard.

    Say you have:
    Code:
    <table ID="TEST">
    <tr>
        <td>stuff</td>
        <td><img></td>
    </tr>
    <tr>
        <td><img></td>
        <td>other stuff</td>
    </tr>
    </table>
    Then you might code something like this:
    Code:
    setAllImages( inTable, toSrc ) 
    {
        var tbl = document.getElementById("TEST");
        var tds = tbl.getElementsByTagName("td");
        for ( var t = 0; t < tds.length; ++t )
        {
            var td = tds[t];
            var imgs = td.getElementsByTagName("img");
            if ( imgs != null ) 
            {
                 imgs[0].src = toSrc;
            }
        }
    }
    </script>
    And then you could invoke that via something like:
    Code:
    <body onload="setAllImages('TEST', 'images/foo.jpg');">
    Make sense?
    Be yourself. No one else is as qualified.

    Comment


    • #3
      Hey Old Pendant,
      Sorry for the confusing code; I posted only the part that wasn't working !
      Anyway, thanks for the code. I will work with it today and see if I can sort out the mess I have. Just in case I need more help, here is a bigger snip of the code:
      Code:
      <script language="JavaScript"><!--
      if(MSFPhover) { MSFPnav11n=MSFPpreload("../buttons/sitemap.htm_cmp_5-ambition010_vbtn.gif"); MSFPnav11h=MSFPpreload("../buttons/sitemap.htm_cmp_5-ambition010_vbtn_a.gif"); }
      // --></script>
      <a href="sitemap.htm" language="JavaScript" onmouseover="if(MSFPhover) document
      ['MSFPnav11'].src=MSFPnav11h.src" onmouseout="if(MSFPhover) document
      ['MSFPnav11'].src=MSFPnav11n.src"><img src="buttons/sitemap.htm_cmp_5-ambition010_vbtn.gif" width="200" height="46" border="0" alt="SiteMap" name="MSFPnav11"/></a><br/>
      <script language="JavaScript"><!--
      if((file_name_only(document.location.href))=='contact_us'){
      if(MSFPhover) { MSFPnav12n=MSFPpreload("buttons/contact_us.php_cmp_5-ambition010_vbtn_a.gif"); MSFPnav12h=MSFPpreload("buttons/contact_us.php_cmp_5-ambition010_vbtn_a.gif"); }
      }else{
      if(MSFPhover) { MSFPnav12n=MSFPpreload("buttons/contact_us.php_cmp_5-ambition010_vbtn.gif"); MSFPnav12h=MSFPpreload("buttons/contact_us.php_cmp_5-ambition010_vbtn_a.gif"); }
      }
      // --></script>
      <a href="contact_us.php" language="JavaScript" onclick="return pgcheck('contact_us')" onmouseover="if(MSFPhover) document
      ['MSFPnav12'].src=MSFPnav12h.src" onmouseout="if(MSFPhover) document
      ['MSFPnav12'].src=MSFPnav12n.src"><img src="buttons/contact_us.php_cmp_5-ambition010_vbtn_a.gif" width="200" height="46" border="0" alt="Contact Us" id="contact_us" name="MSFPnav12"></a>
      </td>
      This is just the MS Frontpage generated code for navigation; the site owners like the look of the mouseovers, and since Frontpage has already generated the button image code, they've decided to work with it. What I'm looking to do is take the code for all the buttons (there are 12) and get that code into a template. The code I'm asking for help on will identify the current page and set those buttons to the active image and let the hyperlink return false on click(so it does nothing) and return true for all the others...
      Andy
      (Management+Coworkers)<>Logic

      Comment


      • #4
        Ok,
        I'm stuck...
        When I run the loop you've shown me, the first image in the <td> gets changed, and that's it. I think I can fix it up to do what I want, buuuut...
        how do i get the image id and loop through that? Each button image id is unique, and what i am looking to do is loop through the ids, find the one that matches the document name, and set that source only. This code gives me the doc name:
        Code:
        var DocId = (document.location.href); 
        var number_1 = DocId.lastIndexOf('/') + 1 ;
        var number_2 = DocId.lastIndexOf('.') ;
        var thisdoc = DocId.substring(number_1, number_2) ;
        So what I'm looking to do is something like:
        Code:
        function setAllImages( inTable,toSrc ) 
        {
            var tbl = document.getElementById(inTable);
            var tds = tbl.getElementsByTagName("td");
             for ( var t = 0; t < tds.length; ++t )
            {
                var td = tds[t];
                var imgs = td.getElementsByTagName("img");
                
                if ( imgs != null )[COLOR="Red"]&& image id == var thisdoc from above[/COLOR]
                {
        [COLOR="Red"]set the image source to[/COLOR][COLOR="Blue"]'buttons/' [/COLOR][COLOR="Red"]& var thisdoc & [/COLOR][COLOR="Blue"]'_cmp_5-ambition010_vbtn_a.gif'[/COLOR]
                }
            }
        }
        but I cannot for the life of me get the image elements by id! I've tried td.getElementById("img"), document.getElementById("img"), etc...
        I know I've got SOMETHING screwed up, but damned if I can get it!
        (Management+Coworkers)<>Logic

        Comment


        • #5
          You need to get the "id" attribute for each image. Adding to Old Pedant's code,
          Code:
          setAllImages( inTable, toSrc ) 
          {
              var tbl = document.getElementById("TEST");
              var tds = tbl.getElementsByTagName("td");
              for ( var t = 0; t < tds.length; ++t )
              {
                  var td = tds[t];
                  var imgs = td.getElementsByTagName("img");
                  if ( imgs != null ) 
                  {
          [COLOR="Red"]             for ( var i = 0; i < imgs.length; ++i )
                       {
                          im = imgs[i];
                          imId = im.getAttribute("id");
                          // Add code to compare the image ID (imID) with the document name
                       }[/COLOR]
                  }
              }
          }
          John

          Comment


          • #6
            Hey Everyone,
            Thanks to your help I've got some working code, and can now set up all the button code in one template! With this function the pages will automatically find the correct button to set as already active!
            Code:
            <script type="text/javascript" language="javascript">
            function setAllImages( inTable ) 
            {
            var DocId = (document.location.pathname); 
            var number_2 = DocId.lastIndexOf('.') ; //find the filename/extension separator
            var number_3 = DocId.length ; //get the path length
            var thisdoc = DocId.substring(1, number_2) ; //remove the leading'/' and the extension(to compare ids)
            var fulldoc = DocId.substring(1, number_3) ; //remove just the leading'/'(for image source, but not really needed)
            var toSrc = 'buttons/'+fulldoc+'_cmp_5-ambition010_vbtn_a.gif'; //build the source location
                var tbl = document.getElementById(inTable); //move to the table we pass
                var tds = tbl.getElementsByTagName("td"); //select only the 'td's
                for ( var t = 0; t < tds.length; ++t ) //outer 'td' loop
                {
                    var td = tds[t];
                    var imgs = td.getElementsByTagName("img");
                    if ( imgs != null ) 
                    {
                         for ( var i = 0; i < imgs.length; ++i ) //inner loop for images
                         {
                           var im = imgs[i];
                           var imId = im.getAttribute("id"); //get the id of the current image
                           if(imId == thisdoc) 
                           {
                           imgs[i].src = toSrc;//we have a match, so set source
                           }
                         }
                    }
                }
            }
            </script>
            Thanks all around for everyone!
            Andy
            (Management+Coworkers)<>Logic

            Comment

            Working...
            X