Page 1 of 3 123 LastLast
Results 1 to 10 of 23

Thread: How to use <mouseover> tag on a <td> to change <td> backgroundcolor...

  1. #1
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to use <mouseover> tag on a <td> to change <td> backgroundcolor...

    How to use <mouseover> tag on a <td>. I wan to change <td> backgroundcolor...

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    post a url to the problematic site so we can help you troubleshoot

    if your site is not published post the appropriate code wrapped in [code] tags

    and read the Posting Policy

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    mouseover is not a tag.

    onMouseover is an attribute, valid in some particular tags, such as <a>

    I think that <td> will work with onMouseover, though I'm not sure that's valid (probably is, or some workaround).


    Use is like this:
    <tag onMouseover="javascripthere();">
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Oct 2007
    Location
    Germany, Berlin
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    You do not need JS for that. Simply use css with a link as block element in every table cell:
    Code:
    <html>
    <head>
    <style type="text/css">
    table 
    {
       border:none; 
    }
    table a, table a:visited 
    {
       display:block;
       width:100%;
       height:100%;
       background:#fff;
       color:#000;
       cursor:default;
       text-decoration:none; 
    }
    table a:hover 
    {
       background:#ccc;
       color:#fff; 
    }
    </style>
    </head>
    
    <body>
    <table>
     <tr>
      <td><a href="#">text 1</a></td>
     </tr>
     <tr>
      <td><a href="#">bla bla bla  bla<br /> bla bla bla   bla bla bla</a></td>
     </tr>
    </table>
    </body>
    
    </html>
    ...that should work properly on every browser and it is valid HTML.

    greetings
    Max
    Last edited by tech_support; 10-25-2007 at 06:54 AM.

  5. #5
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    #fff and #ccc aren't really valid. Use #FFFFFF and #CCCCCC.

    Plus, that requires an a tag, which may or may not be used in this and also will not entirely fill every TD, unless it is standardized... then what's the point?
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  6. #6
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    cannot use to change <td> background-image??

    I try below idea... but don't work

    Code:
    # Testing{
    Background:URL(Image/helo.jpg);
    }
    
    <Table>
    <tr>
    <td id="Testing">
    <a href="aaa.html">Helo</a>
    </td>
    </tr>
    </table>

  7. #7
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    921
    Thanks
    121
    Thanked 2 Times in 2 Posts

    Default

    or like this ?
    Code:
    .menu li a:visited{
    color: #aa2716;
    }
    
    .menu a:hover{
    background-color: #F3F3F3;
    color: #aa2716;
    }
    <ul class="menu">
    <li><a href="">link</a></li>
    </ul>[/CODE]

  8. #8
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by djr33 View Post
    #fff and #ccc aren't really valid.
    since when?

    Quote Originally Posted by wenight View Post
    cannot use to change <td> background-image??

    I try below idea... but don't work

    Code:
    # Testing{
    Background:URL(Image/helo.jpg);
    }
    
    <Table>
    <tr>
    <td id="Testing">
    <a href="aaa.html">Helo</a>
    </td>
    </tr>
    </table>
    there cannot be any space between the pound sign and the id

    its also good to have a background color incase the image doesnt display due to the user having them disabled, or it being corrupt, or it being large so takes a while, etcetc.... you can use transparent to inherit the background color of the parent element.
    Code:
    #Testing {
        background: #hexadecimal url('path/to/image');
    }

  9. #9
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by boogyman View Post
    since when?



    there cannot be any space between the pound sign and the id

    its also good to have a background color incase the image doesnt display due to the user having them disabled, or it being corrupt, or it being large so takes a while, etcetc.... you can use transparent to inherit the background color of the parent element.
    Code:
    #Testing {
        background: #hexadecimal url('path/to/image');
    }
    what mean by the #hexadecimal and inherit...? when I write the HTML always got inherit, fixed, Inline, static... can somebody explain it to me...?

  10. #10
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I try this but when my ouse over no effect...

    Code:
    #Testing table td:hover {
    background-image:url(Helo.png);
    }
    
    <Table>
    <tr>
    <td id="Testing">
    <a href="aaa.html">Helo</a>
    </td>
    </tr>
    </table>

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
  •