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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2003
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    changing a cells bgcolor with mouseover

    I want to change a cell's bgcolor in a function that is called when the onMouseOver event is called.... I was trying something like this


    function MouseOnCell()
    {
    document.all.TD_id.bgcolor="#00000";
    }

    but that didn't work

    or even

    function MouseOnCell(r,c)
    {
    document.all.mytable_id.row(r).cell(c).bgcolor = "#00000";
    }

    nor did that... am at least on the right track? I guess I'm just not sure what object holds a particular cell bgcolor. Any hints are appreciated... thanks!

    Yardgnome

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    css can do this??

    Try the td cell with a class and give it the normal link, linkactive, linkvisited, linkhover treatment using background-color for the changes you need.

    Bazz

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is an example that will change the color and text:
    <html>
    <head>
    <title>Table Cell Color Change</title>
    <script language="JavaScript">
    function chgtabcolor(name,bcolor,txt)
    {
    if(document.getElementById)
    {
    elm=document.getElementById(name.id)
    elm.style.backgroundColor=bcolor
    var newText = document.createTextNode(txt)
    elm.replaceChild(newText, elm.childNodes[0])
    }
    }
    </script>
    </head>
    <body>
    <table align="center" border="1" width="200" height="120" cellspacing="0" cellpadding="0">
    <tr>
    <td id="cell1" align="center" valign="middle" width="66" height="20" onmouseover="chgtabcolor(this,'lightgreen','World')" onmouseout="chgtabcolor(this,'white','Hello')"> Hello </td>
    <td id="cell2" align="center" valign="middle" width="66" height="20" onmouseover="chgtabcolor(this,'red','World')" onmouseout="chgtabcolor(this,'white','Hello')"> Hello </td>
    <td id="cell3" align="center" valign="middle" width="66" height="20" onmouseover="chgtabcolor(this,'yellow','World')" onmouseout="chgtabcolor(this,'white','Hello')">Hello</td>
    </tr>
    <tr>
    <td id="cell4" align="center" valign="middle" width="66" height="20" onmouseover="chgtabcolor(this,'lightgreen','World')" onmouseout="chgtabcolor(this,'white','Hello')"> Hello </td>
    <td id="cell5" align="center" valign="middle" width="66" height="20" onmouseover="chgtabcolor(this,'red','World')" onmouseout="chgtabcolor(this,'white','Hello')"> Hello </td>
    <td id="cell6" align="center" valign="middle" width="66" height="20" onmouseover="chgtabcolor(this,'yellow','World')" onmouseout="chgtabcolor(this,'white','Hello')">Hello</td>
    </tr>
    </table>
    </body>
    </html>

  • #4
    Regular Coder
    Join Date
    Aug 2003
    Posts
    383
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I guess I'm just not sure what object holds a particular cell bgcolor.
    Well, you're asking the right question. Here's an answer: to program a particular element in your page, start by getting a reference to the element object which represents it. You can do this from anywhere in your code using document.getElementById(), passing it the id you've given to the TD. However, in this instance you're calling this from the TD element itself, and onmouseover/onmouseout are both properties of that object - so, within any onmouseover/onmouseout code, the this keyword will reference the 'owning object'....the TD. Makes it simple. You don't even need to call a separate function:

    <td............
    onmouseover="this.style.background='#000000'"
    onmouseout="this.style.background='#ffffff'" style="cursor:pointer;">

    this references the TD object, .style it's Style object (gateway to its CSS properties), and background is the catch-all BG property that allows you to set any of the several CSS background properties; it 'knows' which one you meant by the type of data specified. You might not see any function above - but, trust me it's there (generated by the browser). If you want to keep your HTML neater and centralize this, by all means, call an global function and pass the TD object:

    <td............
    onmouseover="changeBG(this, '#000000')"
    onmouseout="changeBG(this, '#ffffff')"
    style="cursor:pointer;">

    ........
    function changeBG(el, newBG)
    {
    el.style.background = newBG;
    }

    The cursor styling is optional, naturally....
    &nbsp;........ another wild guess ........

  • #5
    New Coder
    Join Date
    May 2003
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Thanks alot

    Thanks guys for you help. I appreciate it because you didn't just give me the answer... you helped understand what the answer was! Thanks again,

    Yardgnome


  •  

    Posting Permissions

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