Generating Links Using Script

---

XSL can easily generate <A> elements in the output that the browser interprets as links. Often these links are created from URLs that reside as data in the source document or as constants in the style sheet. Automatically generating linked cross-references in the document requires a bit more work. The first example in this section creates a simple table of contents in which each item is a link to the corresponding chapter.

To generate the link you need to manufacture two <A> elements—one representing the link in the table of contents, and another representing the destination of the link.

First let's create the destination of the link by wrapping each chapter title in an anchor with a NAME attribute. The value of this attribute doesn't matter, as long as it is unique to the section element and the same value can be obtained when generating the link pointing to this fragment. The uniqueID function generates a unique identifier for each particular section element. Each node in the source tree will be assigned a different identifier, and each time you ask for the identifier for a particular node, you will get the same number.

<xsl:template match="section">
  <DIV>
    <H2>
      <A>
        <xsl:attribute name="NAME"><xsl:eval>uniqueID(this)</xsl:eval></xsl:attribute>
        Chapter <xsl:eval>formatIndex(childNumber(this), "1")</xsl:eval>.
        <xsl:value-of select="title"/>
      </A>
    </H2>
    <xsl:apply-templates />
  </DIV>
</xsl:template>

The table of contents contains links to each of the sections. Here the same mechanism is used to generate an <A> element, only this time it is placed in the HREF attribute to indicate that this should be displayed as an active link, and to include # before the ID to indicate that the value should be treated as a fragment identifier. Since the same section element has been referenced both in building the table of contents and in displaying each chapter, the uniqueID function will return the same value each time.

<DIV STYLE="border:1px solid black; padding:.5em; font-size:smaller">
  <H4>Table of Contents</H4>
  <xsl:for-each select="document/section">
    <DIV STYLE="margin-left:1em">
      <A>
        <xsl:attribute name="HREF">#<xsl:eval>uniqueID(this)</xsl:eval></xsl:attribute>
        Chapter <xsl:eval>formatIndex(childNumber(this), "1")</xsl:eval>.
        <xsl:value-of select="title"/>
      </A>
    </DIV>
  </xsl:for-each>
</DIV>

Try it! These templates generate the linked table of contents in the To The Pole Sample (with TOC). Since this is a short example, you might need to shrink the window to see that clicking the links in the table of contents scrolls to the corresponding chapter.

Download this sample.

For a more elaborate example that generates a linked hierarchical table of contents, see Scoping Templates.