Shanester Posted July 19, 2009 Share Posted July 19, 2009 Greetings,Sites like allmusic.com have a feature when viewing tabular data that when you rest your mouse pointer on an item, the entire line is highlighted. How do I do this?At first I thought I could just use an onmouseover event, get the element id, then change the background color. But there are so many elements that this is not workable. What I would like to do is change all of the background colors together with the style attribute, but I don't know how to do this.Any help would be appreciated.Shane. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 19, 2009 Share Posted July 19, 2009 here's something i quickly put together<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#MyTable {background-color:#FFF;}</style><script type="text/javascript">function checktr(e){var targ;if (e.target) { targ=e.target; }else if (e.srcElement) { targ=e.srcElement; }if (targ.nodeType==3) // defeat Safari bug { targ = targ.parentNode; }return targ;}function trOver(e){var targ=checktr(e);targ.style.backgroundColor="#00ff00";}function trOut(e){var targ=checktr(e)targ.style.backgroundColor="#ffffff";}</script></head><body><table width="765" border="1" cellspacing="0" cellpadding="0" id="MyTable"> <tr onmouseover="trOver(event)" onmouseout="trOut(event)"> <td>111111111111111111111111111111111111</td> </tr> <tr onmouseover="trOver(event)" onmouseout="trOut(event)"> <td>222222222222222222222222222222222222</td> </tr> <tr onmouseover="trOver(event)" onmouseout="trOut(event)"> <td>333333333333333333333333333333333333</td> </tr> <tr onmouseover="trOver(event)" onmouseout="trOut(event)"> <td>444444444444444444444444444444444444</td> </tr> <tr onmouseover="trOver(event)" onmouseout="trOut(event)"> <td>555555555555555555555555555555555555</td> </tr> <tr onmouseover="trOver(event)" onmouseout="trOut(event)"> <td>666666666666666666666666666666666666</td> </tr> <tr onmouseover="trOver(event)" onmouseout="trOut(event)"> <td>777777777777777777777777777777777777</td> </tr></table></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted July 19, 2009 Share Posted July 19, 2009 As long as you don't mind leaving Internet Explorer 6 out, you can use the :hover peudo-class in CSS (Internet Explorer 7 requires your page to be running in Standards Compliant Mode for this to work) table#test tr:hover { background-color: red; } <table id="test"> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> <tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> <tr></table> Link to comment Share on other sites More sharing options...
dsonesuk Posted July 19, 2009 Share Posted July 19, 2009 version 2 FORGET IT IE PROBLEM good old IE does it againSEE BELOW post#6 FOR IE FIX Link to comment Share on other sites More sharing options...
Shanester Posted July 19, 2009 Author Share Posted July 19, 2009 Wow, thanks.I'm trying these now. I will let you know how it goes.Thanks,Shane. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 19, 2009 Share Posted July 19, 2009 this has IE fix<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#MyTable {background-color:#FFFFFF;}</style><script type="text/javascript">function setattributes(){var x = document.getElementById("MyTable");var y = x.getElementsByTagName("tr");var trtotal = y.length;for(i=0;i<trtotal;i++) {//Improved coding from Ingolmeif(window.addEventListener) { y.addEventListener('mouseover',trOver,false); y.addEventListener('mouseout',trOut,false); } else if(window.attachEvent) { y.attachEvent('onmouseover',trOver); y.attachEvent('onmouseout',trOut); } else { y.onmouseover = trOver; y.onmouseout = trOut; } }}function checktr(e){var targ;if (e.target) { targ=e.target; }else if (e.srcElement) { targ=e.srcElement; }if (targ.nodeType==3) // defeat Safari bug { targ = targ.parentNode; }return targ;}function trOver(e){var targ=checktr(e);targ.style.backgroundColor="#00ff00";}function trOut(e){var targ=checktr(e)targ.style.backgroundColor="#ffffff";}window.onload=setattributes;</script></head><body><table width="765" border="1" cellspacing="0" cellpadding="0" id="MyTable"> <tr> <td>111111111111111111111111111111111111</td> </tr> <tr> <td>222222222222222222222222222222222222</td> </tr> <tr> <td>333333333333333333333333333333333333</td> </tr> <tr> <td>444444444444444444444444444444444444</td> </tr> <tr> <td>555555555555555555555555555555555555</td> </tr> <tr> <td>666666666666666666666666666666666666</td> </tr> <tr> <td>777777777777777777777777777777777777</td> </tr></table></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.