Results 1 to 4 of 4

Thread: change bg cell color

  1. #1
    Join Date
    Dec 2005
    Posts
    133
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default change bg cell color

    I need a very simple script that will change the table's cell background color and add a 1px border with EAEAEA color.

    How do I go about implementing this?

    I got:

    Code:
    <td bgcolor="#FFFFFF" onMouseover="this.style.backgroundColor='F8F8F8';" onMouseout="this.style.backgroundColor='FFFFFF';" align="center" width="152">
    I am not sure how to add the border portion for "onmouse"

    Thank you in advance

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Here's one way of dealing with that:

    Code:
    <table>
    <tr>
    <td style="background-color:#ffffff;border:1px solid #ffffff;text-align:center;width:152px;" onmouseover="this.style.backgroundColor='#d0d0d0';this.style.borderColor='#000000';" onmouseout="this.style.backgroundColor='#ffffff';this.style.borderColor='#ffffff';">hi</td>
    </tr>
    </table>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2005
    Posts
    133
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks. Didn't work

    Code:
    <td style="background-color:#ffffff;border:1px solid #ffffff; onMouseover="this.style.backgroundColor='F8F8F8';this.style.borderColor='EAEAEA';" onMouseout="this.style.backgroundColor='FFFFFF';" align="center">
    What did I do wrong? Basically, nothing happens now (even bg color) when hovered over the cell

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    For one thing, you did a poor job of cut and paste. I used to hate that in elementary school, so don't feel bad. Anyways, try copying my code and pasting it into your page. You can change the color values after that. One important consideration is that although not all browsers require it all the time, hex color codes should always be preceded with the # symbol. Most browsers do require it at least some of the time, some require it all the of time. One other thing, using onMouseover (it should be onmouseover) is a bad habit, it can get you into trouble with certain strict page parsings. On the other hand, when not hyphenated and used as javascript, things like backgroundColor require the 'Camel' style notation.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •