Chapter 25
Images and Graphics

Defining Images in HTML

The syntax to define an image in HTML is as follows:

<IMG
[NAME=“imageName”]
SRC=“Location”
[LOWSRC=“Location”]
[HEIGHT=“Pixels” | “Value”%]
[WIDTH=“Pixels” | “Value”%]
[SPACE=“Pixels”]
[BORDER = “Pixels”]
[ALIGN = “left” | “right” |“top” | “absmiddle” | “absbottom”
 |“texttop” | “middle”  | “baseline” | “bottom” ]
[ISMAP]
[USEMAP=“Location#MapName”]
[onAbort=“handlerText”]
[onError=“handlerText”]
[onLoad=“handlerText”]>

The attributes are:

NAME=“imageName” specifies the name of the image object.

SRC=“Location” specifies the URL of the image to be displayed in the document.

LOWSRC=“Location” specifies the URL of a low-resolution version of the image to be displayed in the document. When this argument is provided, Navigator loads this smaller image first, and then replaces it with the larger image specified by SRC. Loading a low-resolution version first gives the user an impression of a shorter turnaround time.

HEIGHT=“Pixels” | “Value”% specifies the height of the image, either in pixels or as a percentage of the window height. If necessary, Navigator scales the image to fit the space specified by this attribute.

WIDTH=“Pixels” | “Value”% specifies the width of the image, either in pixels or as a percentage of the window width. If necessary, Navigator scales the image to fit the space specified by this attribute.

HSPACE=“Pixels” specifies the margin in pixels between the left and right edges of the image and the surrounding text. This attribute applies only to images that use “left” or “right” as the value of the ALIGN attribute.

VSPACE=“Pixels” specifies the margin in pixels between the top and bottom edges of the image and the surrounding text. This attribute applies only to images that use “left” or “right” as the value of the ALIGN attribute.

BORDER=“Pixels” specifies the width in pixels of the image border. You can suppress the border by setting its value to 0. If, however, it appears within an anchor, users will not see the colored border indicating a hyperlink.

ALIGN specifies the alignment of the image in relation to the surrounding text. Images that are aligned as left or right float into the next available space on the left or right side of the page, respectively, while text fills the empty space next to the image. The rest of the ALIGN values specify the alignment of the image with respect to a line of text in which it is placed (no filling). If omitted, bottom is used, which means that the bottom of the image is aligned with the line of text.

ISMAP specifies the image as a server-side image map.

USEMAP=“Location#MapName” specifies the image as a client-side image map. This attribute must specify the URL of the file that contains the map definition, followed by a # symbol, and then the name of the map. For example, USEMAP=“http://www.HomeWorld.com/maplist.html#areamap”. The URL can be omitted if the image map specifications reside in the same document as the reference.

Creating an Instance of Image Object

The Image object enables you to create instances that reflect a given image in any supported format (usually gif or jpeg). Since this object is not featured by Netscape Navigator 2.0x and Microsoft Internet Explorer 3.0, scripts that use it under these browsers will crash. By introducing movement and animation, the Image object immensely increased JavaScript’s capabilities. You can take advantage of this object to create an animation, for example, with full control over timing and order of events. You can also create animation-based games such as Tetris, MineSweeper, and so forth.

The primary incentive to use the Image object is to accelerate image displaying in the browser window. Instead of waiting for the image to be transmitted from the server to the client when the display is needed, it is loaded and stored in the browser’s cache ahead of time, and displayed immediately upon request. In order to use the Image object you must create an instance associated with a given image. The general syntax is as follows:

var imageName = new Image([width, height])

width is the width of the image in pixels, whereas height is its height. An instance of the Image object can be associated with one image at any given time. In order to associate an instance with an existing image you must assign it a source in the following fashion:

var imageName = new Image([width, height])
imageName.src = “imageLocation”

imageLocation is the full URL of the image. The second statement in the preceding script segment assigns a value to the instance’s src property. The browser will retrieve the image from the server and will keep it in the cache until needed. Note that the width and height attributes are optional.

The images Array

When you create an HTML document you usually include several images (defined by the <IMG> definition). JavaScript features an array that reflects all images in a document—document.images. Each element of the array reflects an existing image. The first image in a document, for example, is document.images[0]. Obviously, the total number of images in a document is stored in the length property— document.images.length. Using the array within a deferred script ensures that all images have been loaded and the array reflects all images of a document.

An alternative way to reference an image is by its name, which is defined by the NAME attribute of the <IMG> HTML tag. See Example 25-5 for further details and explanations.

The size and position of an image in a document are set when the document is displayed in the browser window, and cannot be changed. Therefore, when creating an animation, you should generally use images of the same height and width. You can only change the image itself by setting the src and lowsrc properties. (See the listings for src and lowsrc in the previous section, “Defining Images in HTML.”)

Consider the following HTML document:

<HTML>
<HEAD>
<TITLE>images</TITLE>
<SCRIPT LANGUAGE=“JavaScript”>
<!--

function swapImages(a, b) {
  var asource = document.images[a].src
  document.images[a].src = document.images[b].src
  document.images[b].src = asource
}

// -->
</SCRIPT>
</HEAD>
<BODY>