The Web wouldn't be much to look at these days with-out graphics. Graphics are definitely in abundance in Cyberspace, but even graphics can become boring for many if they don't move. One way to liven up your Web pages is to incorporate animation files, such as .AVI, .FLI, or .MOV, but these require the user to either have external (helper) applications to view the files or install plug-ins into the browser. Fortunately, there are other methods of animation that don't rely on external additions to the Web interface.
The simplest method of image animation takes advantage of two attributes of the <IMG> tag: SRC and LOWSRC. Both specify image files to load and display. The difference between them is the order in which the graphics are loaded. If the LOWSRC attribute is specified, the browser loads the associated image first, followed by the SRC attribute's image, regardless of the order the attributes are specified within the <IMAGE> tag.
The original intention of the LOWSRC attribute was to help combat the amount of time it takes to retrieve an image from a server. With LOWSRC, you could specify a "low-resolution" image, perhaps limited to a simple black-and-white bit map. This was very small and would load quickly, giving the user something to look at while the high-resolution (full-color) image was retrieved.
Because LOWSRC only indicates an image (any kind) to be loaded first, you can just as easily load two different images. This gives you a "before-and-after" effect. An example of this technique, which is found on the Web at http://www.winternet.com/~thepulse/, is shown in figure 7.1.
Figure 7.1 : Using LOWSRC and SRC allows this site to make the airbrush in the logo squirt paint.
The logo graphic in the center of the screen is actually two separate image files. The final image with a splash of paint spraying from the tip of the airbrush, and the LOWSRC image without the paint spray. Other than that, the images are identical. Link to this site and the logo displays. After a short downloading time, the paint sprays from the brush's tip.
There are a few things to remember when using this method:
| TIP |
With Navigator 3.0 and Internet Explorer 3.0, the space occupied by an <IMG> tag displays on the screen as a beveled outline with a miniature image icon inside until the graphic completely loads. If you're trying to get fancy and have a transparent GIF overlay your background, this outlining defeats the purpose. To get around this, specify a LOWSRC attribute that loads a small graphic that's either totally transparent or the same color as your solid-color background. By keeping this graphic as small as possible, you eliminate the beveled outline quickly. |
The client-pull principle was first introduced in chapter 1, "Browser Identification," and has the browser load a new page. There are several ways to implement client-pull. Two ways are discussed here.
Using the HTML <META> tag:
<META HTTP-EQUIV="Refresh" CONTENT="secs; URL=newURL">
You can cause the user's browser to "pull" a new document from the server after a given period of time, as specified by the secs parameter of the CONTENT attribute. Extending this to graphic animation, you simply create a sequence of HTML documents with the <META> tag of any given document, specifying the URL of the next document in the sequence.
The client-pull system has some problems:
An alternative method for implementing client-pull is to switch to client-side scripting.
JavaScript provides a set of timer-control functions that allows you to create and react to timers. This way, you can:
Force new pages to load at faster intervals in the HTML-based system.
Build dynamic URLs of the successive documents.
Being able to generate URLs "on-the-fly" (dynamically) gives you random pull capability, such as that used in advertising. A Code fragment demonstrating random pull is shown in listing 7.1.
Listing 7.1 JavaScript-Based Random-Pull
<SCRIPT LANGUAGE="JavaScript">
<!--
...
urlList = new initArray();
urlList[1] = "frame1.html";
...
urlList[5] = "frame5.html";
setTimer("document.location.href = " + urlList[random(5)], 10000);
// -->
</SCRIPT>
Whether you use HTML-based or JavaScript-based client-pull, you're still loading a complete HTML document from the server with all the associated overhead, screen redrawing, and so on. If you're looking for animations that are more subtle, you might want to look at animated GIFs.
Both Netscape Navigator and Internet Explorer support the current GIF standard (called GIF89a), as do most browsers. While other browsers support one feature or another, Navigator 2.0 and Explorer 3.0 (and later versions of both) also support the standard's ability to store more than just a single image. Note that interlacing and transparency are part of GIF89a. In fact, GIF89a also supports storing timing data, so that the speed that successive images display can be controlled. This makes it possible to create "flip-book-like" animations that store as a single image file and don't require helper applications or plug-ins to view.
Netscape added its own flavor to the standard by creating a Netscape Application Block that when embedded within a GIF file, triggers the image to loop from the PC's cache instead of having to be reloaded from the server.
While other animation file types, such as QuickTime or .AVI, require preexisting software (helper apps or plug-ins) to run, animated GIFs are totally self-contained. The file downloads once and plays from the computer's disk cache. From the perspective of HTML, an animated GIF is no different from any other image. You simply create an IMG tag; the tricky part is creating the file itself.
The basic principle for creating an animated GIF is to:
| NOTE |
Navigator doesn't handle the timing delay between frames the same way Internet Explorer does. While Internet Explorer's delay is tied to the system clock for a steady frame rate, Navigator's delay loop is tied to the browser's event queue. This also handles keyboard and mouse activity. You can test this by visiting a page that utilizes animated GIFs and by moving the mouse over the browser window while watching the animation. Under Navigator, you control the speed of the animation by varying the speed of the mouse, while Explorer always animates at a constant rate. If you're trying to create smoothly timed animations, utilize a plug-in or client-side scripting. This is covered next. |
The easiest way to create animated GIFs is to use one of several shareware applications that do most of the work for you. Examples are:
GIF Construction Set (for Windows) by Alchemy Mindworks
GIFLoop (for DOS) by Royal Frazier
WhirlGIF (for UNIX) by Kevin Kadow
GIFBuilder (for Macintosh) by Yves Piguet
NOTE |
These programs and links to others are found on the companion CD. If you want to check out some online examples of animated GIFs in action, stop by the "GIF89a Animation Gallery" at http://trureality.com/anime.htm. n |
You can also specify the x and y coordinates of the upper-left
corner of each frame within the "stage" created by the
first image in the sequence. This way, if the change from frame
to frame is small, you can reduce the overall file size by having
each successive frame contain only the image area that changes.
CAUTION |
When creating animated GIFs or when using any type of multi-image animation, it's easy to construct image files or animation sequences that are almost as big as multimedia files (like .AVI or .MOV). Remember, the larger the file, the longer it takes your page to load. A good rule of thumb when gauging load time is to assume that the average Internet user connects through a 14.4K modem. This equals a bandwidth, or transmission rate, of about 1.7K per second-assuming a perfect condition. To give yourself some slack, figure that 1K of data takes 1 second to transmit. Using this rule, a 60K image takes about 60 seconds. It can take minutes for someone to view your site because each component of a Web page adds to the transfer time. Text compresses somewhat and transfers faster, but it averages out over the page. |
With Navigator 3.0, JavaScript's control over the in-document images (such as those defined by an <IMG> tag) has been extended to permit images to be dynamically loaded without requiring the entire page to be reloaded. With this new trick, you can pull some interesting punches with your graphics-but first, a little background on the new Image object.
As with other JavaScript objects that provide "wrappers" to HTML objects, the properties of an Image object reflect the attributes of a corresponding <IMG> tag. Two properties are of particular interest:
src-reflects the SRC attribute and contains the URL of the image that displays.
lowsrc-reflects the LOWSRC attribute.
Other properties, such as width and height, are read-only once the image displays, but src and lowsrc can be changed even after the image is loaded. Within JavaScript, changes can be made to a timer or mouse event that reflect in the display image. To specify a new graphic for a given Image object, simply change either the src or lowsrc attribute:
imageObject.src = "newgraphic.gif";
| NOTE |
It was shown earlier in this chapter how to use the LOWSRC attribute to load a low-resolution graphic. This graphic quickly displays an image in place on the page before the high-resolution graphic associated with the SRC attribute retrieves from the server. The order of loading LOWSRC first and then SRC still applies with the Image object. If you want to change the lowsrc attribute, you need to do it before you change the src attribute. You must change the src attribute as well for the graphic to actually be loaded. If lowsrc is changed but src remains the same, nothing happens. |
Within the JavaScript hierarchy, all the Image objects associated with <IMG> tags are stored within the images[] array, a property of the document object. With this in hand, loading a new image into an existing object is simple:
document.images[1].src = "newgraphic.jpg";
loads newgraphic.jpg into the second <IMG>
tag in the document.
| NOTE |
While user-defined arrays begin their indexing with 1, the images[] array is built-in like the forms[] and frames[] arrays, and begins its indexing at 0 (zero). Therefore, the first <IMG> tag is referenced at: document.images[0] |
While most Image objects in a document correspond to an <IMG> tag, it is not a requirement. An additional benefit of the Image object is that you can use the JavaScript new operator to create objects in memory. Once you create the object, load additional images that aren't displayed. For example:
memImage = new Image(); memImage.src = "logo.gif";
would create an Image object in memory and load the file logo.gif from the server. The resulting object would have the dimensions of the graphic. If you wished to stretch a graphic to a specific size, specify the dimensions when you create the object, as in:
memImage = new Image(50, 100);
This creates an image 50¥100 pixels in size. At this point,
any image file you load into the image resizes to the dimensions
of the object.
| NOTE |
Once created, the dimensions of an image cannot be changed. Note that you can change the src attribute and the associated image as often as you choose. |
This gives you the ability to "cache" images locally
on the user's machine to make the transition between images faster.
Even though cached objects aren't connected with <IMG>
tags, they still maintain all the properties of Image
objects.
| CAUTION |
Remember that any image loaded, even for future display, must be pulled from the server; in the case of cached images, the cached copy is checked against the server copy to ensure that the most recent file is being used. This increases the time necessary to load all the parts of a particular page. Creating Image objects in memory and loading them "behind the scenes" helps to speed the visual display of a page. This is done by deferring additional image loading until after the page loads. Remember that there is still retrieval time for all of your images to come from the server. |
You can change the display image by setting the src and lowsrc properties. Setting the src property has the side-effect of starting to load the new URL into the image area and aborting the transfer of any image data that is already loading into the same area. If you're going to alter the lowsrc property, you need to do so before setting the src property. If the URL in the src property references an image that is not the same size as the image cell it is loaded into, the source image scales to fit.
The main use for an explicitly created Image object is to force an image to retrieve from the server before it is actually needed for display. That way, when a statement such as
document.images[0].src = myImage.src
executes, the image displays immediately because it is already in memory. Use this capability to create smooth animations or display one of three images based on some form input. The following is a script fragment that takes advantage of this trick to create "live buttons" that change their graphic when the mouse passes over them (see listing 7.2).
Listing 7.2 Implementing "Live" Buttons
<SCRIPT LANGAUGE="JavaScript">
<!--
onImage = new Image();
onImage.src = "over.gif";
offImage = new Image();
offImage.src = "notOver.gif";
function goLive() {
document.images[0].src = onImage.src;
setTimer("document.images[0].src = offImage.src;", 5000);
}
// -->
</SCRIPT>
...
<A HREF="nextPage.html" ONMOUSEOVER="goLive()"><IMG
SRC="notOver.gif" BORDER=0></A>
...
Because of the nature of the onMouseOver event, it's necessary to set a timer to restore the "off image" after a period of time.
With the tricks and techniques presented in this chapter, you can add "zing" to your Web pages. For additional ideas on how to utilize these methods or learn more about them, you can check out: