Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts

    mouseover table cell colors - multiple cells

    Using the following, I can see how to change a cell color on a mouseover:

    background-color:white"
    onMouseover="this.style.backgroundColor='gray';"
    onMouseout="this.style.backgroundColor='white';">

    Is it possible, however, to have two td's change their background color (to the same color) by placing your cursor over an image that is in yet another td?

    For example,

    Mousing over this:
    <td><img src="image.gif"></td>

    Will change the background colors of both of these:
    <td>content</td>
    <td>content</td>

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,714
    Thanks
    0
    Thanked 238 Times in 233 Posts
    Hi there Errica,

    have a look at this example, it may give you some ideas...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <base href="http://achelous.mysite.wanadoo-members.co.uk/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    #table1 {
        border:1px solid #999;
        margin:auto;
     }
    #table1 td{
        width:300px;
        height:300px;
        border:1px solid #999;
        text-align:center;
     }
    #ball {
        background-image:url(ball_shad.jpg);
        background-color:inherit;
        color:#fff;
     }
    .white {
        background-color:#fff;
        color:#000;
     }
    .blue {
        background-color:#00f;
        color:#fff;
     }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    window.onload=function() {
       cell=document.getElementsByTagName('td');
       document.getElementById('ball').onmouseover=function() {
    for(c=0;c<cell.length;c++) {
    if(cell[c].className=='white') {
       cell[c].className='blue';
       }
      }
     }
       document.getElementById('ball').onmouseout=function() {
    for(c=0;c<cell.length;c++) {
    if(cell[c].className=='blue') {
       cell[c].className='white';
        }
       }
      }
     }
    //-->
    </script>
    
    </head>
    <body>
    
    <table id="table1"><tr>
    <td id="ball">mouseover</td>
    <td>cell</td>
    <td class="white">cell</td>
    </tr><tr>
    <td >cell</td>
    <td class="white">cell</td>
    <td>cell</td>
    </tr></table>
    
    </body>
    </html>
    ...do bear in mind that tables are not for layout but tabular data. This sort of script will work just as well with divs.

    coothead

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts
    THAT........is ideal, thanks!!

  • #4
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •