473,382 Members | 1,180 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 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 4745
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: gong | last post by:
hi i recently looked at alexandrescu's book on c++, and i found it pretty much unintelligible. i have a few points which i wonder about. 1. as a developer, it is important, from a bottom line...
6
by: liglin | last post by:
The following script changes the color of text with the onmousover event. How can it be modified so it changes the text when the button is clicked? I'd want to avoid layers or CSS. Thanks,...
17
by: Andreas Huber | last post by:
What follows is a discussion of my experience with .NET generics & the ..NET framework (as implemented in the Visual Studio 2005 Beta 1), which leads to questions as to why certain things are the...
3
by: .Net Newbie | last post by:
I'm new to .Net and need to create a generic (free) way to update lookup tables in SQL Server (using C#) in ASP.Net pages. I found an article at:...
15
by: David Lozzi | last post by:
Howdy, I have a function that uploads an image and that works great. I love ..Nets built in upload, so much easier than 3rd party uploaders! Now I am making a public function that will take the...
16
by: tshad | last post by:
This is a little complicated to explain but I have some web services on a machine that work great. The problem is that I have run into a situation where I need to set up my program to access one...
9
by: mps | last post by:
I want to define a class that has a generic parameter that is itself a generic class. For example, if I have a generic IQueue<Tinterface, and class A wants to make use of a generic class that...
26
by: raylopez99 | last post by:
Here is a good example that shows generic delegate types. Read this through and you'll have an excellent understanding of how to use these types. You might say that the combination of the generic...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.