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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using Mouse Over to Change Multiple Classes

    Alright, so I have a feature that I would like to set up on my site that I'm trying to set up using JavaScript and I've really gotten myself into a rut. To explain what I'm trying to accomplish, let me put forth a simplified example:

    Let's say we have two tables, Table 1 and Table 2. Both tables have one row and three columns. In Table 1 all have a class that makes their background color a default white. In Table 2 there is an image in each column. The first is colored red, the second blue, and the third green. Lets show this in code:
    Code:
    <!--Table1-->
    <table>
      <tr>
        <td class="white">
        </td>
        <td class="white">
        </td>
        <td class="white">
        </td>
      </tr>
    </table>
    
    <!--Table2-->
    <table>
      <tr>
        <td>
        <img src="red.jpg" />
        </td>
        <td>
        <img src="blue.jpg" />
        </td>
        <td>
        <img src="green.jpg" />
        </td>
      </tr>
    </table>
    Now that we have the basic layout set up, I'll tell you what I'd like to be accomplished. What I'd like to happen is that when you scroll over "red.jpg", the background color of cell 1 in Table 1 turns red. Then if I were to scroll over "blue.jpg", cell 1 and cell 2 in Table 1 turns blue. Then, when I scroll over "green.jpg", cell 1 and cell 3 turn green. Then, on a mouse out, everything turns back to standard white.

    Now I understand that it is possible to rollover one image and change multiple others on a page, and I know that by rolling over an image, one can change class names, but I have yet to see a script that can duplicate what I have above. Especially when I want multiple table cells to have multiple different outcomes. I know there are limitations to having multiple id tags, etc. but I think I have partially worked out a way this situation could work.

    Because of how class names work, if multiple classes define the same attribute, whichever class is listed first in an object's class attribute is what actually shows up. To simplify, say I have four classes, white, red, blue, and green, and each one defines the background color to their respective colors. Then I also have this code:
    Code:
    <table>
      <tr>
        <td class="white red blue green">
        </td>
      </tr>
    </table>
    The only background color that would show up would be white, even though the other classes are listed. If the first one listed was red, it would be red, etc.

    My point is, I could use this to modify my above code thusly:
    Code:
    <!--Table1-->
    <table>
      <tr>
        <td class="white red blue green">
        </td>
        <td class="white blue">
        </td>
        <td class="white green">
        </td>
      </tr>
    </table>
    
    <!--Table2-->
    <table>
      <tr>
        <td>
        <img src="red.jpg" />
        </td>
        <td>
        <img src="blue.jpg" />
        </td>
        <td>
        <img src="green.jpg" />
        </td>
      </tr>
    </table>
    Now, theoretically, the stage should be set to write code that when I roll over "red.jpg" it would find any cells that have the string "red" included in their class attribute and then change that attribute to "red." Then, once I would mouse out, it would change back. Then, if I moused over "blue.jpg", all cells with "blue" in their class name would get changed to blue, etc.

    In theory, this seems plausible. But once I actually start implementing any JavaScript, it falls apart. I guess the main question I am asking is if this sounds feasible or doable or am I just wasting time? And also, if this does sound feasible, does anyone have any tips or pointers that might help me figure out how I can actually accomplish this?

    If any of this seems too confusing, just let me know and I will try and clarify.

    Thanks.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .white {
      background-Color:white;
    }
    .red {
      background-Color:red;
    }
    .green {
      background-Color:green;
    }
    .blue {
      background-Color:blue;
    }
    
    /*]]>*/
    </style><script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function Test(id,cls){
     var table=document.getElementById(id);
     if (!table.cls){
      table.cls=cls;
      var rows=table.rows;
      for (var rows=table.rows,cols,zxc0=0;zxc0<rows.length;zxc0++){
       cols=rows[zxc0].cells;
       for (var zxc0a=0;zxc0a<cols.length;zxc0a++){
        if (cols[zxc0a].className){
         cols[zxc0a].saveclass=cols[zxc0a].className;
        }
       }
      }
     }
      var rows=table.rows;
      for (var rows=table.rows,cols,zxc0=0;zxc0<rows.length;zxc0++){
       cols=rows[zxc0].cells;
       for (var zxc0a=0;zxc0a<cols.length;zxc0a++){
        if (cols[zxc0a].className){
         cols[zxc0a].className=table.cls;
         if (cols[zxc0a].saveclass.indexOf(cls)>-1){
          cols[zxc0a].className=cls;
         }
        }
       }
      }
    }
    /*]]>*/
    </script></head>
    
    <body onload="Test('t1','white');">
    <!--Table1-->
    <table id="t1" >
      <tr>
        <td class="white blue red green">3
        </td>
        <td class="white blue">4
        </td>
        <td class="white green">5
        </td>
      </tr>
    </table>
    
    <!--Table2-->
    <table id="t2">
      <tr>
        <td>
        <img src="red.jpg" width=100 height=100 onmouseover="Test('t1','red');" />
        </td>
        <td>
        <img src="blue.jpg" width=100 height=100 onmouseover="Test('t1','blue');" />
        </td>
        <td>
        <img src="green.jpg" width=100 height=100 onmouseover="Test('t1','green');" />
        </td>
      </tr>
    </table>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow! Thanks for the code. I'll probably modify it a bit but I tried out this raw version and its a perfect proof of concept.

    Thanks again!

  • #4
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Quote Originally Posted by corpocracy View Post
    Wow! Thanks for the code. I'll probably modify it a bit but I tried out this raw version and its a perfect proof of concept.

    Thanks again!
    If the post has been helpful you should thank vwphillips by clicking on the "helpful post" button underneath his post.


  •  

    Posting Permissions

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