InformIT: Sams Teach Yourself HTML 4 in 24 Hours

Preloading Images for Speed

The code in Figure 19.2 works flawlessly with both Microsoft Internet Explorer and Netscape Navigator (versions 3 and later of both browsers). There is only one minor problem: The lit images won't be downloaded from your Web site until someone actually moves the mouse over the image. This can cause a significant delay before the highlighted image appears, possibly lowering the all-important Gee Whiz Factor (GWF).

You can avoid this annoyance by including some JavaScript telling the browser to preload the images as soon as possible when the page is displayed. That way, by the time the slow human reader gets around to passing his or her mouse over the link, those images will usually be ready to pop onto the screen. This makes the animations seem to appear without any download delay, giving the page a snappy feel and pumping the GWF back up to truly nerdly levels. Figure 19.5 shows how it's done.

Figure 19.5 This page looks and acts exactly like the page in Figure 19.2, except that all the "lite" images are preloaded for enhanced responsiveness.

There are a couple of things worthy of note in Figure 19.5. The most important is the <script> tag. This is used whenever you need some JavaScript that doesn't go in an attribute of some other tag. You can put <script> tags anywhere in the <head> or <body> section of a document. (The forms example later in this hour talks more about that.)

The  tags just inside the <script> and </script> tags are actually comment tags, which have the effect of hiding the script from older browsers that otherwise might become confused and try to display the code as text on the page. You should always put each of these comment tags on a line by itself, as I did in Figure 19.5.

I won't go too deep into an explanation of the JavaScript in Figure 19.5 because that would get us into a course on computer programming. You don't need to understand exactly how this works in order to copy it into your own pages, using your own image names and graphics files. When you do try this on your pages, don't overlook the fact that I had to use the names from the JavaScript definitions at the top of the page instead of the actual graphics filenames. For example, the OnMouseOver attribute of the name="erica" image now looks like this:

OnMouseOver="erica.src=ercalite.src"

instead of this:

OnMouseOver="erica.src='ercalite.jpg'"

Note

You can also use the OnMouseOver and OnMouseOut attributes with imagemaps (which are covered in Hour 14, "Graphical Links and Imagemaps" ). For an example of a large interactive imagemap, using no fewer than 24 separate images, move your mouse cursor around the pocket watch at the completed 24-Hour HTML Café site at http://24hourHTMLcafe.com .

Peeking at the source code shows you exactly how to incorporate JavaScript commands into an imagemap. (It also reveals that the clock is actually five separate images—four imagemaps and the changing image in the center. They don't call me "Tricky Dicky" for nuthin'.)

Also, don't forget that you can use animated GIFs with JavaScripts, too! For an example, check out the "Predictions and Fictions" link at http://24hourHTMLcafe.com/hour19.

Adding Up an Order Form | Next Section

Previous Section