Generic code to change td color onmousover/out?

[michael]

I'm changing colors of table cells like this:

<style type="text/css">
..over {background-color: #bedddc}
..out {background-color: #99cccc}
</style>

[snip]
<td onmouseover="this.className='over'" onmouseout="this.className='out'">
[snip]

But what I want is a generic javascript to change the current
onmousover/out cell from a script above
the table instead of using "this.className" within each td code, something
like follows:

<script>
function over(){
???????
}

function out(){
???????
}
</script>

[snip]
<td onmouseover="over();" onmouseout="out();">
[snip]

Can it be done w/out assigning a special id or class to each cell and pass
'this' onto above script for same effect?

If possible - please replace ??????? with any ideas.

Thanks!
michael

--
Those who can't write, write manuals.

[Yann-Erwan Perio]

michael wrote:

Can it be done w/out assigning a special id or class to each cell and pass
'this' onto above script for same effect?
Something like
function over(el) {
el.className="whatever";
}

and then you have
<td onmouseover="over(this)">

:-)

But this isn't generic enough IMHO, it's neater to assign the
mouseover/mouseout handlers outside of the HTML tags, this way you can
prevent the HTML from growing needlessly and also control whether the
handler is supported, making the decision to assign it if it is.

<table id="foo">
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
</table>

<script type="text/javascript">
window.onload=function(evt){
var d=document, td;

function mover(evt){
this.style.background="yellow";
}

function mout(evt){
this.style.background="";
}

if(d.getElementById &&
d.getElementsByTagName) {

td=d.getElementById("foo").getElementsByTagName("t d");
for(var ii=0;ii<td.length; ii++) {
td[ii].onmouseover=mover;
td[ii].onmouseout=mout;
}
}
}
</script>

would be a good start (you could then add support for document.all,
relatedTarget etc).
If possible - please replace ??????? with any ideas.

Without modifying the calls, that'd be tricky; in IE you'd have to get
the sourceElement from the window.event object, and in other browsers
you'd have to walk up the (non-standard) caller chain until you can
grasp the event of the original handler, finally grabbing the target.

[Andrew Urquhart]

*michael* wrote in comp.lang.javascript:

I'm changing colors of table cells like this:

<style type="text/css">
.over {background-color: #bedddc}
.out {background-color: #99cccc}
</style>

[snip]
<td onmouseover="this.className='over'" onmouseout="this.className='out'">
[snip]

But what I want is a generic javascript to change the current
onmousover/out cell from a script above
the table instead of using "this.className" within each td code

[snip]

I see Yann-Erwan has already replied, however, I was playing around with
the following and thought it might be of some use still (I'm not sure of
it's general suitability - although it does work in IE5.0+, Opera7,
Mozilla/Firefox):
<script type="text/javascript">
function Init() {
AddMouseOverEffect("rootId", "td"); // Your id and tag name here
}

function AddMouseOverEffect(strId, strTag) {
if (document && document.getElementById && document.getElementsByTagName) {
var objRoot = document.getElementById(strId);
if (objRoot) {
var objChildTags = objRoot.getElementsByTagName(strTag);
var intIndex = objChildTags.length;
while (intIndex--) {
var objTag = objChildTags[intIndex];
if (objTag.attachEvent) {
objTag.attachEvent('onmouseover', Effect_MouseOn);
objTag.attachEvent('onmouseout', Effect_MouseOff);
}
else if (objTag.addEventListener) {
objTag.addEventListener("mouseover", Effect_MouseOn, false);
objTag.addEventListener('mouseout', Effect_MouseOff, false);
}
}
}
}
}

function Effect_MouseOn(evnt) {
var context = evnt.srcElement ? evnt.srcElement : this;
if (context && context.style) {
with (context.style) {
backgroundColor = "#bedddc";
color = "#000000";
}
}
return false;
}

function Effect_MouseOff(evnt) {
var context = evnt.srcElement ? evnt.srcElement : this;
if (context && context.style) {
with (context.style) {
backgroundColor = "#99cccc";
color = "#000000";
}
}
return false;
}

if (window.attachEvent) {
window.attachEvent('onload', Init);
}
else if (window.addEventListener) {
window.addEventListener("load", Init, false);
}
</script>

<table id="rootId">
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
<td>Cell 1/4</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
<td>Cell 2/4</td>
</tr>
</table>

--
Andrew Urquhart
- FAQ: http://www.jibbering.com/faq/
- Archive: http://www.google.com/groups?q=comp.lang.javascript
- Contact me: http://andrewu.co.uk/contact/

[michael]

> But this isn't generic enough IMHO, it's neater to assign the

mouseover/mouseout handlers outside of the HTML tags, this way you can

Perfect - thank you!
michael

--
"Deep" is a word like "theory" or "semantic" -- it implies all sorts of
marvelous things. It's one thing to be able to say "I've got a
theory", quite another to say "I've got a semantic theory", but, ah,
those who can claim "I've got a deep semantic theory", they are truly
blessed.
-- Randy Davis