PDA

View Full Version : change background on hover



d-machine
10-10-2009, 01:21 PM
Hi,

I have a long table and I want to change the tr's background onmouse hover.

I know how to do it with CSS but it doesn't work well on some browsers, so I'm looking for a JS solution.

Thanks!

vwphillips
10-10-2009, 01:49 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
var Lst=false;

function HighLight(c){
var evt=window.event||arguments.callee.caller.arguments[0];
if (Lst){
Lst.style.backgroundColor='transparent';
}
var obj=window.event?evt.srcElement:evt.target;
if(obj.nodeType==3) obj=obj.parentNode; // defeat Safari bug
while (obj.parentNode&&obj.nodeName.toUpperCase()!='TR'){
obj=obj.parentNode;
}
if (obj.nodeName.toUpperCase()=='TR'){
Lst=obj;
Lst.style.backgroundColor=c;
}
}
/*]]>*/
</script></head>

<body>
<table width="100" border="1" onmouseover="HighLight('red');">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</body>

</html>

d-machine
10-10-2009, 03:13 PM
Hi thank you very much!
Is it possible to make it change the backgorund of all the td's in the row on hover
instead of changing the tr's background?
Since in my table my tr's already have bbackground and I want to keep it.
My table contains 7 cell in each line.

Troy III
10-10-2009, 08:53 PM
Hi thank you very much!
Is it possible to make it change the backgorund of all the td's in the row on hover
instead of changing the tr's background?
Since in my table my tr's already have bbackground and I want to keep it.
My table contains 7 cell in each line.

Not sure I understand exactly what you mean, but I presume you want something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
var Lst=false;

function HighLight(e,c){
var e=e||event;
if (Lst){
Lst.style.backgroundColor='';
}
var obj=e.srcElement||e.target
Lst=obj;
if(Lst.tagName.match(/td/i)){
Lst.style.backgroundColor=c;}
}

/*]]>*/
</script>
</head>

<body>
<table width="100" border="1" onmouseover="HighLight(event, 'red');">
<tr>
<td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>
</body>
</html>
I've just modified vwphillips code a bit...

vwphillips
10-11-2009, 08:24 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
var Lst=false;

function HighLight(c){
var evt=window.event||arguments.callee.caller.arguments[0];
if (Lst){
for (var z0=0;z0<Lst.length;z0++){
Lst[z0][0].style.backgroundColor=Lst[z0][1];
}
}
var obj=window.event?evt.srcElement:evt.target;
if(obj.nodeType==3) obj=obj.parentNode; // defeat Safari bug
while (obj.parentNode&&obj.nodeName.toUpperCase()!='TR'){
obj=obj.parentNode;
}
if (obj.nodeName.toUpperCase()=='TR'){
Lst=[];
var tds=obj.cells;
for (var z0=0;z0<tds.length;z0++){
Lst.push([tds[z0],zxcSV(tds[z0],'background-Color')]);
tds[z0].style.backgroundColor=c;
}
}
}

function zxcSV(obj,par){
if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}


/*]]>*/
</script></head>

<body>
<table width="100" border="1" onmouseover="HighLight('red');">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td style="background-Color:blue;">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td style="background-Color:green;">&nbsp;</td>
</tr>
</table>
</body>

</html>