[thelist] Table Row Rollover

Wed Oct 17 10:44:00 CDT 2001

Memo from Martin P Burns of PricewaterhouseCoopers

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

Unfortunately, that doesn't really work if you've got links within
the <td> - as you typically would for navigation.

Because of the cascade, the styling for <a> (whether by
CSS or in the <body> tag if not set via CSS) will take precedence.

So what happens is the following when you roll over the td but not the
link:
the table cell swaps but the link doesn't. This has 2 issues:
1) It's a false feedback - it indicates that the whole cell is a button,
which
        it isn't
2) If your hover is essentially a text/background colour swap, the link
    disappears, which appears as just plain wierd behaviour

If you roll over the link within the cell, then everything's OK of course.

So what you need is only a rollover of the link to fire the table style
change, so we're back to slightly more complex javascript, based
on the code posted the other day whereby you swap the style of
both the link (using basic a:hover) and the parent cell (specified
by id and controlled by JS).

<tip type="Hover attributes for table cells" author="Martin Burns">
[with acknowledgments to Peter-Paul Koch, Nick Bourgeois and
jeff]

To have a table-based navigation perform correct hover behaviours
(ie the whole cell highlights only when you roll over a text link within
it),
here's what you do:

There are 3 bits - a CSS bit, a JS bit and an HTML bit

CSS bit (simplified to the key bits):
.nav {
     color: #003366;
     background-color: #33cc99;
}
a:HOVER, .nav-highlight {
     color: White;
     background-color: #003366;
}

Javascript bit:
<script>
function navRollOver(obj, state) {
  document.getElementById(obj).className = (state == 'on') ? 'nav-highlight' : 'nav';
}
</script>

HTML bit:
<table width="100%" cellspacing="0"  summary="sections"  bgcolor="#33cc99">
    <tr valign="bottom">
        <td align="center" class="nav" id="articles">
            <a accesskey="A" href="/articles/" onMouseOver="navRollOver('articles', 'on')" onMouseOut="navRollOver('articles', 'off')">Article</a>
        </td>
        <td align="center" class="nav" id="cv">
            <a accesskey="C" href="/cv/" onMouseOver="navRollOver('cv', 'on')" onMouseOut="navRollOver('cv','off')">CV</a>
        </td>
        <td align="center" class="nav" id="photos">
            <a accesskey="P" href="/pics/" onMouseOver="navRollOver('photos', 'on')" onMouseOut="navRollOver('photos','off')">Photos</a>
        </td>
        <td align="center" class="nav" id="contact">
            <a accesskey="G" href="/contact/" onMouseOver="navRollOver('contact', 'on')" onMouseOut="navRollOver('contact','off')">Get in touch</a>
        </td>
        <td align="center" class="nav" id="morgan">
            <a accesskey="B" href="/morgan/" onMouseOver="navRollOver('morgan', 'on')" onMouseOut="navRollOver('morgan','off')">Morgan's site</a>
        </td>
    </tr>
</table>

</tip>

Cheers
Martin

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

Memo from Martin P Burns of PricewaterhouseCoopers

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

Yup, that was the one, and here it is as a tip:
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>

--------------------- 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.