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:
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.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 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:
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.Code:<table> <tr> <td class="white red blue green"> </td> </tr> </table>
My point is, I could use this to modify my above code thusly:
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.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>
If any of this seems too confusing, just let me know and I will try and clarify.