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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2002
    Location
    Austin, TX
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing Table Colors

    Hey...I'm putting up a new layout for my site, with tables used extremely excessively. I was wondering, how do you make it so that the background color of rows change on mouseover? If someone could help me out, I'd appreciate it. Thanks.

  • #2
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    That is simple javascript... so simple I can do it YAY!
    Code:
    <tr onMouseOver="this.style.backgroundColor = '#ff0000'" onMouseOut="this.style.backgroundColor = '#ffffff'">
    <td>Testing 1..2..3.. Testing</td>
    </tr>
    Or you could pass it to a function...I think
    Code:
    var OriginalColor = '#ffffff'
    var RollOverColor = '#ff0000'
    function changeIt(TheCell){
    if (TheCell.style.backgroundColor = OriginalColor) {
    TheCell.style.backgroundColor = RollOverColor
    }else{
    TheCell.style.backgroundColor = OriginalColor
    }
    }
    Now you can easily do this..
    Code:
    <tr id="MyTr" onMouseOver="changeIt(this.id)" onMouseOut="changeIt(this.id)">
    <td>Testing 1..2..3..Testing</td>
    </tr>
    Although I'm not sure about the this.id , if that doesn't work then just use the current tr's id which in this case is MyTr.

    So it would look like:
    Code:
    onMouseOver="changeIt(MyTr)" onMouseOut="changeIt(MyTr)"
    Omnis mico antequam dominus Spookster!

  • #3
    New to the CF scene
    Join Date
    Dec 2002
    Location
    Austin, TX
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Muah ha ha ha ha ha!!! I feel the power! Just like Energizer!

    lol but anyways, thanks a bunch. It works great.

  • #4
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    lol.
    Which one did you use?
    Omnis mico antequam dominus Spookster!

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    or you could change the class! (my favourite way of doing it)


    <style>
    td.on {
    background-color: #999999;
    }
    td.off {
    background-color: #FFFFFF;
    }
    </style>

    <table>
    &nbsp;&nbsp;<tr>
    &nbsp;&nbsp;&nbsp;&nbsp;<td onmouseover="this.className='on';" onmouseout="this.className='off';" class="off">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Testing...
    &nbsp;&nbsp;&nbsp;&nbsp;</td>
    &nbsp;&nbsp;</tr>
    </table>


    redhead

  • #6
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Ahhh! className... Finnaly! I've been trying to do that for ages. I should of asked but for some reason I just forgot about it.

    In the end I settled for changing the style in the javascript itself which is not an esaily editable way of doing it.

    Thanks for that redhead!
    Omnis mico antequam dominus Spookster!

  • #7
    New to the CF scene
    Join Date
    Dec 2002
    Location
    Austin, TX
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry it took me a day or two or whatever (no concept of time) to reply, but I've been doing alot of last-minute Christmas shopping. Anyway, in response to your question, M, I used your first example - the one that just used MouseOver and MouseOut. Thanks for it. I'll try the class setting in a minute, red.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Browser support?

    Which browsers actually support events on td elements these days?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Which browsers actually support events on td elements these days?
    sheesh kabab... loads of them...

    ie 4+, mozilla, ns6+ (if not 5+), definatly opera 6.05 (probably some of the earlier opera's too) etc... so pretty much everyone (depending on javascript being enabled ) will be able to see it...
    redhead


  •  

    Posting Permissions

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