Highlighting individual elements through script..

Subject: Highlighting individual elements through script..
From: Nicolas Pottier <nic@xxxxxxxxxx>
Date: Thu, 20 May 1999 13:13:00 -0700
Hello everybody..

Well, I've been hacking away at this XSL stuff for a couple days now and
have done some relatively interesting things with it, but I seem to be
stuck again.  I currently have an XSL file which will use some script
and stylesheets in order to highlight or unhighlight the people in a
file in response to a click. (see below for the XML and XSL files)  This
is pretty cool stuff, and I'm happy with it, but I want to go one step
further and am completely stuck.  First off, my example XML file
represents a documnet, with the people in each sentence tagged, as well
as a list of unique people for the document.  I would like to be able to
have a specific person highlight in respone to a user clicking on it. 
IE, if they click on Jill in the example below, I would like all Jill
(key="1") PERSONs to turn bold or something.  As of right now I really
don't have any clues on doing this.  Can anybody help?

My platform is IE5.0, though I do have XT running now as well.

-Nic (files follow)

---XML FILE---

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="paragraph.xsl" ?>
<DOCUMENT>
<PARAGRAPH>
<SENTENCE>Grumpy <PERSON key="0">Jack</PERSON> went up the
hill.</SENTENCE>
<SENTENCE>Angry <PERSON key="1">Jill</PERSON> followed him and took a
nasty spill.</SENTENCE>
<SENTENCE>Poor <PERSON key="0">Jack</PERSON>, now he has to carry
<PERSON key="1">Jill</PERSON></SENTENCE>
</PARAGRAPH>
<PEOPLE>
<PERSON key="0">Jack</PERSON>
<PERSON key="1">Jill</PERSON>
</PEOPLE>
</DOCUMENT>

---XML FILE---

And an XSL File which looks like this:

---XSL FILE---

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl";>
  <xsl:template match="/">
    <HTML>

    <SCRIPT language="JavaScript">
      <xsl:comment>
        <![CDATA[ 
          function highlightPeople() {
	    unpeopleLink.style.display = "block";
	    peopleLink.style.display = "none";
	    document.styleSheets[0].rules[0].style.backgroundColor =
"yellow";	    
          }
          function unhighlightPeople() {
	    peopleLink.style.display = "block";
	    unpeopleLink.style.display = "none";
	    document.styleSheets[0].rules[0].style.backgroundColor = "white";
          }
	]]> 
      </xsl:comment>
    </SCRIPT>

    <STYLE TYPE="text/css">
      .people {backgroundColor:"white"}
    </STYLE>

    <BODY>
      <xsl:apply-templates select="DOCUMENT/PARAGRAPH/SENTENCE"/>
      <P/>
      <B>People:</B><UL>
      <xsl:apply-templates select="DOCUMENT/PEOPLE/PERSON"/>
      </UL>
      <SPAN ID="peopleLink">
        <A HREF="javascript:highlightPeople();">
	  Highlight People
	</A>
      </SPAN>
      <SPAN ID="unpeopleLink" STYLE="display:none">
        <A HREF="javascript:unhighlightPeople();">
	  Unhighlight People
	</A>
      </SPAN>
    </BODY></HTML>
  </xsl:template>

  <!-- Start of default XSL templates which IE should include but doesnt
-->

  <xsl:template match="text()">
    <xsl:value-of/>
  </xsl:template>

  <xsl:template match="*">
    <xsl:apply-templates/>
  </xsl:template>

  <!-- End of default XSL templates which IE should include but doesnt
-->

  <xsl:template match="SENTENCE">
    <xsl:apply-templates/><BR/>
  </xsl:template>

  <xsl:template match="PEOPLE/PERSON">
    <LI><xsl:apply-templates/></LI>
  </xsl:template>

  <xsl:template match="SENTENCE/PERSON">
    <SPAN CLASS="people"><xsl:apply-templates/></SPAN>
  </xsl:template>

</xsl:stylesheet>

--XSL FILE---


 XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list


Current Thread