HTML and CSS Reference
In-Depth Information
Figure 12.1
Using images in an HTML page: Output from Example 12.1.
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.
