Using Mouse Over to Change Multiple Classes

corpocracy · 08-25-2008, 08:48 AM

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.

vwphillips · 08-25-2008, 11:38 AM

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>

corpocracy · 08-25-2008, 05:37 PM

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!

BarrMan · 08-25-2008, 05:53 PM

Quote:

Originally Posted by corpocracy

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.