HTMLImageElement

The HTMLImageElement interface provides special properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of <img> elements.

Properties

Inherits properties from its parent, HTMLElement.

Name Type Description
align  DOMString Indicates the alignment of the image with respect to the surrounding context.
alt DOMString Reflects the alt HTML attribute, indicating fallback context for the image.
border  DOMString Width of the border around the image.
complete Read only Boolean True if the browser has fetched the image, and it is in a supported image type that was decoded without errors.
crossOrigin DOMString The CORS setting for this image element. See CORS settings attributes for details.
height unsigned long Reflects the height HTML attribute, indicating the rendered height of the image in CSS pixels.
hspace  long Space to the left and right of the image.
isMap Boolean Reflects the ismap HTML attribute, indicating that the image is part of a server-side image map.
longDesc  DOMString URI of a long description of the image.
lowSrc  DOMString A reference to a low-quality (but faster to load) copy of the image.
name  DOMString  
naturalHeight Read only unsigned long Intrinsic height of the image in CSS pixels, if it is available; otherwise, 0.
naturalWidth Read only unsigned long Intrinsic width of the image in CSS pixels, if it is available; otherwise, 0.
src DOMString Reflects the src HTML attribute, containing the full URL of the image including base URI.
srcset     
useMap DOMString Reflects the usemap HTML attribute, containing a partial URL of a map element.
vspace  long Space above and below the image.
width unsigned long Reflects the width HTML attribute, indicating the rendered width of the image in CSS pixels.
x Read only long The horizontal offset from the nearest layer. (Mimic an old Netscape 4 behavior)
y Read only long The vertical offset from the nearest layer. (Mimic an old Netscape 4 behavior)

Methods

Inherits properties from its parent, HTMLElement.

HTMLImageElement.Image()
The Image() constructor, taking two optional unsigned long, the width and the height of the resource, creates an instance of HTMLImageElement not inserted in a DOM tree.

Example

var img1 = new Image(); // HTML5 Constructor
img1.src = 'image1.png';
img1.alt = 'alt';
document.body.appendChild(img1);

var img2 = document.createElement('img'); // use DOM HTMLImageElement
img2.src = 'image2.jpg';
img2.alt = 'alt text';
document.body.appendChild(img2);

// using first image in the document
alert(document.images[0].src);

Specifications

Specification Status Comment
CSS Object Model (CSSOM) View Module Working Draft Added the x and y properties.
WHATWG HTML Living Standard Living Standard The following property has been added: srcset.
HTML5 Candidate Recommendation A constructor (with 2 optional parameters) has been added.
The following properties are now obsolete: name, border, align, hspace, vspace, and longdesc.
The following properties are now unsigned long, instead of long: height, and width.
The following properties have been added: crossorigin, naturalWidth, naturalHeight, and complete.
Document Object Model (DOM) Level 2 HTML Specification Recommendation The lowSrc property has been removed.
The following properties are now long, instead of DOMString: height, width, hspace, and vspace.
Document Object Model (DOM) Level 1 Specification Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
lowSrc ? ? ? ? ?
naturalWidth, naturalHeight ? ? ? ? ?
crossorigin ? (Yes) ? ? ?
complete ? ? ? ? ?
srcset 34 Not supported Not supported Not supported Not supported
x and y (Yes) (Yes) [1] Not supported (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)
lowSrc ? ? ? ? ?
naturalWidth, naturalHeight ? ? ? ? ?
crossorigin ? (Yes) ? ? ?
complete ? ? ? ? ?
srcset Not supported Not supported Not supported Not supported Not supported
x and y (Yes) (Yes) [1] Not supported (Yes) (Yes)

[1] The x and y properties were removed in Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) but restored in Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11) for compatibility reasons.

See also

  • The HTML element implementing this interface: <img>

Document Tags and Contributors

Last updated by: jaypeagi,