www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] onMouseOver to change bgcolor in a table?

  1. #1
    Join Date
    May 2009
    Posts
    2

    resolved [RESOLVED] onMouseOver to change bgcolor in a table?

    I tend to stay away from JavaScript b/c I'm no good at it. But I have a navigation bar that's actually a table, and I want the background color of the table cell to change color when the user hovers over the link (like a button changing color, except it's a table). I'm sure there's a simple solution to this, but I can't get the script to work. Can anyone give me a script that will work? Here's the code I have currently:

    Code:
    <TABLE align="center" cellspacing="0" cellpadding="0" width="100%">
    <TR bgcolor="#8B008B">
    <TD align="center" width="10%"> <a href="/index.html" class="nav" onMouseOver="TD.bgColor='#BA55D3'">Home</a> </TD>
    The website is http://www.becomingthecrownjewel.com if anyone wants to see the whole thing.

  2. #2
    Join Date
    May 2009
    Posts
    12
    Here is probably the simplest way.

    HTML Code:
    <style>
    .tdNormal{
    	background-color:#8B008B;
    }
    .tdHover{
    	background-color:#09F;
    	cursor:pointer
    }
    </style>
    
    <TABLE align="center" cellspacing="0" cellpadding="0" width="100%">
    <TR bgcolor="#8B008B">
    <TD align="center" width="10%" onmouseover="this.className='tdHover'" onmouseout="this.className='tdNormal'" class="tdNormal"> <a href="/index.html" class="nav" onMouseOver="TD.bgColor='#BA55D3'">Home</a> </TD>

  3. #3
    Join Date
    Oct 2006
    Posts
    93
    You have to reference the node (in this case the cell <td>) to change the background color.
    I would put an id attribute in your <td> (ie <td id="Home">)
    You can this easily reference the node by doing document.getElementById('Home') in your mouseover event.

    Also, bgColor is not the proper way to reference the background color of the cell. Try this...

    document.getElementById('Home').style.backgroundColor = '#BA55D3'

  4. #4
    Join Date
    May 2009
    Posts
    2
    Thanks! That worked beautifully!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles