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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    New Coder
    Join Date
    Jul 2013
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Image swapping multiple elements

    I have a page with lots of elements, the images of which are changed by mouseover/mouseout. I'd like to be able to put them into a group, so I can just image swap group A instead of using scripts that get each element with document.getElementById and tell each one to change to the new image, like I have now. All elements on the page are being swapped to the same image. All the page really does is highlight multiple areas when one of them is moused over.

    I've looked into document.getElementsByClass, document.getElementsByClassName, and document.getElementsByTag, but then I see that they don't work in particular browsers or need jQuery or what have you, and I'd really like to keep it simple rather than creating a monster of a page just for a simple image swap.

    Here's what I have now, that works:

    Code:
    <script>
    function C1on()
    {
    element=document.getElementById('C1p');
      {
      element.src="blue.png";
      }
    element=document.getElementById('C1c');
      {
      element.src="blue.png";
      }
    }
    </script>
    <script>
    function C1off()
    {
    element=document.getElementById('C1p');
      {
      element.src="blank.png";
      }
    element=document.getElementById('C1c');
      {
      element.src="blank.png";
      }
    }
    </script>
    Called with:

    Code:
    <td><img id="C1p" onmouseover="C1on()"
    onmouseout="C1off()" src="blank.png" width="63" height="63"></td>
    So on mouseover it gets C1p and changes it to the highlight image, gets C1c and changes it, plus all the rest if I had chosen to continue along that path instead of asking for a new method. On mouseout, it changes each element back to the blank image.

    Someone told me to use this code snippet:

    Code:
    document.getElementsByClass('class_name').addEventListener("mouseover", function(event){event.target.src = "blue.png"}, false);
    And call it with this:

    Code:
    <img class="C1">
    but I have no idea if it needs to be in a script, or a function, or somewhere else, or if it needs any other new code in the page to work. "Document ready" was mentioned, but I don't know what that is or how to use it.

    So, is there a concise, simple way to accomplish what I'm looking for, or do I have to choose between labeling each element to change one by one on the one hand and making a page that calls other pages and arrays and whatnot on the other?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Can you show the layout of the page? That is, for example, *WHERE* is C1c relative to C1p, etc.??

    I am wondering if you can't do this entirely without JavaScript, just using CSS. But it depends on the page layout.
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    And if we can't do it all with CSS, then can you show *ALL* the groupings? Or at least enough of them that I can see a pattern?
    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 Coder
    Join Date
    Jul 2013
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    It's set up as a bunch of tables, and each one has one element from each group. So, I would have table 1, 2, and 3, and table 1 has elements A1, B1, and C1, table 2 has A2, B2, C2, and so on. When I mouse over A1, it highlights the "A group" element in each table: A1, A2, A3, and so on.

    Is that helpful as far as layout and grouping?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Yeah, I don't see how to do that all in CSS, but pretty trivial in JS coding.

    But that also doesn't match what you showed in the first post, where you have ID's "C1p" and "C1c".

    So are A1, B1, C1, etc., class names??
    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.

  • #6
    New Coder
    Join Date
    Jul 2013
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Yeah, I don't see how to do that all in CSS, but pretty trivial in JS coding.

    But that also doesn't match what you showed in the first post, where you have ID's "C1p" and "C1c".

    So are A1, B1, C1, etc., class names??
    Sorry, I just used "A1 B1 C1" for a general explanation. Yes, the actual names right now are C1p, C1c, and then more if I have to do it that way (C1h, C1g, etc.). I'd like to be able to just call them all "C1" as they'll all be swapped to an identical image and are always called together, but if multiple elements are given the same ID, document.getElementById swaps the first one it finds and then stops. So I'm looking for something that'll keep going and change all elements with that label.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Name, then.

    Names don't need to be unique. And getElementsByName() is supported by *all* browsers.

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <table id="table1">
    <tr>
        <td><img name="groupA" src="blue.png"/></td>
        <td><img name="groupB" src="red.png"/></td>
        <td><img name="groupC" src="orang.png"/></td>
    </tr>
    </table>
    <table id="table2">
    <tr>
        <td><img name="groupA" src="blue.png"/></td>
        <td><img name="groupB" src="red.png"/></td>
        <td><img name="groupC" src="orang.png"/></td>
    </tr>
    </table>
    <table id="table3">
    <tr>
        <td><img name="groupA" src="blue.png"/></td>
        <td><img name="groupB" src="red.png"/></td>
        <td><img name="groupC" src="orang.png"/></td>
    </tr>
    </table>
    
    <script type="text/javascript">
    (
      function( )
      {
          function attachAll( inTable )
          {
              var pix = document.getElementById(inTable).getElementsByTagName("img");
              for ( var p = 0; p < pix.length; ++p ) 
              { 
                  var pic = pix[p];
                  pic.onmouseover = doMouseOver;
                  pic.onmouseout  = doMouseOut:
                  pic.setAttribute("originalSrc",pic.src);
              }
          }
          attachAll("table1");
          attachAll("table2");
          attachAll("table3");
          
          function doMouseOver( )
          {
              var pix = document.getElementsByName(this.name);
              for ( var p = 0; p < pix.length; ++p )
              {
                  pix[p].src = "blank.png";
              }
          }
          function doMouseOut( )
          {
              var pix = document.getElementsByName(this.name);
              for ( var p = 0; p < pix.length; ++p )
              {
                  pix[p].src = pix[p].getAttribute("originalSrc");
              }
          }
      }
    )();
    </script>
    </body>
    </html>
    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.

  • Users who have thanked Old Pedant for this post:

    TigerhawkT3 (09-04-2013)

  • #8
    New Coder
    Join Date
    Jul 2013
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I had a go at that getElementsByName method, but it didn't seem to work. It displays a table with the varicolored squares, but doesn't change them to anything on mouseover. I changed blue.png to bluesquare.png, red.png to redsquare.png, orang.png to orangesquare.png, and blank.png to whitesquare.png. All the images are the same size. I've uploaded the page to my website so you can investigate if you like.

    http://www.tigerhawkt3.com/mouseovertest/index.html

    But, as far as I understand it, the first function gets every element, and does the doMouseOver function on mouseover, and the doMouseOut function on mouseout. The second function gets all the elements that share the same name and changes their image to blank.png (whitesquare.png in the linked page). The last function changes everything back to the original image. Is that about right, or am I missing a key element?

    I really appreciate your showing the entire code so I can see where everything needs to go and how it should look; it's a great help.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Learn to use a debugger!

    First step out of the box, using F12 on your page, I get a syntax error on line 37. Which is:
    Code:
                pic.onmouseout  = doMouseOut:
    You have a COLON there, where a SEMICOLON is needed.

    Fix that one error and it works.

    If you haven't learned to use a debugger, it's past time. Just hit the F12 key in your browser (for Chrome or MSIE 8+) and look at the CONSOLE tab to see your errors. After that, you can start to learn all the really powerful features of the various JS debuggers. I prefer Chrome's, but any of them will do.
    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.

  • Users who have thanked Old Pedant for this post:

    TigerhawkT3 (09-04-2013)

  • #10
    New Coder
    Join Date
    Jul 2013
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Learn to use a debugger!

    First step out of the box, using F12 on your page, I get a syntax error on line 37. Which is:
    Code:
                pic.onmouseout  = doMouseOut:
    You have a COLON there, where a SEMICOLON is needed.

    Fix that one error and it works.

    If you haven't learned to use a debugger, it's past time. Just hit the F12 key in your browser (for Chrome or MSIE 8+) and look at the CONSOLE tab to see your errors. After that, you can start to learn all the really powerful features of the various JS debuggers. I prefer Chrome's, but any of them will do.
    Oh. Oops.

    My last reply ended up taking nearly a week to get approved for posting, so I went ahead and just did the project the way I originally planned:

    Chrome/Safari version: http://www.tigerhawkt3.com/dviice/dv...omesafari.html
    Any browser: http://www.tigerhawkt3.com/dviice/dv...atibility.html

    I've already gotten a request for a new feature. Someone suggested that I add a way to choose the key of the harmonica, and I thought perhaps I could also swap the other instruments as well. I'm going to use the set content feature in jquery, with .html. However, that would run into the problem of each "document.getElementById" element needing to be both unique and present (if an element isn't there, the function stops - maybe there's a way to get it to ignore failures and continue through the rest of the function, but I don't know it). So this proper way of doing things will come in very handy.

    TL;DR: Thank you! I will use that.

  • #11
    New Coder
    Join Date
    Jul 2013
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I tried responding a few days ago, but it doesn't seem to have gone through yet. I suppose it'll be allowed through eventually, just like the previous post. And now I'll post this, and it'll show up one day. Is there something I'm supposed to be doing to make my posts show up more quickly?

    Anyway, I have an update. I don't quite remember what I put in my last post that hasn't showed up yet, but I've been working on an improvement to the webpage. It uses jQuery and AJAX to replace parts of the code with text from another file when you click the appropriate button. It does that, but creates a new problem: mousing over an element in an AJAX-loaded section doesn't highlight anything. Mousing over an element from the original content (instead of AJAX-loaded content) highlights everything properly, in all the right places, but, on mouseout, the AJAX-loaded stuff doesn't un-highlight and just stays lit up until you refresh the page or get new AJAX content.

    It plays all sounds (with the Web Audio API, in Chrome) properly, in both the original content and the AJAX-loaded content.

    Is this something to do with the highlighting function somehow not seeing the new tables after they're loaded? Do I need to attach (with attachAll) something else? Or should I reload the highlighting function after each AJAX action?

    One more thing: AJAX loading works when I put the page on my website, but not if I test it on my local computer. Is that normal? Or is there something I'm supposed to do to make it work?

  • #12
    New Coder
    Join Date
    Jul 2013
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Would probably be good to link to the new page. :P

    http://www.tigerhawkt3.com/dviice/dv...safari-v2.html

  • #13
    New Coder
    Join Date
    Jul 2013
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Any suggestions on what to do to make the highlighting function work with AJAX-loaded content? I don't know what to try.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    *PURE GUESS*

    First of all, I'd never load new <table> content the way you are. But if it works, I guess it works.

    But I would think that, *AFTER* doing
    Code:
    $("#i3guitar").click(
        function()
        { 
            $("#instrument3").load("instrumentschromesafari/guitar.txt");  
        }
    );
    (just for one example) that you *THEN* need to call
    Code:
         attachAll("instrument3");
    How else will the system know to attach the events to the new table contents???

    I don't use jQuery, so I'm not sure how exactly you will do that. But *if* I read the jQuery docs correctly, I think it would need to be something like:
    Code:
    $("#i3guitar").click(
        function()
        { 
            $("#instrument3").load(
                "instrumentschromesafari/guitar.txt",
                "",
                function( ) { attachAll("instrument3"); }
            );  
        }
    );
    Since you have to repeat this so often, I'd probably create a wrapper function:
    Code:
    function loadTable( tnum, file )
    {
            var tid = "instrument" + tnum;
            $("#" + tid).load(
                "instrumentschromesafari/" + file,
                "",
                function( ) { attachAll(tid); }
            );  
    }
    and then code
    Code:
    $("#i3guitar").click(function( ) { loadTable(3,"guitar.txt"); };
    Maybe.
    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.

  • Users who have thanked Old Pedant for this post:

    TigerhawkT3 (09-04-2013)

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    (Actually, I wouldn't write it in jQuery, at all. It's not buying you enough to matter. But that's me.)
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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