SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2004
    Location
    leiria
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Change Background color of other cell

    Hello everybody!

    How can I resolve this problem?
    I need to change the background color of a cell in a table but with the event onmouseover in other cell of the same table!

    I try to identyfy the cell with the axis atribute but it seems not work!

    Any ideias?

    Thanks in advance!

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    e.g.…
    HTML Code:
    …
     <td id="thisCell">blah blah blah</td>
     …
     <td onmouseover="document.getElementById('thisCell').style.backgroundColor='#fc0';" onmouseout="document.getElementById('thisCell').style.backgroundColor='#ccc';">rollover me</td>
     …
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Addict trinity0159's Avatar
    Join Date
    Jul 2002
    Location
    California
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You Could also try:

    HTML Code:
    <td><div id="thisCell"><a href=#>Rollover</a></div></td>
    with a style like:

    Code:
    #thisCell{width: 100%; height:(height you want cell to be);}
    #thisCell a{background-color: #CCCCCC;}
    #thisCell a:hover{background-color: #000000;}

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by trinity0159
    You Could also try:

    HTML Code:
    <td><div id="thisCell"><a href=#>Rollover</a></div></td>
    with a style like:

    Code:
    #thisCell{width: 100%; height:(height you want cell to be);}
    #thisCell a{background-color: #CCCCCC;}
    #thisCell a:hover{background-color: #000000;}
    That will work if he's trying to affect the same cell. However, if he wants to affect another cell, then Bill's code is the one to go with.

    Also, you might want to add "display: block;" to the link style in your example so it fills up the rest of its line.

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    …you might want to add "display: block;" to the link style in your example so it fills up the rest of its line.
    …and also height: 100%; to the link style, so that it fills the td cell vertically too.

    </2’>

    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


Bookmarks

Posting Permissions

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