[thelist] Table Row Rollover

martin.p.burns at uk.pwcglobal.com martin.p.burns at uk.pwcglobal.com
Tue Oct 16 11:24:03 CDT 2001


Memo from Martin P Burns of PricewaterhouseCoopers

-------------------- Start of message text --------------------

Yup, that was the one, and here it is as a tip:
<tip author="Peter-Paul Koch" description="Hover attributes for table
cells">
Mouseover highlights are very simple for link texts, using the a.hover
pseudoclass.

However, there isn't an equivalent for tables - td.hover just doesn't work.
This is
a bit of a shame if you want to do highlighting for your (table based)
navigation.

There are 2 ways to do it, with or without stylesheets. Both require JS
support,
and both will scale from table cell, to table row, to entire table.

It's been reported that the stylesheet swap is slow - this may depend on
how
complex the class is. It's pretty quick with the simple stylesheet below.

Without stylesheets:
<table border="1">
     <tr>
          <td onMouseOver="this.style.backgroundColor='#ccffff'" onMouseOut="this.style.backgroundColor='#ffffff'">this cell highlights</td>
          <td onMouseOver="this.style.backgroundColor='#ccffff'" onMouseOut="this.style.backgroundColor='#ffffff'">so does this one</td>
     </tr>
     <tr onMouseOver="this.style.backgroundColor='#ccffff'" onMouseOut="this.style.backgroundColor='#ffffff'">
          <td>this row highlights</td>
          <td>this row highlights</td>
     </tr>
</table>

With Stylesheets:
<style>
.nav_highlight {background-color:#000066; color:#ffff00}
.nav {color:#000066; background-color:#ffff00}
</style>

<table border="1" class="nav" >
     <tr>
          <td onmouseover="this.className='nav_highlight'" onmouseout="this.className='nav'">this cell highlights</td>
          <td onmouseover="this.className='nav_highlight'" onmouseout="this.className='nav'">so does this one</td>
          <td onmouseover="this.className='nav_highlight'" onmouseout="this.className='nav'">this one too</td>
     </tr>
     <tr  onmouseover="this.className='nav_highlight'" onmouseout="this.className='nav'">
          <td>this row highlights</td>
          <td>this row highlights</td>
          <td>this row highlights</td>
     </tr>
     <tr  onmouseover="this.className='nav_highlight'" onmouseout="this.className='nav'">
          <td class="nav_highlight">this row highlights but this cell is fixed</td>
          <td>this row highlights</td>
          <td>this row highlights</td>
     </tr>
</table>
</tip>



Please respond to thelist at lists.evolt.org

Sent by:  thelist-admin at lists.evolt.org

To:   thelist at lists.evolt.org
cc:


Subject:  Re: [thelist] Table Row Rollover



>The bigger question is how does one change stylesheet refs, rather than
>absolute colours...

Do you mean

<TR onMouseOver="this.className='newClass'">



--------------------- End of message text --------------------

This e-mail is sent by the above named in their
individual, non-business capacity and is not on
behalf of PricewaterhouseCoopers.

PricewaterhouseCoopers may monitor outgoing and incoming
e-mails and other telecommunications on its e-mail and
telecommunications systems.
----------------------------------------------------------------
The information transmitted is intended only for the person or entity to
which it is addressed and may contain confidential and/or privileged
material.  Any review, retransmission, dissemination or other use of, or
taking of any action in reliance upon, this information by persons or
entities other than the intended recipient is prohibited.   If you received
this in error, please contact the sender and delete the material from any
computer.





More information about the thelist mailing list