aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/api/htmlimageelement
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
commit1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch)
tree0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/api/htmlimageelement
parent4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff)
downloadtranslated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip
initial commit
Diffstat (limited to 'files/es/web/api/htmlimageelement')
-rw-r--r--files/es/web/api/htmlimageelement/image/index.html46
-rw-r--r--files/es/web/api/htmlimageelement/index.html344
2 files changed, 390 insertions, 0 deletions
diff --git a/files/es/web/api/htmlimageelement/image/index.html b/files/es/web/api/htmlimageelement/image/index.html
new file mode 100644
index 0000000000..7bf5d299b5
--- /dev/null
+++ b/files/es/web/api/htmlimageelement/image/index.html
@@ -0,0 +1,46 @@
+---
+title: Image()
+slug: Web/API/HTMLImageElement/Image
+translation_of: Web/API/HTMLImageElement/Image
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<h3 id="Constructor_del_elemento_de_Imagen">Constructor del elemento de Imagen</h3>
+
+<p><span style="line-height: 1.572;">Acepta dos parametros opcionales: </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">Image([unsigned long <em><strong>width</strong></em>, unsigned long <em><strong>height</strong></em>]</span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">)</span></p>
+
+<p>Devuelve un  <a href="/en-US/docs/Web/API/HTMLImageElement" style="line-height: 1.572;" title="en/DOM/HTMLImageElement">HTMLImageElement</a><span style="line-height: 1.572;"> instanciado  justo como</span><span style="line-height: 1.572;"> </span><code style="font-size: 14px;">document.createElement('img')</code><span style="line-height: 1.572;"> would.</span></p>
+
+<p><span style="line-height: 1.572;">Ejemplo:</span></p>
+
+<pre class="brush: js">var myImage = new Image(100, 200);
+myImage.src = 'picture.jpg';
+console.log(myImage);</pre>
+
+<div>Resultado:</div>
+
+<pre class="brush: html">&lt;img width="100" height="200" src="picture.jpg"&gt;
+</pre>
+
+<div>
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td><a class="external external-icon" href="http://www.w3.org/TR/html5/embedded-content-0.html#dom-image" hreflang="en" lang="en">HTML5<br>
+ <small>La definición del constructor de imagen, en esta especificación.</small></a></td>
+ <td><span class="spec-REC">Recommendación</span></td>
+ <td>Un constructor (con 2 parametros opcionales) han sido agregados.<br>
+ Las siguientes propiedades ahora son obsoletas: <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, and <code>longdesc</code>.<br>
+ The following properties are now <code>unsigned long</code>, instead of <code>long</code>: <code>height</code>, and <code>width</code>.<br>
+ Las siguientes propiedadeas ahora han sido agrgados: <code>crossorigin</code>,</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div> </div>
diff --git a/files/es/web/api/htmlimageelement/index.html b/files/es/web/api/htmlimageelement/index.html
new file mode 100644
index 0000000000..55c8a5e306
--- /dev/null
+++ b/files/es/web/api/htmlimageelement/index.html
@@ -0,0 +1,344 @@
+---
+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>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Característica</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Soporte básico</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop(1.0)}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>lowSrc</code></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>9</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>crossorigin</code></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>complete</code></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>5<sup>[4]</sup></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>srcset</code> {{experimental_inline}}</td>
+ <td>{{CompatChrome(34)}}</td>
+ <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>21</td>
+ <td>{{CompatSafari(7.1)}}</td>
+ </tr>
+ <tr>
+ <td><code>currentSrc </code>{{experimental_inline}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>sizes</code> {{experimental_inline}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop(33)}}<sup>[3]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>x</code> e <code>y</code></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>14<sup>[1]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoDesktop(42)}} [5]</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Característica</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Soporte básico</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile(1.0)}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>lowSrc</code></td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>9</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>crossorigin</code></td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>complete</code></td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>srcset</code> {{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>iOS 8</td>
+ </tr>
+ <tr>
+ <td><code>currentSrc </code>{{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>sizes</code> {{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoMobile(33)}}<sup>[3]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>x</code> e <code>y</code></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>14<sup>[1]</sup></td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoMobile(42)}} [5]</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Las propiedades <code>x</code> e <code>y</code> fueron eliminadas en Gecko 7.0 {{geckoRelease("7.0")}} pero reestablecidas en Gecko 14.0 {{geckoRelease("14.0")}} por razones de compatibilidad.</p>
+
+<p>[2] Esta característica está detras de la preferencia <code>dom.image.srcset.enabled</code>, por defecto <code>false</code>.</p>
+
+<p>[3] Esta característica está detras de la preferencia <code>dom.image.picture.enabled</code>, por defecto <code>false</code>.</p>
+
+<p>[4] IE reporta <code>false</code> para imágenes rotas.</p>
+
+<p>[5] Esta propiedad fue nombrada <code>referrer</code> desde Firefox 42 a 44.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>El elemento HTML implementa esta interfaz: {{HTMLElement("img")}}</li>
+</ul>