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

 

[Yann-Erwan Perio]

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("td");
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.

 

[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