1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
---
title: HTMLImageElement
slug: Web/API/HTMLImageElement
tags:
- API
- HTML DOM
- Interfaz
- Reference
translation_of: Web/API/HTMLImageElement
---
<div>{{APIRef("HTML DOM")}}</div>
<p>La interfaz <strong><code>HTMLImageElement</code></strong> provee de propiedas especiales y métodos (más allá de las interfaces {{domxref("HTMLElement")}}, también tiene disponible la herencia) para manipular el diseño y la presentación de elementos {{HTMLElement("img")}}.</p>
<h2 id="Propiedades">Propiedades</h2>
<p><em>Heredadas de su padre, {{domxref("HTMLElement")}}.</em></p>
<dl>
<dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt>
<dd>Es un {{domxref("DOMString")}} que indica el alineamiento de la imagen respecto al contexto que la rodea.</dd>
<dt>{{domxref("HTMLImageElement.alt")}}</dt>
<dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("alt", "img")}}, indicando texto de respaldo a la imagen.</dd>
<dt>{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}</dt>
<dd>Es un {{domxref("DOMString")}} que indica el ancho del borde alrededor de la imagen. Este está desaprobado y debe usarse la propiedad CSS {{cssxref("border")}} en su lugar.</dd>
<dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt>
<dd>Devuelve un {{domxref("Boolean")}} que es <code>true</code> si el navegador ha terminado de buscar la imagen, sea o no exitoso. También devuelve <code>true</code> si la imagen no tiene valor {{domxref("HTMLImageElement.src", "src")}}.</dd>
<dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt>
<dd>Es un {{domxref("DOMString")}} representa la configuración CORS para el elemento imagen. Ver <a href="/es/docs/Web/HTML/Atributos_de_configuracion_CORS">Atributos de configuración CORS</a> para más detalles.</dd>
<dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}</dt>
<dd>Devuelve un {{domxref("DOMString")}}</dd>
<dt>{{domxref("HTMLImageElement.height")}}</dt>
<dd>Es un <code>unsigned long</code> que refleja el atributo HTML {{htmlattrxref("height", "img")}}, indica el alto de la imagen en píxeles CSS.</dd>
<dt>{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}</dt>
<dd>Es un <code>long</code> que representa el espacio a izquierda y derecha de la imagen.</dd>
<dt>{{domxref("HTMLImageElement.isMap")}}</dt>
<dd>Es un {{domxref("Boolean")}} que refleja el atributo HTML {{htmlattrxref("ismap", "img")}}, indica que la imagen es parte del mapa de imagen del lado del servidor.</dd>
<dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt>
<dd>Es un {{domxref("DOMString")}} que representa la URI de una larga descripción de la imagen.</dd>
<dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt>
<dd>Es un {{domxref("DOMString")}} que referencia una copia de la imagen en mala calidad (pero más rápida cargando)</dd>
<dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt>
<dd>Es un {{domxref("DOMString")}}.</dd>
<dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt>
<dd>Devuelve un <code>unsigned long</code> que representa el alto intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0.</dd>
<dt>{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}</dt>
<dd>Devuelve un <code>unsigned long</code> que representa el ancho intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0.</dd>
<dt>{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}</dt>
<dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("referrerpolicy", "img")}} indica la referencia a usar para buscar la imagen.</dd>
<dt>{{domxref("HTMLImageElement.src")}}</dt>
<dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("src", "img")}} HTML attribute, contiene la URL completa de la imagen, incluido la base del URI</dd>
<dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt>
<dd>Es un {{domxref("DOMString")}}</dd>
<dt>{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}</dt>
<dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("srcset", "img")}}, contiene una ista de imágenes candidatas, separadas por una coma (<code>',', U+002C COMMA</code>). Una imagen candidata es una URL seguida por <code>'w'</code> con el ancho, o una <code>'x'</code> seguida de la densidad del píxel.</dd>
<dt>{{domxref("HTMLImageElement.useMap")}}</dt>
<dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("usemap", "img")}}, contiene una URL parcial del mapa del elemento.</dd>
<dt>{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}</dt>
<dd>Es un <code>long</code> que representa el espacio sobre y bajo la imagen.</dd>
<dt>{{domxref("HTMLImageElement.width")}}</dt>
<dd>Es un <code>unsigned long</code> que refleja el atributo HTML {{htmlattrxref("width", "img")}}, indica el ancho de la imagen en píxeles CSS.</dd>
<dt>{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}</dt>
<dd>Devuelve un <code>long</code> que representa el hueco horizontal hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4.</dd>
<dt>{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}</dt>
<dd>Devuelve un <code>long</code> que representa el hueco vertical hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4.</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<p><em>Heredados de su padre, {{domxref("HTMLElement")}}.</em></p>
<dl>
<dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt>
<dd>El constructor <code>Image()</code>, toma dos <code>unsigned long</code> opcionales, ancho y alto del recurso, crea una instacia de creates <code>HTMLImageElement</code> no insertada en el árbol DOM.</dd>
</dl>
<h2 id="Ejemplo">Ejemplo</h2>
<pre class="brush: js">var img1 = new Image(); // HTML5 Constructor
img1.src = 'image1.png';
img1.alt = 'alt';
document.body.appendChild(img1);
var img2 = document.createElement('img'); // Uso DOM <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl">HTMLImageElement</a>
img2.src = 'image2.jpg';
img2.alt = 'alt text';
document.body.appendChild(img2);
// Usando la primera imagen en el documento
alert(document.images[0].src);
</pre>
<h2 id="Especificiaciones">Especificiaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especicifación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
<td>{{Spec2('Referrer Policy')}}</td>
<td>Añadida la propiedad <code>referrerPolicy</code>.</td>
</tr>
<tr>
<td>{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}</td>
<td>{{Spec2('CSSOM View')}}</td>
<td>Añadidas propiedades <code>x</code> e <code>y</code></td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Las siguientes propiedades han sido añadidas: <code>srcset</code>, <code>currentSrc</code> y <code>sizes</code>.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Un constructor (con 2 parámetros opcionales) añadido. Las siguientes propiedades quedaron obsoletas: <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, y <code>longdesc</code>. Las siguientes propiedades son ahora <code>unsigned long</code>, en lugar de <code>long</code>: <code>height</code>, y width.Las siguientes propiedades fueron añadidas: <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code>, <code>y</code> <code>complete</code>.</td>
</tr>
<tr>
<td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td>
<td>{{Spec2('DOM2 HTML')}}</td>
<td>La propiedad <code>lowSrc</code> fue eliminada.<br>
Las siguientes propiedades son ahora <code>long</code>, en lugar de <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code>, y <code>vspace</code>.</td>
</tr>
<tr>
<td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td>
<td>{{Spec2('DOM1')}}</td>
<td>Definición inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegador">Compatibilidad con navegador</h2>
{{Compat("api.HTMLImageElement")}}
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>El elemento HTML implementa esta interfaz: {{HTMLElement("img")}}</li>
</ul>
|
