img element | img object
[This documentation is preliminary and is subject to change.]
Embeds an image or a video clip in the document.
  |
Standards information
- Document Object Model (DOM) Level 2 HTML Specification, Section 1.6.5
- HTML 4.01 Specification, Section 13.2
HTML information
| Closing Tag | forbidden |
|---|---|
| CSS Display | inline |
DOM Information
Inheritance Hierarchy
Remarks
This element does not fire the onfocus event when it receives the input focus, unless it has been associated with a MAP element.
The following image and video file formats are supported:
- .avi—Audio-Visual Interleaved (AVI)
- .bmp—Windows Bitmap (BMP)
- .emf—Windows Enhanced Metafile (EMF)
- .png—Graphics Interchange Format (GIF)
- .png, .jpeg—Joint Photographic Experts Group (JPEG)
- .mov—Apple QuickTime Movie (MOV)
- .mpg, .mpeg—Motion Picture Experts Group (MPEG)
- .png—Portable Network Graphics (PNG)
- .wmf—Windows Metafile (WMF)
When using the IMG element to display a static image, specify the URL of the image file with the SRC attribute. When using the IMG element to display a video clip or virtual reality modeling language (VRML) world, specify the URL with the DYNSRC attribute.
Windows Internet Explorer 8 and later. In IE8 Standards mode, the title attribute is preferred over the alt attribute when specified as a pop-up tooltip for an img element. In addition, the value of the longDesc attribute depends on the current document compatibility mode.
The X Bitmap (XBM) file format is no longer supported as of Microsoft Internet Explorer 6 for Windows XP Service Pack 2 (SP2).
Windows Internet Explorer 9. Setting the CLASS attribute of an image to msPinSite enables the user to drag the image to the Windows taskbar to pin the site. For more information, see Introduction to Pinned Sites.
Examples
The following example shows how to use the img element to embed a bitmap image (.bmp) on a page.
<img src="mygraphic.bmp" onmouseout="alert('Out');" onmouseover="alert('Over');"
style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);">
See also
- Reference
- Alpha
- input type=image
- Conceptual
- How to Apply a Transition on an Image
- Other Resources
- Build Flexible, Lightweight XML-Based Images for ASP.NET Using Scalable Vector Graphics
Build date: 3/8/2012
First declare an array variable in javascript global scope to store images with:
var image_cache = new Array(); // declare this in top level window to keep it also when iframes are reloaded
Then declare this onload handler that will display images once page is loaded
// on body onload
function onload_handler() {
image_caching();
// .... more things to do in onload handler ....
}
document.body.onload = onload_handler;
// Display all images with data-src as location for image
function image_caching() {
var images = document.getElementsByTagName('IMG'),
key;
// IMAGE PRELOADING AND IMAGE CACHING
for(key = 0; key < images.length; key++) {
var src = images[key].getAttribute('data-src');
if (!src) continue;
// store in cache
if (!image_cache[src] || image_cache[src].src != src) {
image_cache[src] = new Image();
image_cache[src].src = src;
}
// display from cache
if (images[key].src != image_cache[src].src) images[key].src = image_cache[src].src; // No double load
}
}
Example:
<img data-src=""/images/flower.png" />
<img data-src="/images/car.png" />
<img data-src="/images/car2.png" />
- 1/26/2011
- Hobby Developer
- 2/15/2011
- Hobby Developer
I already warned you guys about a nasty bug that causes that the onload and the onreadystatechange events not to fire when img.src points to a file that is already stored on the browser's cache. Today I discovered that when you assign img.src with the URI of a file that doesn't exist on the server, the onload and the onreadystatechange events are not fired either, I can undestrand that the onload event won't fire in this case since the file does not exist, however there is no reason for the onreadystatechanche not to fire in this case, it should change to "loading" and then to some other state. On the other hand, if onload would always fire you could be able tell if the file was found or not, by inpecting img.offsetHeight and img.offestWidth. Now, isn't it silly that when you execute document.body.removeChild(img) the onreadystatechange does fire, and readyState becomes "loading", I don't see a reason why it should be "loading" when the object is being destroyed. This sounds to me like a design flaw. I don't know if this happens with images defined with the <img> tag but certainly happens when you create the img object by calling document.createElement.
- 7/22/2009
- george65
- 9/28/2010
- Miroslav Bilica
- 11/16/2009
- vm-oldTimer
