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.

Images

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
Property	Description
align	Indicates the alignment of the image, usually “left” or “right.”
alt	The alternative text rendering for the image as set by the alt attribute.
border	The width of the border around the image in pixels.
complete	Non-standard (but well-supported) Boolean indicating whether the image has completed loading.
height	The height of the image in pixels or as a percentage value.
hspace	The horizontal space around the image in pixels.
isMap	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.
longDesc	The value of the (X)HTML longdesc attribute, which provides a more verbose description for the image than the alt attribute.
lowSrc	The URL of the “low source” image as set by the lowsrc attribute. Under early browsers, this is specified by the lowsrc property.
name	The value of the name attribute for the image.
src	The URL of the image.
useMap	The URL of the client-side image map if the <img> tag has a usemap attribute.
vspace	The vertical space in pixels around the image.
width	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.

Figure 15-1: Manipulating Image properties with JavaScript

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html xmlns="http://www.w3.org/1999/xhtml">>
<<head>>
<<title>>JavaScript Image Object Test<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<</head>>
<<body>>
<<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">>
Left:
<<input type="radio" name="align" id="alignleft" value="left" checked="checked"

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

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

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

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

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

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

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

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

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

<<script type="text/javascript">>
<<!--
function populateForm()
{
  if (document.images && document.images.image1 &&
      document.images.image1.complete)
   {
    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 = i.name;
      src.value = i.src;
      vspace.value = i.vspace;
      width.value = i.width;
    }
  }
}
window.onload = populateForm;
//-->>
<</script>>
<</body>>
<</html>>

Note

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.