Highlight two different TD's

Forum Moderators: not2easy

Message Too Old, No Replies

Highlight two different TD's

css mouseover

sleepy_eye

10:39 pm on Apr 20, 2011 (gmt 0)

Hi there
looking to change the background color on two <td> by mouseover on just one. They are not in the same row or column.

Or put another way, hover over one, its background changes color and another also.

I have so far
<STYLE>

</style>

<table bgcolor="#000000" width="371">
<tr bgcolor="#FFFFFF">
<td>UK</td>
<td onMouseOver="this.className='highlight'"
"className.highlightEURO45='normal1'"
onMouseOut="this.className='normal1'">8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr bgcolor="#CCCCCC">
<td><b>EURO</b></td>
<td><b>42</b></td>
<td><b>43</b></td>
<td><b>44</b></td>
<td class="highlightEURO45"><b>45</b></td>
<td><b>46</b></td>
<td bgcolor="#CCCCCC"><b>47</b></td>
</tr>
</table>

birdbrain

9:06 am on Apr 21, 2011 (gmt 0)

Hi there sleepy_eye,

here is an example that you may be able to adapt to your requirements...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 
 
<title>mouse over cells</title> 
 
<style type="text/css"> 
#mytable { 
 width:371px; 
 background-color:#000; 
 } 
#tr0 { 
 background-color:#fff; 
 } 
#tr0 td{ 
 cursor:pointer; 
 } 
#tr1 { 
 background-color:#ccc; 
 } 
#tr1 td { 
 font-weight:bold; 
 } 
.blue{  
 background-color:#88f; 
 } 
.white { 
 background-color:#fff; 
 } 
.grey {  
 background-color:#ccc; 
 }  
</style> 
 
<script type="text/javascript"> 
 
function init(){ 
 var tds=document.getElementById('mytable').rows[0].cells; 
for(var c=0;c<tds.length;c++) { 
 tds[c].number=c; 
tds[c].onmouseover=function() { 
 var n=this.number; 
if(n!=0) { 
 this.className='blue'; 
 document.getElementById('cell-'+n).className='white'; 
this.onmouseout=function(){ 
 this.className='white'; 
 document.getElementById('cell-'+n).className='grey'; 
  } 
 } 
 } 
 } 
 } 
 window.addEventListener? 
 window.addEventListener('load',init,false): 
 window.attachEvent('onload',init); 
 
</script> 
 
</head> 
<body> 
 
<table id="mytable"> 
 
<tr id="tr0"> 
 <td>UK</td> 
 <td>8</td><td>9</td><td>10</td> 
 <td>11</td><td>12</td><td>13</td> 
</tr> 
 
<tr id="tr1"> 
 <td>EURO</td> 
 
<!--change these id numbers round to suit your requirements --> 
 
 <td id="cell-6">42</td><td id="cell-3">43</td><td id="cell-5">44</td> 
 <td id="cell-1">45</td><td id="cell-4">46</td><td id="cell-2">47</td> 
</tr> 
 
</table>  
 
</body> 
</html>

birdbrain

sleepy_eye

8:57 pm on Apr 21, 2011 (gmt 0)

Wow that is it!
Thanks so much!

birdbrain

9:17 pm on Apr 21, 2011 (gmt 0)

No problem, you're very welcome. ;)

sleepy_eye

8:22 pm on Apr 22, 2011 (gmt 0)

Thanks again birdbrain
Was wondering if I could ask you one last thing, how would that work if I had another row above <tr id="tr1"> ?
Thanks

birdbrain

8:40 pm on Apr 22, 2011 (gmt 0)

Hi there sleepy_eye,

If you mean another row between <tr id="tr0"> and <tr id="tr1">, it would not effect the script.

If you mean another row before <tr id="tr0"> then you would need to change this...

var tds=document.getElementById('mytable').rows[0].cells;

...to this...

var tds=document.getElementById('mytable').rows[1].cells;

birdbrain

sleepy_eye

9:59 pm on Apr 28, 2011 (gmt 0)

Hi birdbrain
Thanks so much, I figured it out :)
Thanks again