HTML and CSS Reference
In-Depth Information
Figure 12.1 Using images in an HTML page: Output from Example 12.1.
12.1.2 The JavaScript image Object
With the Legacy DOM, JavaScript provided the image object as a property of the docu-
ment object, giving you easy access to the images that have been loaded into a document.
Although you can use the W3C versions of the DOM, the Legacy DOM is supported by
all modern browsers and is commonly used when working with images. Just like the
form object, the image object corresponds to the HTML <img> tag and each image is
assigned to the images[] array 1 in the order in which the image appears within the doc-
ument. The first image would be represented as document.images[0] , the next as docu-
ment.images[1] , and so on (see Figure 12.2). As with forms, images can also be named
and given an id . The properties for the image object correspond to the HTML attributes
of the <img> tag, such as src , width, height, border, vspace, and hspace , and are shown in
Table 12.2. 2 It is possible to assign values to these properties to dynamically change the
size, shape, and border of the image. There are no common methods for the image object
unless you use the id attribute and methods such as getElementById() and getElements-
ByTagName() provided by the W3C DOM.
JavaScript also provides event handlers that are triggered when an image is loaded, a
mouse crosses the image, or when the user clicks on an image. Although we use event
handling in this chapter, Chapter 13 provides a more complete discussion.
1. Implemented starting in JavaScript 1.1.
2. These properties are common to both Mozilla/Firefox and Internet Explorer. Internet Explorer, however,
supports many more than those listed here.
Search WWH ::

Custom Search