[Javascript] Dynamically Highlight and Scroll to Elements

Thu Sep 30 22:13:04 CDT 2004

Does anyone have any suggestions for the following functionality?
I have an HTML page that looks something like this:

<html>
  <img src="A_Picture.jpg" usemap="This_Map">
  <MAP NAME="This_Map">
    <area shape="RECT" coords="26,94,112,188" href="#Item1">
    <area shape="RECT" coords="157,343,238,412" href="#Item2">
                              .
                              .
                              .(con'd)
  </MAP>

  <table style="width:100%;">
    <thead>
      <tr>
        <td>
          <a name="Item1">First Item</a>
        </td>
      </tr>
      <tr>
        <td>
          <a name="Item2">Second Item</a>
        </td>
      </tr>
                        .
                        .
                        .(con'd)
    </thead>
  </table>
</html>

The mapping functionality works great; by clicking on the "hotspots" located on
the graphic, the associated item within the table is scrolled to the top of the
page.  However, if the user clicks on a hotspot associated with an item located
toward the beginning or the end of the page, the page scrolls
as far as it can, but the pertinent item may still appear in the middle of the
page.  What other method can I use to distinguish the selected items within the
table?  I would ideally like to highlight the selected item's text within the
table while simultaneously mapping to it.  Does that require that I dynamically
reconstruct the page with different background/text color attributes for that
item, and if so, how do I correspond the scroll location with that new page?

Any suggestions on that method or another text distinguishing method would be
greatly appreciated.

Tracy.