InformIT: Sams Teach Yourself JavaScript in 24 Hours

Workshop: Finishing up the Page

Over the course of this hour, you've added three different navigational tools to the FSC Web page: ordinary links with status-line descriptions, a drop-down navigation bar, and graphic links that change when the mouse moves over them.

Each of these methods has its advantages and disadvantages. For the best of all three worlds, you can add all these features to the same Web page. Listing 21.2 is the original Web document combined with the functions for the navigation bar, rollovers, and status-line messages.

Example 21.2. The Complete HTML Document

<html>
<head>
<title>Fictional Software Company</title>
<script LANGUAGE="JavaScript1.1" type="text/javascript1.1">
o2 = new Image();
o2.src = "order2.gif";
d2 = new Image();
d2.src = "data2.gif";
w2 = new Image();
w2.src = "word2.gif";
s2 = new Image();
s2.src = "spread2.gif";
function Navigate() {
   var prod = document.navform.program.selectedIndex;
   var cat = document.navform.category.selectedIndex;
   var prodval = document.navform.program.options[prod].value;
   var catval = document.navform.category.options[cat].value;
   if (prodval == "x" || catval == "x")
        alert("Select a product and category.");
   else window.location = prodval + "_" + catval + ".html";
}
</script>
</head>
<body>
<img SRC="fsclogo.gif" alt="Fictional Software Company"
width=405 height=65>
<hr>
<a HREF="spread.html"
   onMouseOver="document.images[1].src='spread2.gif'"
   onMouseOut ="document.images[1].src='spread.gif'">
<img BORDER=0 SRC="spread.gif" height=28 width=173></a>
<a HREF="word.html"
   onMouseOver="document.images[2].src='word2.gif'"
   onMouseOut ="document.images[2].src='word.gif'">
<img BORDER=0 SRC="word.gif" height=28 width=225></a>
<a HREF="data.html"
   onMouseOver="document.images[3].src='data2.gif'"
   onMouseOut ="document.images[3].src='data.gif'">
<img BORDER=0 SRC="data.gif" height=28 width=121></a>
<a HREF="order.html"
   onMouseOver="document.images[4].src='order2.gif'"
   onMouseOut ="document.images[4].src='order.gif'">
<IMG BORDER=0 SRC="order.gif" height=28 width=152></a>
<p>Welcome to our web page! Fictional Software Company
specializes in creating innovative, user-friendly software
applications with descriptions filled with industry
buzzwords.
We have a wide range of products:
</p>
<ul>
<li><a HREF="spread.html"
onMouseOver="window.status='Spreadsheet Information';return true"
  onMouseOut="window.status=''">
Fictional Spreadsheet 7.0</a>
<li><a HREF="word.html"
onMouseOver="window.status=' Word Processor Info';return true"
  onMouseOut="window.status=''">
Fictional Word Processor 6.0</a>
<li><a HREF="data.html"
onMouseOver="window.status='Database Information';return true"
  onMouseOut="window.status=''">
Fictional Database 7.0</a>
</ul>
<p>
Unlike other software companies, our products have
absolutely no bugs, and always work perfectly on all
computers. Nevertheless, you may run into problems in
rare cases, usually your own fault. If this happens,
visit our <a HREF="support.html"
onMouseOver="window.status='Technical Support';return true"
  onMouseOut="window.status=''">
Technical Support</a>
department for helpful information and tips. You can
also view more information <a HREF="company.html"
onMouseOver="window.status=' FSC Software Co.';return true"
  onMouseOut="window.status=''">
about our company</a> or order products with our friendly
<a href="order.html"
onMouseOver="window.status='Order products';return true"
  onMouseOut="window.status=''">
Order Form</a>.</p>
<form name="navform">
<select name="program">
<option VALUE="x" SELECTED>Select a Product
<option VALUE="w">Fictional Word Processor
<option VALUE="s">Fictional Spreadsheet
<option VALUE="d">Fictional Database
</select>
<select name="category">
<option VALUE="x" SELECTED>Select a Category
<option VALUE="tech">Technical Support
<option VALUE="sales">Sales and Availability
<option VALUE="feat">List of Features
<option VALUE="price">Pricing Information
<option VALUE="tips">Tips and Techniques
</select>
<input TYPE="button" NAME="go" VALUE="Go to Page"
onClick="Navigate()">
</form>
<hr>
<p><i>(c)1998 FSC - designed by the FSC staff</i></p>
</body>
</html>

Figure 21.3 shows this page as it appears in Netscape. Of course, on a page with this little actual content, all of these navigation features can make it look cluttered. This shouldn't be a problem if your page has more to say than this one.

Figure 21.3 The complete HTML document displayed by Netscape.

Summary | Next Section

Previous Section