O'Reilly logo

JavaScript Application Cookbook by Jerry Bradenbaugh

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The Syntax Breakdown

Before we consider any code, it might be a good idea to get a visual sense of the program flow. Figure 5.5 illustrates the basic flow from beginning to end. Basically, you begin by creating your image form and setting the specs for each rollover. Then you can toggle back and forth between previewing, making changes, and generating the code. When you see what you like, copy and paste the generated code.

ImageMachine has three files: a frameset page and two content pages. The frameset is named index.html, and contains files nav.html and base.html. index.html has neither JavaScript nor any surprises. Brace yourself; here are all nine staggering lines, shown in Example 5.1.

Example 5-1. index.html

     1  <HTML>
     2  <HEAD>
     3  <TITLE>ImageMachine</TITLE>
     4  </HEAD>
     5  <FRAMESET ROWS="105, *" FRAMEBORDER="0" BORDER="0">
     6    <FRAME SRC="nav.html" NAME="nav" SCROLLING=NO>
     7    <FRAME SRC="base.html" NAME="base">
     8    </FRAMESET>
     9  </HTML>
The ImageMachine logic

Figure 5-5. The ImageMachine logic

If you look at base.html, you’ll see more static HTML. Before we get to nav.html, shown in Example 5.2, it’s important to understand a few things about the code you’re about to see. It’s long (400+ lines) and somewhat hard to read, but not all that complicated.

Example 5-2. nav.html

 1 <HTML> 2 <HEAD> 3 <TITLE>ImageMachine</TITLE> 4 <SCRIPT LANGUAGE="JavaScript1.2"> 5 6 var platform = navigator.platform; 7 var lb ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required