The previous section showed you how to program an Anchor element that is either a bookmark or a link. HTML also provides a Link element that can be used to define relationships between different types of documents. This section focuses on a technique for defining relationships between documents using the Link element and the REL and HREF attributes, which can be accessed from scripts.
At the time of this writing, Internet Explorer uses link relationships for style sheets. However, by writing some simple scripts, you can use the REL attribute to define other relationships. Defining relationships not only can make your Web site more manageable, but it also can make the Web site accessible to tools that analyze Web sites.
The following example demonstrates how to create a navigation bar that reads each document's Link element to ascertain the next and previous documents. A navigation bar is useful when a sequence of documents is being presented. The navigation bar and contents panes are defined through a simple frameset. Whenever a new document is loaded, the document calls a function on the frameset to update the navigation buttons based on the new document's links.
Figure 9-3 shows the navigation bar in action. The availability of the buttons in the top pane and their destination when clicked are defined by Link relationships.
Figure 9-3. A navigation bar based on Link elements.
The links.htm document, shown in the following code, defines the frameset and contains the core code for managing the relationship between the links on the page and the navigation bar. Each document displayed in the contents frame must call the setupLinks function after it loads in order to update the navigation bar of the navigation pane. When the page unloads, the clearLinks method must be called in order to disable all the relationship buttons, thereby ensuring that the links are appropriate if the user navigates to a page that does not define any relationships.
<HTML>
<HEAD>
<TITLE>Link Relationships</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function setButton(b, dis, title, href) {
b.disabled = dis;
b.title = title;
b.href = href;
}
function clearLinks() {
var navDoc = window.navigation.document.all;
// Initialize buttons by disabling them
// and removing their titles.
with (navDoc) {
setButton(previous, true, "", "");
setButton(next, true, "", "");
}
}
function setupLinks(doc) {
// The calling document needs to be passed in.
// Get all the Link elements.
var links = doc.all.tags("LINK");
var navDoc = navigation.document.all;
clearLinks();
for (var intLink = 0; intLink < links.length; intLink++) {
var el = links[intLink];
if ("previous" == el.rel) {
/* If a previous relationship is defined, update
the buttons. */
setButton(navDoc.previous, false, el.title,
el.href);
}
if ("next" == el.rel) {
/* If a next relationship is defined, update
the buttons. */
setButton(navDoc.next, false, el.title, el.href);
}
}
}
</SCRIPT>
</HEAD>
<FRAMESET ROWS="28, *" BORDER=0>
<FRAME SRC="navigate.htm" NAME="navigation" SCROLLING=NO>
<FRAME SRC="contents.htm" NAME="contents">
</FRAMESET>
</HTML>
This code creates the navigation bar:
<HTML>
<HEAD>
<TITLE>Navigation Bar</TITLE>
<STYLE TYPE="text/css">
body {margin-top:2pt; margin-left:2pt; background:gray}
input {font-weight:bold}
</STYLE>
</HEAD>
<BODY>
<INPUT TYPE=BUTTON VALUE="TOC" TITLE="Table of Contents"
ONCLICK="top.contents.location = `contents.htm';">
<INPUT TYPE=BUTTON ID="previous" VALUE=" < "
ONCLICK="parent.contents.location = this.href;">
<INPUT TYPE=BUTTON ID="next" VALUE=" > "
ONCLICK="parent.contents.location = this.href;">
</BODY>
</HTML>
NOTE: The buttons in this example are drawn with extra spaces between them because carriage returns separate their tags in the code. To close the gap between the buttons, remove the carriage returns and all spaces between the Input elements.
The following code is a sample contents file that defines a link relationship to the next document in the sequence. When this document loads, it must call the setupLinks function to update the available links, and when it unloads it must call clearLinks.
<HTML> <HEAD> <TITLE>Contents</TITLE> <!-- Only a next relationship is defined. The Previous button will be disabled for this document. --> <LINK REL="next" HREF="chapter1.htm" TITLE="Chapter 1"> </HEAD> <BODY ONLOAD="parent.setupLinks(window.document);" ONUNLOAD="parent.clearLinks();"> <H1>Table of Contents</H1> </BODY> </HTML>
This example demonstrates two simple relationships, but it can be easily extended with more relationships to provide an enhanced toolbar in the navigation pane.