A picture is worth a thousand words. Whether it's a slide show, banner, movie, or photo album, the Web contains a huge collection of images. Any time you buy something online, there is usually an image associated with the item, maybe a small image, and then a bigger image if you want more detail. Whatever it is, a book, a house, a pair of shoes, or a toy, we like to see it before we put it in our virtual shopping cart and pay the money.
11.3.1 HTML Review of Images
Table 11.21. HTML image tags.
Using an Image in an HTML Web Page
The following example is an HTML file linked to an image. In this example, we review the way inline images are created in a document.
<html> <head><title>HTML Images</title></head> <body bgcolor="lightblue"> <h2> This Is Baby William</h2> 1 <img src="baby.jpg" alt="baby" border=2 align="left" hspace="10" 2 width="220" height="250"> 3 <pre> Father calls me William, sister calls me Will, Mother calls me Willie, but the fellers call me Bill! Mighty glad I ain't a girl-- ruther be a boy, Without them sashes, curls, an' things that's worn by Fauntleroy! Love to chawnk green apples an' go swimmin' in the lake-- Hate to take the castor-ile they give for belly-ache! Most all the time, the whole year round, there ain't no flies on me, But jest 'fore Christmas I'm as good as I kin be! </pre></body> </html>
Eugene Field, Jest 'Fore Christmas , in Childcraft , Vol. 2, (Chicago: Field Enterprises, Inc., 1949).
Table 11.22. image object properties.
Replacing Images Dynamically with the src Property
Preloading Images and the Image() Constructor
If you assign a new image to the src property of an image object, there may be some lag in the time it takes to download the image from the server. And if you have a slow connection, this can be a real turnoff, to the point that you don't even bother to wait for the image to load. To solve this problem, the Image() constructor allows you to preload an offline image; this puts the image in the browser's cache before it is used. This technique of caching the image makes the response time much faster, especially when you have large images, animation, rollovers, and the like. The Image() constructor can also define the size (height and width, in pixels) of the cached image. For seamless transition when replacing one image with another, both images should be of the same size. To use the Image() constructor, see below.
var newImage = new Image(); var newImage = new Image(height, width) newImage.src="image.gif";
var myImage = new Image(200,300); myImage.src="baby.gif";
A Simple Rollover with a Mouse Event
Randomly Displaying Images and the onClick Event
By using the Math object's random() method, it is sometimes fun to randomly generate pictures from a list of images. Example 11.36 demonstrates how to change the src attribute of an image object by using a random number as the index of an elment in an image array. All of the images are preloaded by using the Image() constructor, greatly improving on the time it takes to load the images.