Shanester Posted July 19, 2009 Report 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 Report Share Posted July 19, 2009 (edited) 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> Edited July 19, 2009 by dsonesuk Link to comment Share on other sites More sharing options...
Ingolme Posted July 19, 2009 Report Share Posted July 19, 2009 (edited) 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> Edited July 19, 2009 by Ingolme Link to comment Share on other sites More sharing options...
dsonesuk Posted July 19, 2009 Report Share Posted July 19, 2009 (edited) version 2 FORGET IT IE PROBLEM good old IE does it againSEE BELOW post#6 FOR IE FIX Edited July 19, 2009 by dsonesuk Link to comment Share on other sites More sharing options...
Shanester Posted July 19, 2009 Author Report 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 Report Share Posted July 19, 2009 (edited) 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> Edited July 22, 2009 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now