One-to-many Linking with the HTML a Element

Bob DuCharme, 2003-01-18

This demonstrates the use of nested a elements to implement one-to-many links in HTML. Except for those links, this document is regular XHTML. The referenced XSLT script, 1toM.xml, copies everything verbatim but converts nested a elements to JavaScript menu generation code that I learned about from a Netscape DevEdge article. The XSLT script has a file extension of xml because for now my hosting provider ships a file with an extension of xsl with a MIME type of text/html, in which case Mozilla doesn't know that it's a stylesheet to apply to the document.

Compare the markup in the following paragraph (do a View Source to see it) with the behavior of the links when you click them. The green links are the one-to-many ones. This has been tested with Mozilla 1.2.1 and IE 6.0 from a Windows 98 box.

While the Recommendations for W3C specs such as XSLT and CSS Level 2 fit in one document, more complex specs such as W3C Schemas Part 0: Primer Part 1: Structures Part 2: Datatypes and DOM Level 2 Core Specification Events Specification Style Specification Traversal and Range Specification Views Specification require multiple documents. It helps you appreciate the brevity of the original XML 1.0 spec, although some would consider the Namespaces spec to be a part of that now.

Ideally, the same processing instruction of

<?xml-stylesheet href="" type="text/xsl" ?>

at the top of your XHTML with nested a elements should cause the same thing to happen. (The XSLT script doesn't make the anchor text green, though; it assigns its a element to have a class value of "multi", and my CSS stylesheet makes the "multi" a elements green.) Let me know!

2003-01-19: It doesn't work in Netscape 7.01, according to the JavaScript console, because of a problem in the menu.js DevEdge JavaScript code (Error: document.body has no properties Source File: Line: 94). If anyone else tries this with Mozilla or Netscape and it doesn't work, let me know what the JavaScript console (/Tools/Web Development/JavaScript Console) says.