Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
La interfaz HTMLImageElement provee de propiedas especiales y métodos (más allá de las interfaces HTMLElement, también tiene disponible la herencia) para manipular el diseño y la presentación de elementos <img>.
Propiedades
Heredadas de su padre, HTMLElement.
HTMLImageElement.align- Es un
DOMStringque indica el alineamiento de la imagen respecto al contexto que la rodea. HTMLImageElement.alt- Es un
DOMStringque refleja el atributo HTMLalt, indicando texto de respaldo a la imagen. HTMLImageElement.border- Es un
DOMStringque indica el ancho del borde alrededor de la imagen. Este está desaprobado y debe usarse la propiedad CSSborderen su lugar. HTMLImageElement.completeRead only- Devuelve un
Booleanque estruesi el navegador ha terminado de buscar la imagen, sea o no exitoso. También devuelvetruesi la imagen no tiene valorsrc. HTMLImageElement.crossOrigin- Es un
DOMStringrepresenta la configuración CORS para el elemento imagen. Ver Atributos de configuración CORS para más detalles. HTMLImageElement.currentSrcRead only- Devuelve un
DOMString HTMLImageElement.height- Es un
unsigned longque refleja el atributo HTMLheight, indica el alto de la imagen en píxeles CSS. HTMLImageElement.hspace- Es un
longque representa el espacio a izquierda y derecha de la imagen. HTMLImageElement.isMap- Es un
Booleanque refleja el atributo HTMLismap, indica que la imagen es parte del mapa de imagen del lado del servidor. HTMLImageElement.longDesc- Es un
DOMStringque representa la URI de una larga descripción de la imagen. HTMLImageElement.lowSrc- Es un
DOMStringque referencia una copia de la imagen en mala calidad (pero más rápida cargando) HTMLImageElement.name- Es un
DOMString. HTMLImageElement.naturalHeightRead only- Devuelve un
unsigned longque representa el alto intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0. HTMLImageElement.naturalWidthRead only- Devuelve un
unsigned longque representa el ancho intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0. HTMLImageElement.referrerPolicy- Es un
DOMStringque refleja el atributo HTMLreferrerpolicyindica la referencia a usar para buscar la imagen. HTMLImageElement.src- Es un
DOMStringque refleja el atributo HTMLsrcHTML attribute, contiene la URL completa de la imagen, incluido la base del URI HTMLImageElement.sizes- Es un
DOMString HTMLImageElement.srcset- Es un
DOMStringque refleja el atributo HTMLsrcset, contiene una ista de imágenes candidatas, separadas por una coma (',', U+002C COMMA). Una imagen candidata es una URL seguida por'w'con el ancho, o una'x'seguida de la densidad del píxel. HTMLImageElement.useMap- Es un
DOMStringque refleja el atributo HTMLusemap, contiene una URL parcial del mapa del elemento. HTMLImageElement.vspace- Es un
longque representa el espacio sobre y bajo la imagen. HTMLImageElement.width- Es un
unsigned longque refleja el atributo HTMLwidth, indica el ancho de la imagen en píxeles CSS. HTMLImageElement.xRead only- Devuelve un
longque representa el hueco horizontal hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4. HTMLImageElement.yRead only- Devuelve un
longque representa el hueco vertical hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4.
Métodos
Heredados de su padre, HTMLElement.
Image()- El constructor
Image(), toma dosunsigned longopcionales, ancho y alto del recurso, crea una instacia de createsHTMLImageElementno insertada en el árbol DOM.
Ejemplo
var img1 = new Image(); // HTML5 Constructor
img1.src = 'image1.png';
img1.alt = 'alt';
document.body.appendChild(img1);
var img2 = document.createElement('img'); // Uso DOM HTMLImageElement
img2.src = 'image2.jpg';
img2.alt = 'alt text';
document.body.appendChild(img2);
// Usando la primera imagen en el documento
alert(document.images[0].src);
Especificiaciones
| Especicifación | Estado | Comentario |
|---|---|---|
| Referrer Policy The definition of 'referrer attribute' in that specification. |
Working Draft | Añadida la propiedad referrerPolicy. |
| CSS Object Model (CSSOM) View Module The definition of 'Extensions to HTMLImageElement' in that specification. |
Working Draft | Añadidas propiedades x e y |
| WHATWG HTML Living Standard The definition of 'HTMLImageElement' in that specification. |
Living Standard | Las siguientes propiedades han sido añadidas: srcset, currentSrc y sizes. |
| HTML5 The definition of 'HTMLImageElement' in that specification. |
Recommendation | Un constructor (con 2 parámetros opcionales) añadido. Las siguientes propiedades quedaron obsoletas: name, border, align, hspace, vspace, y longdesc. Las siguientes propiedades son ahora unsigned long, en lugar de long: height, y width.Las siguientes propiedades fueron añadidas: crossorigin, naturalWidth, naturalHeight, y complete. |
| Document Object Model (DOM) Level 2 HTML Specification The definition of 'HTMLImgElement' in that specification. |
Recommendation | La propiedad lowSrc fue eliminada.Las siguientes propiedades son ahora long, en lugar de DOMString: height, width, hspace, y vspace. |
| Document Object Model (DOM) Level 1 Specification The definition of 'HTMLImgElement' in that specification. |
Recommendation | Definición inicial. |
Compatibilidad con navegador
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Soporte básico | (Yes) | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
lowSrc |
(Yes) | (Yes) | ? | (Yes) | (Yes) |
naturalWidth, naturalHeight |
(Yes) | (Yes) | 9 | (Yes) | (Yes) |
crossorigin |
(Yes) | (Yes) | ? | (Yes) | (Yes) |
complete |
(Yes) | (Yes) | 5[4] | (Yes) | (Yes) |
srcset |
34 | 32 (32)[2] | Not supported | 21 | 7.1 |
currentSrc |
(Yes) | 32 (32)[2] | Not supported | (Yes) | Not supported |
sizes |
(Yes) | 33 (33)[3] | Not supported | (Yes) | Not supported |
x e y |
(Yes) | 14[1] | Not supported | (Yes) | (Yes) |
referrerPolicy |
Not supported | 42 (42) [5] | Not supported | Not supported | Not supported |
| Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Soporte básico | (Yes) | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
lowSrc |
? | ? | ? | ? | ? |
naturalWidth, naturalHeight |
? | ? | 9 | ? | (Yes) |
crossorigin |
? | (Yes) | ? | ? | (Yes) |
complete |
? | (Yes) | ? | ? | (Yes) |
srcset |
Not supported | 32.0 (32)[2] | Not supported | Not supported | iOS 8 |
currentSrc |
Not supported | 32.0 (32)[2] | Not supported | Not supported | Not supported |
sizes |
Not supported | 33.0 (33)[3] | Not supported | Not supported | Not supported |
x e y |
(Yes) | 14[1] | Not supported | (Yes) | (Yes) |
referrerPolicy |
Not supported | 42.0 (42) [5] | Not supported | Not supported | Not supported |
[1] Las propiedades x e y fueron eliminadas en Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) pero reestablecidas en Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11) por razones de compatibilidad.
[2] Esta característica está detras de la preferencia dom.image.srcset.enabled, por defecto false.
[3] Esta característica está detras de la preferencia dom.image.picture.enabled, por defecto false.
[4] IE reporta false para imágenes rotas.
[5] Esta propiedad fue nombrada referrer desde Firefox 42 a 44.
Ver también
- El elemento HTML implementa esta interfaz:
<img>