Previous Section:
Programming the Anchor Element
Programming the Link Element
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.
Run Sample
The links.htm Document
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>
The navigate.htm Document
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 contents.htm Document
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.
Next Section:
Programming the Image and Map Elements
