152 users online (0 members and 152 guests)  


  Results 1 to 3 of 3
  1. #1
    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; 
    }
    .

  2. #2
    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?

  3. #3
    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



Tags for this Thread