SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Using JS Variables in the DOM

    Apologies if this ought to be in the Javascript forum. I felt it was caught somewhere between the two:

    Assuming I have a JS variable of a="myimage"
    and the DOM of my page contains an element:
    document.all.myimage.src

    What's the syntax to programatically write:
    document.all.a.src
    where "a" is treated as a variable and substituted for its value?


    Ad[Thanks]vance,

    Andy

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm surprised that nobody knows the answer to this one.
    If my original post is unclear, then I'll be happy to provide more information.

    Also, if the answer is "It can't be done" then feel free to tell me, although I fee sure I've seen it done using parts of an array.


    Andy

  3. #3
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try looking up document.getElementById().

    Sorry, not time to give a full detailed example right now.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2000
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an example:
    Does this make sense, what your after?

    <script language="javascript">

    var a = "Image_Name";

    document.images[a].src = "New_Image_Name"

    </script>

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your own example is right, though it's better that you use the W3C DOM for better x-browser compatibilty.
    The DOM you're using atthe moment is IE-specific.

    presuming you will be using the variable a to represent the (variable) id of an image, then the syntax is very similar to the IE DOM that you used in your example.

    Here I have simply substitued id for a so the relationship is clearer...

    Code:
    function imgSwap(id,imgSrc) {
    document.getElementById(id).src = imgSrc;
    }
    ...
    
    <img src="imgone.jpg" id="imgone">
    
    ...
    
    <a href="link.hml" onmouseover="imgSwap('imgone',''imgtwo.jpg')">Link text</a>
    I'm not sure how you will be stating and calling the variable, so I've shown the three basic parts of this reusable (variable-based) image handler.

    Hope it's what you're after.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's great! Thanks folks for all your help.
    I've learned a lot from this topic.

    The code I'm writing is to reset a rollover button on mouse-out, but rather than write a separate line of code for each button, I wanted to parameterize it based on the id of the button passed to the function.

    I've now successfully achieved this with your help.
    Code follows:

    Code:
    <head>
      <script language="javascript">
      <!--
    
        var sections = new Array("News", "Discography", "Media", "Projects", "Biography", "Feedback", "Thanks", "Elsewhere", "Live", "Shop");
        var max_buttons = "10"
    
        function button_hover_off(section){
          area=sections[section]
          for (var num_button=0; num_button<max_buttons; num_button++){
            if(sections[num_button]==area){
              var selected_button="But_" + area
              document.getElementById(selected_button).src = "nav_graphics\\Up_" + area + ".png";
            }																	
          }
        }
      //-->
      </script>
    </head>
    
    <body>
      <!------------ Button #1 ---------->
      <a href=#
        onmouseover="button_hover_on(0)"
        onmouseout="button_hover_off(0)"
        onclick="button_click_on(0)">
         <img id="But_News" border="0" src="nav_graphics\\Up_News.png">
      </a>
      <br>
    		
      <!------------ Button #2 ---------->
      <a href=#
       onmouseover="button_hover_on(1)"
       onmouseout="button_hover_off(1)"
       onclick="button_click_on(1)">
        <img id="But_Discography" border="0" src="nav_graphics\\Up_Discography.png">
      </a>
      <br>
    
    ....
    
    </body>
    Next thing I'm going to try is to write a for loop in the body of the page to display the buttons initially using document.write. This'll mean that I can write all ten buttons in about four lines of code therefore shrinking my code even further.

    I think it'll look something like this, but my code is still buggy:
    Code:
      <body>
        <script language="JavaScript">
        <!--
          for (var loop=0; loop<max_buttons; loop++){
            document.writeln("<a href=# onmouseover=\"button_hover_on(" + loop + ")\" onmouseout=\"button_hover_off(" + loop + ")\" onclick=\"button_click_on(" + loop + ")\">")
            document.writeln("<img id=\"But_" + sections[0] + " border=\"0\" src=\"nav_graphics\\Up_" + sections[loop] +".png\">")
            document.writeln("</a><br>")
          }
        //-->
        </script>
    		
    </body>

    Thanks again for your help,

    Andy


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
  •