...

View Full Version : changing a cells bgcolor with mouseover



Yardgnome
09-29-2003, 12:25 PM
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

bazz
09-29-2003, 12:38 PM
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

requestcode
09-29-2003, 01:36 PM
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>

cheesebag
09-29-2003, 06:43 PM
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....

Yardgnome
09-30-2003, 07:33 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum