34 users online (0 members and 34 guests)  

> > > > changing "another" cell bg on hover

  Results 1 to 3 of 3
  1. 12-11-2003, 04:58 PM #1
    mphuie
    mphuie is offline
    mphuie's Avatar
    New User
    Status
    Offline
    Join Date
    Dec 2003
    Posts
    1

    changing "another" cell bg on hover

    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; 
}
    .
    Reply With Quote Reply With Quote
  2. 12-11-2003, 05:09 PM #2
    QuietDean
    QuietDean is offline
    QuietDean's Avatar
    Administrator
    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    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.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?
    Reply With Quote Reply With Quote
  3. 12-14-2003, 08:29 AM #3
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733
    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


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread