SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ho to highlight a row of a table onMouseOver?

    Hi All,

    Any1 out there is ready to sho me how to Make a row of a table highlight when mouse over?

    If I have the following table for example what code should I add?

    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
    <tr>
    <td width="20%">&nbsp;</td>
    <td width="80%">&nbsp;</td>
    </tr>
    <tr>
    <td width="20%">&nbsp;</td>
    <td width="80%">&nbsp;</td>
    </tr>
    <tr>
    <td width="20%">&nbsp;</td>
    <td width="80%">&nbsp;</td>
    </tr>
    </table>

  2. #2
    SitePoint Enthusiast teknikewl's Avatar
    Join Date
    Feb 2002
    Location
    Pennsylvania, USA
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey tammara. You are going to want to use CSS for this I do believe:


    This goes in the <head> section of your document:
    Code:
    <STYLE TYPE="text/css"> 
    <!-- 
    A:link { background-color: transparent;}
    A:visited { background-color: transparent;}
    A:hover { background-color: #ff6633;}
    A:active { background-color: transparent; }
    --> 
    </STYLE>
    Or something to that affect. Im not to up on CSS so you may be able to make the entire background change but the example above just changes the text background. Not sure how much that helps
    Last edited by teknikewl; May 31, 2002 at 17:33.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx Bryan,

    But this didn't help me much!

    What if the row dosn't include a link?

    and the above code would affect the entire links on the page! wouldn't it?!

    I onlly want to affect the row of a table! any idea of how doing this?

    thanx

  4. #4
    SitePoint Enthusiast teknikewl's Avatar
    Join Date
    Feb 2002
    Location
    Pennsylvania, USA
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is true! Im not sure it can be done with out creating a link.....BUT I have been known to be wrong!!! I will see if I can find it.

    If they were links you could always just assign a class to the A:LINK and such. I think it would be like A:link.cell or A.cell:link then <a class="cell" href="blabblahblah>....</a> but that still would only affect the text if it were a link. Sorry if that doesn't help much either!

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Location
    Los Angeles
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this, it will heighlight the first cell

    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
    <tr>
    <td name="cell1" width="20%" id="td1" onMouseOver="document.all.td1.style.background = '#ff0000'" onMouseOut="document.all.td1.style.background = '#FFFFFF'">ccc </td>
    <td width="80%">ccc </td>
    </tr>
    <tr>
    <td width="20%">cc </td>
    <td width="80%">cc </td>
    </tr>
    <tr>
    <td width="20%">cc </td>
    <td width="80%">cc </td>
    </tr>
    </table>
    Do you have a career or job related web site?
    Earn 5 cents per click by joining our affiliate program.
    Click Here

  6. #6
    SitePoint Enthusiast teknikewl's Avatar
    Join Date
    Feb 2002
    Location
    Pennsylvania, USA
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good work gekofish! I will store that one in my memory too!

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx gekofish
    You are great

    your code will highlight only the cell not the entire row!

    Is it possible to higlight the whole row?

    If not I'll use the above code



    love u :

  8. #8
    Happy Holidays !! Paul S's Avatar
    Join Date
    Mar 2001
    Location
    Mexico
    Posts
    1,287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by gekofish
    Try this, it will heighlight the first cell
    Does that work with NN 4.x, Opera and other browsers or just IE?

    Paul

  9. #9
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no it will not but this will. And i put a little error trapping in as well

    PHP Code:

    <script type="text/javascript">

      function 
    alter(what,col)
      {
        try
        {
          (
    what != null)? what.style.background col null;
        }
        catch(
    errorObject)
        {
          
    alert('what is not an obj\t error = ' errorObject.description);
        }
      }

    </script>

    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
      <tr> 
        <td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">1</td> 
        <td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">4</td> 
      </tr> 
      <tr> 
        <td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">2</td> 
        <td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">5</td> 
      </tr> 
      <tr> 
        <td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">3</td> 
        <td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">6</td> 
      </tr> 
    </table> 
    Last edited by Andrew-J2000; May 31, 2002 at 19:18.

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi andrew

    thnx

    Your code did prety the same as the one previuosly sugested! It only higlights the first cell!

    it seems I should give up the whole row

    thanx guys

  11. #11
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's only a matter of moving the onmouse over to the tr tag

    PHP Code:
    <script type="text/javascript">

      function 
    alter(what,col)
      {
        try
        {
          (
    what != null)? what.style.background col null;
        }
        catch(
    errorObject)
        {
          
    alert('what is not an obj\t error = ' errorObject.description);
        }
      }

    </script>

    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
      <tr onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')"> 
        <td width="20%">1</td> 
        <td width="20%">4</td> 
      </tr> 
      <tr onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')"> 
        <td width="20%">2</td> 
        <td width="20%">5</td> 
      </tr> 
      <tr onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')"> 
        <td width="20%">3</td> 
        <td width="20%">6</td> 
      </tr> 
    </table> 

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    thanx andew! you have just closed a very important chapter in HISTORY


    no kiss avatars here? nevermind take this :-*

  13. #13
    Happy Holidays !! Paul S's Avatar
    Join Date
    Mar 2001
    Location
    Mexico
    Posts
    1,287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Andrew,

    that's a really nice piece of code

  14. #14
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i just wanted to make sure nothing dodgy can be put into the code

    thx tho

  15. #15
    SitePoint Addict Eric1776's Avatar
    Join Date
    May 2002
    Location
    Atlanta, GA
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's only a matter of moving the onmouse over to the tr tag
    If a browser doesn't support JavaScript what would happen?

  16. #16
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try turning Javascript off and see.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  17. #17
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Eric1776

    If a browser doesn't support JavaScript what would happen?
    It wouldn't work.

    www.GUIstuff.com has a generator for mouse over TD's (or TR's in your case) that are also links. It doesn't work in NS though.
    Mike
    It's not who I am underneath, but what I do that defines me.

  18. #18
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice work Andrew, but how can I get it to work if I'm using echo?

    Ie.

    echo("<tr valign='top'> \n");

    echo("<td>$year</td>\n");
    echo("<td>$cond</td>\n");
    echo("<td>$workorder</td>\n");

    I tried outting the onMouseover in the <tr ....
    but kept getting a parsing error!


    Thanks.

  19. #19
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <?php

    echo("<tr onMouseOver=\"alter(this, 'orange')\" onMouseOut=\"alter(this, '')\">\r\n");

    ?>
    You have to use a backslashe ( \ ) to escape all the other quotes in the echo statement.
    Mike
    It's not who I am underneath, but what I do that defines me.

  20. #20
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Outstanding!

    Very well done! Works like a charm!

    Thanks again!

  21. #21
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome
    Mike
    It's not who I am underneath, but what I do that defines me.


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
  •