471,338 Members | 1,300 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,338 software developers and data experts.

Generic code to change td color onmousover/out?

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.
Jul 23 '05 #1
3 4611
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.
Jul 23 '05 #2
*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/
Jul 23 '05 #3
> 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

Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by gong | last post: by
6 posts views Thread by liglin | last post: by
3 posts views Thread by .Net Newbie | last post: by
16 posts views Thread by tshad | last post: by
26 posts views Thread by raylopez99 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.