Chapter 4. Working with Images

One of the best uses of JavaScript is to add visual interest to Web pages by animating graphics, and that's what this chapter is all about. Making an image on a Web page change when the user moves the mouse over the image, thereby making the page react to the user, is one of the most commonand effectivetricks you can learn in JavaScript. This rollover, as it is called, is easy to implement, yet has many applications, as you'll see.

Rollovers are a great tool, but you can do much more than rollovers with JavaScript, such as automatically change images, create ad banners, build slideshows, and display random images on a page.

In this chapter, you'll learn how to make JavaScript do all of these image tricks. Let's get started.

Table 4.1. Just Enough HTMLImages

Tag	Attribute	Meaning
img		Contains the attributes that describe the image to be displayed by the browser
	src	Contains the URL of the image, relative to the URL of the Web page
	width	Contains the width (in pixels) at which the browser will display the image
	height	Contains the height (in pixels) at which the browser will display the image
	border	The width of the border to be displayed
	name	The name that JavaScript uses to refer to this image; as with other JavaScript objects, no spaces or other punctuation is allowed, and it cannot start with a number
	alt	Used for non-visual browsers in place of the image
	hspace	A horizontal buffer area around the image
	vspace	A vertical buffer area around the image
	align	Describes where this image should be placed on the page in terms of horizontal or vertical alignment
	id	A unique identifier, which JavaScript will use to manipulate the image