img | NN 3 IE 4 DOM 1 | |||||||||||||||||||||||||||||||||||
The img object reflects the img element. This object shares the same properties as the static Image object, which you can use to pre-cache images without rendering them on the page. |
||||||||||||||||||||||||||||||||||||
HTML Equivalent | ||||||||||||||||||||||||||||||||||||
<img> |
||||||||||||||||||||||||||||||||||||
Object Model Reference | ||||||||||||||||||||||||||||||||||||
[window.]document.imageName [window.]document.images[i] [window.]document.images["imageName"] [window.]document.getElementById("elementID") |
||||||||||||||||||||||||||||||||||||
Object-Specific Properties | ||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||
Object-Specific Methods | ||||||||||||||||||||||||||||||||||||
None. |
||||||||||||||||||||||||||||||||||||
Object-Specific Event Handler Properties | ||||||||||||||||||||||||||||||||||||
|
align | NN 6 IE 4 DOM 1 |
Read/Write | |
Defines how the element is aligned relative to surrounding text content. Most values set the vertical relationship between the element and surrounding text. For example, to align the bottom of the element with the baseline of the surrounding text, the align property value would be baseline. An element can be "floated" along the left or right margin to let surrounding text wrap around the element. |
|
Example | |
document.logoImg.align = "absmiddle"; |
|
Value | |
Any of the following alignment constant values (as a string): absbottom | absmiddle | baseline | bottom | right | left | none | texttop | top. |
|
Default | |
bottom |
alt | NN 6 IE 4 DOM 1 |
Read/Write | |
Indicates the text to be displayed (or spoken) where the img element appears on the page when a browser does not download graphics (or is waiting for the image to download). The text is usually a brief description of what the image is. Be aware that the size of the image area on the page may limit the amount of assigned text visible on the page. Make sure the description is readable. |
|
Example | |
document.corpLogo.alt = "MegaCorp Logo"; |
|
Value | |
String value. |
|
Default | |
None. |
blur( ) | NN 2 IE 3 DOM 1 |
Removes focus from the current object, at which time the object's onblur event fires. Note that the range of elements capable of focus and blur (both the event and method) is limited in all browsers except for more recent versions of IE (see the shared tabindex attribute in Chapter 8). Most reliably for backward compatibility, apply the blur( ) method to blatantly focusable elements, such as text input and textarea elements. Assigning the attribute onfocus="this.blur( );" to a text input element, for instance, is a crude but effective backward-compatible way to largely disable a field for browsers that do not provide genuine element disabling. |
|
Use blur( ) and focus( ) methods in moderation on the same page. You can inadvertently trigger endless loops of blurring and focusing if alert dialog boxes are involved along the way. Moreover, be aware that when you invoke the blur( ) method on one object, some other object (perhaps the window object) receives an onfocus event. |
|
Parameters | |
None. |
|
Returned Value | |
None. |
border | NN 3 IE 4 DOM 1 |
Read/Write (IE and Netscape 6) | |
Provides the thickness of the border around an element (in pixels). This property is read-only in Navigator 4. |
|
Example | |
document.logoImage.border = 4; |
|
Value | |
An integer value. A setting of zero removes the border entirely. |
|
Default | |
0 |
complete | NN 3 IE 4 DOM n/a |
Read-only | |
Reveals whether the img element's src or lowsrc image file has fully loaded. Note that Navigator 4 provides an incorrect true reading before the image has completely loaded. |
|
Example | |
if (document.logo.complete) { // safe to process the image object } |
|
Value | |
Boolean value: true | false. |
|
Default | |
false |
dataFld | NN n/a IE 4 DOM n/a |
Read/Write | |
Used with IE data binding to associate a remote data source column name with the src property of the img object. A datasrc attribute must also be set for the element. Setting both the dataFld and dataSrc properties to empty strings breaks the binding between element and data source. Works only with text file data sources in IE 5/Mac. |
|
Example | |
document.myImage.dataFld = "logoURL"; |
|
Value | |
Case-sensitive identifier of the data source column. |
|
Default | |
None. |
dataFormatAs | NN n/a IE 4 DOM n/a |
Read/Write | |
This property is a member of the img element object in IE, but does not apply to img because data binding values are linked to the src attribute, rather than rendered content. |
dataSrc | NN n/a IE 4 DOM n/a |
Read/Write | |
Used with IE data binding to specify the ID of the page's object element that loads the data source object for remote data access. Setting both the dataFld and dataSrc properties to empty strings breaks the binding between element and data source. Works only with text file data sources in IE 5/Mac. |
|
Example | |
document.myImage.dataSrc = "DBSRC3"; |
|
Value | |
Case-sensitive identifier of the data source. |
|
Default | |
None. |
dynsrc | NN n/a IE 4 DOM n/a |
Read/Write | |
URL of a video clip to be displayed through the img element. Changing this property loads a new video clip into the image object. See also the loop property for controlling the frequency of video clip play. |
|
Example | |
document.images[3].dynsrc = "snowman.avi"; |
|
Value | |
Complete or relative URL as a string. |
|
Default | |
None. |
fileCreatedDate | NN n/a IE 4(Win)/5(Mac) DOM n/a |
Read-only | |
Returns a string of the date (but not the time) that the server (or local filesystem) reports the currently-loaded file was created. By loading an image into a nonrendered Image object, a script can determine the date of the image (but more accurately from the fileUpdatedDate property). IE 4's value is a long date format, but starting with IE 5, the date information is formatted as mm/dd/yyyy. The value may be corrupted if the server supplies the data in a format that IE does not expect. Implemented in IE 5/Mac, but the value is empty. |
|
Example | |
var dateObj = new Date(document.logoImg.fileCreatedDate); |
|
Value | |
Date string. |
|
Default | |
None. |
fileModifiedDate | NN n/a IE 4(Win)/5(Mac) DOM n/a |
Read-only | |
Returns a string of the date (but not the time) that the server (or local filesystem) reports the currently-loaded file was most recently modified. IE 4's value is a long date format, but starting with IE 5, the date information is formatted as mm/dd/yyyy. The value may be corrupted or incorrect if the server supplies the data in a format that IE does not expect. Implemented in IE 5/Mac, but the value is empty. |
|
Example | |
var dateObj = new Date(document.logoImg.fileModifiedDate); |
|
Value | |
Date string. |
|
Default | |
None. |
fileSize | NN n/a IE 4(Win)/5(Mac) DOM n/a |
Read-only | |
Returns the number of bytes for the size of the currently-loaded image. IE for Windows returns this value as a string, while IE for Macintosh returns a number value (although its value is 0). |
|
Example | |
var byteCount = parseInt(document.fileSize, 10); |
|
Value | |
Integer as string (Windows) or number (Mac). |
|
Default | |
None. |
fileUpdatedDate | NN n/a IE 5(Mac)/5.5(Win) DOM n/a |
Read-only | |
For an image file retrieved from a server, this property may more accurately reflect the date the file was last uploaded to the server than the other date-related properties. Local files commonly return an empty string. Implemented in IE 5/Mac, but the value is empty. |
|
Example | |
var dateObj = new Date(document.logoImg.fileUpdatedDate); |
|
Value | |
Date string. |
|
Default | |
None. |
focus( ) | NN 2 IE 3 DOM 1 |
Gives focus from the current object, at which time the object's onfocus event fires. Note that the range of elements capable of focus and blur (both the event and method) is limited in all browsers except for more recent versions of IE (see the shared tabindex attribute in Chapter 8). Most reliably for backward compatibility, apply the focus( ) method to blatantly focusable elements, such as text input and textarea elements. |
|
To give a text box focus and pre-select all the text in the box, use the sequence of focus( ) and select( ) methods on the element. If this sequence is to occur after windows change (such as after an alert dialog box closes), place the methods in a separate function, and invoke this function through the setTimeout( ) method following the alert( ) method for the dialog. This allows IE/Windows to sequence statement execution correctly. |
|
Parameters | |
None. |
|
Returned Value | |
None. |
height, width | NN 3 IE 4 DOM 1 |
Read/Write (IE and Netscape 6) | |
Provide the height and width in pixels of the image rendered in the img element. Changes to these values are immediately reflected in reflowed content on the page in Internet Explorer 4 (or later) and Netscape 6. Be aware that images scale to fit the new dimension. |
|
Example | |
document.prettyPicture.height = 250; |
|
Value | |
Integer. |
|
Default | |
None. |
href | NN n/a IE 4 DOM n/a |
Read/Write | |
The URL specified by the element's src attribute. Identical to, and deprecated in favor of, the src property. |
|
Example | |
document.logoImage.href = "images/fancyLogo.gif"; |
|
Value | |
String of complete or relative URL. |
|
Default | |
None. |
hspace, vspace | NN 3 IE 4 DOM 1 |
Read/Write (IE and Netscape 6) | |
Provide the pixel measure of horizontal and vertical margins surrounding an image object. The hspace property affects the left and right edges of the element equally; the vspace affects the top and bottom edges of the element equally. These margins are not the same as margins set by style sheets, but they have the same visual effect. |
|
Example | |
document.logo.hspace = 5; document.logo.vspace = 8; |
|
Value | |
Integer of pixel count. |
|
Default | |
0 (IE), -1 (Netscape 6). |
isMap | NN 6 IE 4 DOM 1 |
Read/Write | |
Indicates whether the img element is acting as a server-side image map. For an image to be a server-side image map, it must be wrapped with an a element whose href attribute points to the URL of the CGI program that knows how to interpret the click coordinate information. The browser appends coordinate information about the click to the URL as a get form method appends form element data to the action attribute URL. |
|
More recent browsers allow client-side image maps (see the useMap property), which operate more quickly for the user, because there is no communication with the server to carry out the examination of the click coordinate point. |
|
Example | |
document.navMap.isMap = true; |
|
Value | |
Boolean value: true | false. |
|
Default | |
false |
longDesc | NN 6 IE 5(Mac)/6(Win) DOM 1 |
Read/Write | |
Reflects the longDesc attribute of the img element. Version 6 browsers provide no significant functionality for this attribute or property. |
|
Value | |
URL string. |
|
Default | |
Empty string. |
loop | NN n/a IE 4 DOM n/a |
Read/Write | |
If you specify a video clip with the dynsrc attribute, the loop property controls how many times the clip should play (loop). Changing to a value of -1 is equal to a continuous loop. |
|
Example | |
document.movieImg.loop = 3; |
|
Value | |
Integer. |
|
Default | |
1 |
lowsrc | NN 3 IE 4 DOM n/a |
Read/Write (IE and Netscape 6) | |
Indicates the URL of a lower-resolution (or alternate) image to download into the document space if the image of the src attribute will take a long time to download. The lowsrc image should be the same pixel size as the primary src image. It makes sense to change the lowsrc property only if you are also going to change the src property. In this case, make sure you change the lowsrc property first so that the browser knows how to handle the long download for the src image. |
|
Note that Netscape 6 also implements a second variation of this property with a different capitalization: lowSrc. Neither version is indicated in the W3C DOM. |
|
Example | |
document.productImage.lowsrc = "images/widget43LoRes.jpg"; |
|
Value | |
Any complete or relative URL as a string. |
|
Default | |
None. |
mimeType | NN n/a IE 6(Win) DOM n/a |
Read-only | |
Returns a plain-language description of the MIME type for the image. This property may not be officially supported by Microsoft, but it correctly reports values for typical image types served from both local disks and servers. |
|
Example | |
if (document.productImage.mimeType.indexOf("JPEG") != -1) { // process condition for jpeg image } |
|
Value | |
String value such as JPEG Image or GIF Image. |
|
Default | |
None. |
name | NN 2 IE 3 DOM 1 |
Read/Write | |
This is the identifier associated with the image object for use in scripted references to the object. |
|
Example | |
var imgName = document.images[3].name; |
|
Value | |
Case-sensitive string identifier that follows the rules of identifier naming: it may contain no whitespace, cannot begin with a numeral, and should avoid punctuation except for the underscore character. |
|
Default | |
None. |
nameProp | NN n/a IE 5(Win) DOM n/a |
Read-only | |
Returns the filename (without the rest of the URL path) of the current image. Simplifies examination of current image content. |
|
Example | |
if (document.images[3].nameProp == "menuOn.jpg") { document.image[3].src = "../images/menuOff.jpg"; } |
|
Value | |
Case-sensitive string filename and extension. |
|
Default | |
None. |
naturalHeight, naturalWidth | NN 6 IE n/a DOM n/a |
Read-only | |
Return the unscaled height and width of the image, in pixels. Allows scripts to find the true dimensions of the original image in case scripts or incorrect element attributes have scaled the image. |
|
Example | |
document.logoImg.height = document.logoImg.naturalHeight; document.logoImg.width = document.logoImg.naturalWidth; |
|
Value | |
Integer. |
|
Default | |
None. |
protocol | NN n/a IE 4(Win)/5(Mac) DOM n/a |
Read-only | |
Returns the protocol component of the URL associated with the element. Windows and Macintosh versions return values in different formats. For the Windows version, the values are in expanded plain language (e.g., File Protocol or HyperText Transfer Protocol); for the Mac version, values resemble location.protocol values (e.g., file: or http:). Unreliable in IE 4 for Windows. |
|
Value | |
String. |
|
Default | |
None. |
prototype | NN n/a IE 4(Mac) DOM n/a |
Read-only | |
Returns a reference to the static Image object from which all instances of image objects are created. This mechanism is more commonly used in JavaScript core language objects (see Chapter 12). The fact that this property is available only in Internet Explorer 4 for the Macintosh calls its legitimacy into question. |
|
Value | |
Object reference. |
|
Default | |
object Image |
readyState | NN n/a IE 4 DOM n/a |
Read-only | |
Returns the current download status of the object's content. If a script (especially one initiated by a user event) can perform some actions while the document is still loading, but must avoid other actions until the entire page has loaded, this property provides intermediate information about the loading process. You should use its value in condition tests. The value of this property changes during loading as the loading state changes. Each change of the property value fires an onReadyStateChange event (the event does not bubble). |
|
When introduced with IE 4, the property was available for only the document, embed, img, link, object, script, and style objects. IE 5 expanded coverage to all HTML element objects. |
|
Example | |
if (document.readyState == "loading") { //statements for alternate handling while loading } |
|
Value | |
For all but the object element, one of the following values (as strings): uninitialized | loading | loaded | interactive | complete. Some elements may allow the user to interact with partial content, in which case the property may return interactive until all loading has completed. Not all element types return all values in sequence during the loading process. The object element returns numeric values for these five states. They range from 0 (uninitialized) to 4 (complete). |
|
Default | |
None. |
src | NN 3 IE 4 DOM 1 |
Read/Write | |
Provides the relative or complete URL of the image file currently loaded or to be loaded into the img element. Loading an image of a different size into an existing img element forces the element to resize to the new image's dimensions except in the following browsers: Netscape 3, Netscape 4, and IE 3 for the Macintosh. Reading this property returns the complete URL, regardless of how the URL form assigned the value originally. |
|
Example | |
document.image[3].src = "../images/menuOff.jpg"; |
|
Value | |
URL string. |
|
Default | |
None. |
start | NN n/a IE 4 DOM n/a |
Read/Write | |
If you specify a video clip with the dynsrc attribute, the start property controls the action that causes the clip to start running. |
|
Example | |
document.movieImg.start = "mouseover"; |
|
Value | |
String constant: fileopen | mouseover. |
|
Default | |
fileopen |
useMap | NN 6 IE 4 DOM 1 |
Read/Write | |
Provides the URL of the map element in the same document that contains client-side image map hot areas and links. The value includes the hashmark assigned with the map name in the usemap attribute of the img element. |
|
Example | |
document.images[0].useMap = "#altMap"; |
|
Value | |
A string starting with a hashmark and the name of the map element. |
|
Default | |
None. |
vspace | |
See hspace. |
width | |
See height. |
x, y | NN 4 IE n/a DOM n/a |
Read-only | |
Provide the horizontal and vertical pixel coordinates of the top-left corner of the image relative to the page. These are Navigator-only properties, corresponding to the offsetLeft and offsetTop properties of Internet Explorer. |
|
Example | |
var imageFromTop = document.logoImg.y; |
|
Value | |
Integer. |
|
Default | |
None. |