Jump to content

How Do I Highlight A Line?


Shanester
 Share

Recommended Posts

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

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 by dsonesuk
Link to comment
Share on other sites

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 by Ingolme
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...