Team LiB
Previous Section Next Section

Chapter 15: Dynamic Effects: Rollovers, Positioning, and Animation

In this chapter we explore the use of JavaScript to add flash and sizzle to Web pages. Starting first with the basic rollover script that changes an image when the mouse hovers over it, we then proceed to more advanced techniques, including target-based and Cascading Style Sheets (CSS)–based rollovers. The manipulation of CSS-positioned regions is also discussed, with attention given to visibility and positioning issues. Finally, we describe how to create basic animation effects by using timers to move and change positioned objects and text. An emphasis is placed on making all introduced effects as cross-browser compliant as possible. The focus is on fundamental techniques you can use to create dynamic pages rather than on demonstrating all that is possible.


The images[] collection of the Document object was introduced in Netscape 3 and Internet Explorer 4 and has since been adopted by nearly every browser in existence. This collection is a part of the DOM Level 1 standard, so support for it will continue well into the future. The collection contains Image objects (known as HTMLImageElements in the DOM1 spec) corresponding to all the <<img>> tags in the document. Like all collections, images can be referenced numerically (document.images[i]), associatively (document.images['imagename']), and directly (document.images.imagename).

Image Objects

The properties of the Image object correspond, as expected, to the attributes of the <<img>> tag as defined by the (X)HTML standard. An overview of the properties of the Image object beyond the common id, className, style, title, and DOM1 Core properties is presented in Table 15-1.

Table 15-1: Properties of Image Objects




Indicates the alignment of the image, usually “left” or “right.”


The alternative text rendering for the image as set by the alt attribute.


The width of the border around the image in pixels.


Non-standard (but well-supported) Boolean indicating whether the image has completed loading.


The height of the image in pixels or as a percentage value.


The horizontal space around the image in pixels.


Boolean value indicating presence of the ismap attribute, which indicates the image is a server-side image map. The useMap property is used more often today.


The value of the (X)HTML longdesc attribute, which provides a more verbose description for the image than the alt attribute.


The URL of the “low source” image as set by the lowsrc attribute. Under early browsers, this is specified by the lowsrc property.


The value of the name attribute for the image.


The URL of the image.


The URL of the client-side image map if the <img> tag has a usemap attribute.


The vertical space in pixels around the image.


The width of the image in pixels or as a percentage value.

The traditional Image object also supports onabort, onerror, and onload event handlers. The onabort handler is invoked when the user aborts the loading of the image, usually by clicking the browser’s Stop button. The onerror handler is fired when an error occurs during image loading. The onload handler is, of course, fired once the image has loaded. Under modern browser implementations that support (X)HTML properly, you will also find onmouseover, onmouseout, onclick, and the rest of the core events supported for Image.

The following example illustrates simple access to the common properties of Image. A rendering of the example is shown in Figure 15-1.

Click To expand
Figure 15-1: Manipulating Image properties with JavaScript
<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<<html xmlns="">>
<<title>>JavaScript Image Object Test<</title>>
<<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />>
<<img src="sample.gif" width="200" height="100"
     name="image1" id="image1" align="left"
     alt="Test Image" border="0" />>
<<br clear="all" />>
<<hr />>
<<br clear="all" />>
<<h1>>Image Properties<</h1>>
<<form name="imageForm" id="imageForm" action="#" method="get">>
<<input type="radio" name="align" id="alignleft" value="left" checked="checked"

onchange="document.images.image1.align=this.value" />>
<<input type="radio" name="align" id="alignright" value="right"
onchange="document.images.image1.align=this.value" />>
<<br />>
<<input type="text" name="alt" id="alt"
onchange="document.images.image1.alt=this.value" />>
<<br />>

<<input type="text" name="border" id="border"
onchange="document.images.image1.border=this.value" />>
<<br />>

<<input type="text" name="complete" id="complete" />>
<<br />>

<<input type="text" name="height" id="height"
onchange="document.images.image1.height=this.value" />>
<<br />>

<<input type="text" name="hspace" id="hspace"
onchange="document.images.image1.hspace=this.value" />>
<<br />>

<<input type="text" name="name" id="name" />>
<<br />>

<<input type="text" name="src" id="src" size="40"
onchange="document.images.image1.src=this.value" />>
<<br />>

<<input type="text" name="vspace" id="vspace"
onchange="document.images.image1.vspace=this.value" />>
<<br />>

<<input type="text" name="width" id="width" 
onchange="document.images.image1.width=this.value" />>

<<script type="text/javascript">>
function populateForm()
  if (document.images && document.images.image1 &&
    with (document.imageForm)
      var i = document.images.image1;
      alt.value = i.alt;
      border.value = i.border;
      complete.value = i.complete;
      height.value = i.height;
     hspace.value = i.hspace;
      name.value =;
      src.value = i.src;
      vspace.value = i.vspace;
      width.value = i.width;
window.onload = populateForm;

If you try this example under much older browsers such as Netscape 3, you will find that it is not possible to manipulate the properties of the Image object, except for the src attribute.

Notice in the previous example how it is possible to manipulate the image src dynamically. This leads to the first application of the Image object—the ubiquitous rollover button.

Team LiB
Previous Section Next Section