HTML and CSS Reference
In-Depth Information
slideshow is created, how to control the start and stop of the slideshow, how to create
clickable images, and simple animation. Once you understand the basics, understanding
and debugging existing code will be much easier.
When you build a slide show, the visitor of your site must be a first consideration; for
example, what is the bandwidth and type of browser, or will the load time be too slow
if you are loading a large number of images? Navigation is another important consider-
ation. Will the visitor be able to control the slideshow manually or will it automatically
start when the page loads and stop when it exits or when it has completed a specified
number of cycles? You might want to create buttons to control the slideshow such as
start, pause, go back, forward, speed up, slow down, stop, and so on. You might want to
create optional hyperlinks or clickable images where each frame leads to a different
URL. You might want to randomly display the images or show them in a certain
sequence.
The size of the images also weighs into a well-constructed slideshow. When you have
a series of images coming from different sources, they will probably not have the same
height and width. When the slideshow starts, images of different sizes will give the page
a jumpy appearance. You might want to crop the images to make them all the same size.
Because the first image you load will be followed or overlaid by the next series of images,
the dimensions of that image will determine the size of the rest of the images giving the
page a smooth transition as each one loads. However, if you have images of varying
dimensions, forcing all the images to be of the same size, might distort the image objects
if not proportionally scaled. You might also want to get a sleek fade-in effect when one
image replaces the previous image, or get persistence so that when the user reloads the
page, he or she picks up in the slideshow where it left off.
Figure 12.21 on page 443, called “Ultimate Fade-in slideshow (v2.1) located at
dynam-
icdrive.com
, demonstrates a sophisticated, cross-browser, fade-in slideshow script, and
the site offers free code to build your own slideshow similar to the demos shown later,
saving lots of time and energy. Before downloading sophisticated scripts from the Web,
this chapter describes a very basic slideshow to help you understand how JavaScript
slideshows work, which will help you later when you are debugging, updating, revising,
and maintaining more complicated scripts.
Note: To disable the viewer from right-clicking the mouse to get a menu for saving images
from your page, go to
http://www.dynamicdrive.com/dynamicindex9/noright2.htm
for free Java-
Script code.
Example 12.10 is a JavaScript program that cycles through a selection of images. It
makes use of image replacement, a timer function, and buttons that serve as controls to
give the user the ability to start and stop the slideshow. See Chapter 13 for an example
(Example 13.11) of a slideshow using a mouse rollover.
