changing "another" cell bg on hover

**mphuie** · 12-11-2003, 04:58 PM

I'd like to have it so when I hover over a cell in a table, the background of the adjacent cell (immediate right) changes to another color.

I know how to change the color of the cell hovered over, but am not sure how to access the next cell over.

I am using this code, where tdn1 is the ID for the hovered cell and tdn1 is the ID for the cell I want to change. I've tried changing the nama.id value to tdn1 but it does nothing. also changing tdn1.style.backgroundColor='#ff00000' causes errors (i'm guessing the function doesnt know what tdn1 is.

can anyone help me out?

TIA

Code:

function chcol(nama) { 
if(nama.id=='tdn0') { nama.style.backgroundColor = '#ff0000'} 
return true; 
} 
function retcol(nama) { 
nama.style.backgroundColor = '#ffffff'; 
return true; 
}

.

**QuietDean** · 12-11-2003, 05:09 PM

Hi there, welcome to the forums.

Just to mention, using divname.style is not DOM-compliant. You may wish to try using the GetElementById method

Best bet to get fixed, what are the errors? It should give us a very good idea of what the problem is. Could you post them? thanks.

**coothead** · 12-14-2003, 08:29 AM

Hi there mphuie,

Here is a clumsy way of doing it

Code:

<html>
<head>
<title>cell changer</title>
<style type="text/css">
<!--
table{position:absolute;left:300px;top:200px;border:solid 1px #000000;}
td{width:50px;height:50px;border:solid 1px #000000;}
//-->
</style>
</head>
<body>
<table summary="cell changer">
<tr>
<td id="one"onmouseover="getElementById('two').style.backgroundColor='#ff0000';"onmouseout="getElementById('two').style.backgroundColor='#ffffff';">*</td>
<td id="two"onmouseover="getElementById('three').style.backgroundColor='#ff0000';"onmouseout="getElementById('three').style.backgroundColor='#ffffff';">*</td>
<td id="three"onmouseover="getElementById('four').style.backgroundColor='#ff0000';"onmouseout="getElementById('four').style.backgroundColor='#ffffff';">*</td>
</tr><tr>
<td id="four"onmouseover="getElementById('five').style.backgroundColor='#ff0000';"onmouseout="getElementById('five').style.backgroundColor='#ffffff';">*</td>
<td id="five"onmouseover="getElementById('six').style.backgroundColor='#ff0000';"onmouseout="getElementById('six').style.backgroundColor='#ffffff';">*</td>
<td id="six"onmouseover="getElementById('seven').style.backgroundColor='#ff0000';"onmouseout="getElementById('seven').style.backgroundColor='#ffffff';">*</td>
</tr><tr>
<td id="seven"onmouseover="getElementById('eight').style.backgroundColor='#ff0000';"onmouseout="getElementById('eight').style.backgroundColor='#ffffff';">*</td>
<td id="eight"onmouseover="getElementById('nine').style.backgroundColor='#ff0000';"onmouseout="getElementById('nine').style.backgroundColor='#ffffff';">*</td>
<td id="nine"onmouseover="getElementById('one').style.backgroundColor='#ff0000';"onmouseout="getElementById('one').style.backgroundColor='#ffffff';">*</td></tr>
</table>
</body>
</html>

There is probably a much neater solution using javascript

cthead

Thread: changing "another" cell bg on hover

Thread Tools

Related

is there a difference between <script language="javascript> and <script type="text/javascript"> Forum: Javascript Forum

input type=hidden name="to" VALUE="user@yahoo.com" Forum: HTML Forum

how can i only make "one" link turn to another color when hovered(mouse moves to it)? Forum: CSS Forum

changing "another" cell bg on hover

Tags for this Thread