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>