Chapter 3. The Interactive Slideshow

Application FeaturesJavaScript 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.

The opening slide

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 ...

Get JavaScript Application Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.