JavaScript Application Cookbook

Chapter 3. The Interactive Slideshow

Application Features	JavaScript Techniques
• Advancing Slides with Graphics and Descriptive Text	• The First Step to Cross-Browser DHTML
• Context-Sensitive Animated Slide Navigation	• The Advantage of Simple Naming Conventions
• Hands-Free Autopilot Mode	• The Power of eval()
• Easy Slide Management and Scalability	• Using setInterval() and clearInterval()

This application allows users to view groups of slides, in any order, or consecutively in autopilot mode according to a timed interval you choose. Each slide is a DHTML layer that contains an image and descriptive text. Your slides could conceivably contain almost any combination of text, graphics, DHTML, and the like. These slides give the user a fictitious tour of the wild animal kingdom. Figure 3.1 shows the opening screen.

Figure 3-1. The opening slide

Notice the slides in the center of the screen and the two graphics labeled “Automate” and “<Guide>" at the top left of the screen. The arrows of the “<Guide>" image (< and >) allow the user to navigate slide by slide, forward or backward in the slideshow.

Users can also move to any slide in the show by clicking “Guide.” This reveals a slide menu that automatically moves the user to the desired slide by passing the cursor over the corresponding slide name. Clicking “Guide” once again conceals the slide menu. Figure ...