Go Back  DVD Talk Forum > General Discussions > Tech Talk
Reload this Page >

How do I make multiple Cells change color with one mouseover

Tech Talk Discuss PC Hardware, Software, Internet and Other Technology

How do I make multiple Cells change color with one mouseover

Old 08-18-05, 10:14 AM
  #1  
DVD Talk Special Edition
Thread Starter
 
Join Date: Dec 1999
Location: Raleigh, NC
Posts: 1,766
How do I make multiple Cells change color with one mouseover

See this example. I am trying to be able to get it so:

When I mouse over Cell A, Cell A and Cell C change the background color to Orange
When I mouse over Cell C, Cell A and Cell C change the background color to Orange
When I mouse over Cell B, Cell B and Cell D change the background color to Red
When I mouse over Cell D, Cell B and Cell D change the background color to Red

Below I have an example code where I can get each to go individually but I would like to modify it to the spec above.

Here is a link to the code in action


HTML Code:
<html>
<TABLE width="200" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD background-color:lightblue"
 on_Mouseover="this.style.backgroundColor='yellow';"
 on_Mouseout="this.style.backgroundColor='';">
Cell A
</TD>
<TD background-color:lightblue"
 on_Mouseover="this.style.backgroundColor='red';"
 on_Mouseout="this.style.backgroundColor='';">
Cell B
</TD>
<TD background-color:lightblue"
 on_Mouseover="this.style.backgroundColor='yellow';"
 on_Mouseout="this.style.backgroundColor='';">
Cell C
</TD>
<TD background-color:lightblue"
 on_Mouseover="this.style.backgroundColor='red';"
 on_Mouseout="this.style.backgroundColor='';">
Cell D
</TD>
</TR>
</TABLE>
</html>
habers is offline  
Old 08-18-05, 10:28 AM
  #2  
Banned
 
Join Date: Sep 1999
Location: Memphis, TN
Posts: 11,544
Here you go. I also took the liberty of fixing other problems in your code, like the fact that the lightblue background color didn't work right.

Stupid forum. You'll need to remove the _ from the mouse over's and out's for this to work.
HTML Code:
<html>
<TABLE width="200" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD style="background-color:lightblue" id="a"
 on_Mouseover="this.style.backgroundColor='orange'; document.getElementById('c').style.backgroundColor='orange';"
 on_Mouseout="this.style.backgroundColor='lightblue'; document.getElementById('c').style.backgroundColor='lightblue';">
Cell A
</TD>
<TD style="background-color:lightblue" id="b"
 on_Mouseover="this.style.backgroundColor='red'; document.getElementById('d').style.backgroundColor='red';"
 on_Mouseout="this.style.backgroundColor='lightblue'; document.getElementById('d').style.backgroundColor='lightblue';">
Cell B
</TD>
<TD style="background-color:lightblue" id="c"
 on_Mouseover="this.style.backgroundColor='orange'; document.getElementById('a').style.backgroundColor='orange';"
 on_Mouseout="this.style.backgroundColor='lightblue'; document.getElementById('a').style.backgroundColor='lightblue';">
Cell C
</TD>
<TD style="background-color:lightblue" id="d"
 on_Mouseover="this.style.backgroundColor='red'; document.getElementById('b').style.backgroundColor='red';"
 on_Mouseout="this.style.backgroundColor='lightblue'; document.getElementById('b').style.backgroundColor='lightblue';">
Cell D
</TD>
</TR>
</TABLE>
</html>

Last edited by Otto; 08-18-05 at 10:31 AM.
Otto is offline  
Old 08-18-05, 12:22 PM
  #3  
DVD Talk Special Edition
Thread Starter
 
Join Date: Dec 1999
Location: Raleigh, NC
Posts: 1,766
Thanks Otto, your the man!
habers is offline  

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Thread Tools
Search this Thread

Archive Advertising Cookie Policy Privacy Statement Terms of Service

Copyright 2018 MH Sub I, LLC dba Internet Brands. All rights reserved. Use of this site indicates your consent to the Terms of Use.