diff options
Diffstat (limited to 'files/fr/web/api/htmlimageelement/index.md')
| -rw-r--r-- | files/fr/web/api/htmlimageelement/index.md | 229 |
1 files changed, 95 insertions, 134 deletions
diff --git a/files/fr/web/api/htmlimageelement/index.md b/files/fr/web/api/htmlimageelement/index.md index cc2ab84054..07b28b66bc 100644 --- a/files/fr/web/api/htmlimageelement/index.md +++ b/files/fr/web/api/htmlimageelement/index.md @@ -3,85 +3,80 @@ title: HTMLImageElement slug: Web/API/HTMLImageElement translation_of: Web/API/HTMLImageElement --- -<p>{{APIRef("HTML DOM")}}</p> - -<p>L'interface <strong><code>HTMLImageElement</code></strong> fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} .</p> - -<h2 id="Propriétés">Propriétés</h2> - -<p><em>Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}</em></p> - -<dl> - <dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont <code>"left"</code><em>(gauche)</em>, <code>"right"</code><em>(droite)</em>, <code>"justify"</code><em>(justifié)</em>, et <code>"center"</code><em>(centré) .</em></dd> - <dt>{{domxref("HTMLImageElement.alt")}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em>qui reflète les attributs HTML {{htmlattrxref("alt", "img")}} , ceux-ci indiquant le recul du contexte de l'image.</dd> - <dt>{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em>qui est responsable de la largeur de la bordure entourant l'image. Il est maintenant déprécié et la propriété CSS {{cssxref("border")}} est utilisée à la place.</dd> - <dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt> - <dd>Retourne un {{domxref("Boolean")}} <em>(booléen)</em> qui est <code>true</code> <em>(vrai)</em> si le navigateur a fini de chercher l'image, que ce soit avec succès ou non. Il affiche aussi "true" si l'image n'a pas de valeur {{domxref("HTMLImageElement.src", "src")}} .</dd> - <dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em> représentant le paramètre CORS défini pour cet élément image. Voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">Attributs de règlage du CORS</a> pour plus de détails.</dd> - <dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia).</dd> - <dt>{{domxref("HTMLImageElement.height")}}</dt> - <dd>Est un <code>unsigned long</code> <em>(non signé long)</em> qui reflète l'attibut HTML {{htmlattrxref("height", "img")}} indiquant la hauteur du rendu de l'image en pixels CSS.</dd> - <dt>{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}</dt> - <dd>Est un <code>long</code> représentant l'espace de chaque côté de l'image.</dd> - <dt>{{domxref("HTMLImageElement.isMap")}}</dt> - <dd>Est un {{domxref("Boolean")}} <em>(booléen)</em> qui reflète l'attribut HTML {{htmlattrxref("ismap", "img")}} indiquant que l'image fait partie d'une carte d'image côté serveur.</dd> - <dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant l'URL d'une longue description de l'image.</dd> - <dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image.</dd> - <dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant le nom de l'élément.</dd> - <dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt> - <dd>Retourne un <code>unsigned long</code> représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché.</dd> - <dt>{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}} indiquant la référence à utiliser pour récupérer l'image.</dd> - <dt>{{domxref("HTMLImageElement.src")}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base.</dd> - <dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} <em>(taille)</em>.</dd> - <dt>{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un <code>'w'</code> avec la largeur de l'image ou d'un <code>'x'</code> avec la densité en pixels.</dd> - <dt>{{domxref("HTMLImageElement.useMap")}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" <em>(carte)</em>.</dd> - <dt>{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}</dt> - <dd>Est un <code>long</code> représentant l'espace au-dessus et en-dessous de l'image.</dd> - <dt>{{domxref("HTMLImageElement.width")}}</dt> - <dd>Est un <code>unsigned long</code> qui reflète l'attribut HTML {{htmlattrxref("width", "img")}} indiquant la largeur rendue de l'image en pixels CSS.</dd> - <dt>{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Retourne un <code>long</code> représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.</dd> - <dt>{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}</dt> - <dd>Retourne un <code>long</code> représentant le décalage vertical à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p><em>Hérite les propriétés de son parent, {{domxref("HTMLElement")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt> - <dd>Le constructeur d'image, comprend deux propriétés <code>unsigned</code> et <code>long</code> , qui sont la largeur et la hauteur de la ressource, et crée une instance de <code>HTMLImageElement</code> , non insérée dans une arborescence DOM.</dd> -</dl> - -<h2 id="Erreurs">Erreurs</h2> - -<p>Si une erreur apparaît pendant un essai de chargement ou de rendu de l'image, et si un gestionnaire d'évènements {{htmlattrxref("onerror")}} a été configuré pour gérer les évènements {{event("error")}} , ce gestionnaire est appelé. Cela peut se produire dans un certain nombre de situations, y compris :</p> - -<ul> - <li>L'attribut {{htmlattrxref("src", "img")}} est vide ou <code>null</code>.</li> - <li>L'URL spécifiée de <code>src</code> est la même que l'URL de la page actuelle de l'utilisateur.</li> - <li>L'image spécifiée est corrompue de telle manière qu'elle ne peut être chargée.</li> - <li>Les métadonnées de l'image spécifiée sont corrompues empêchant de récupérer ses dimensions, et aucune dimension n'est spécifiée dans les attributs de l'élément <code><img></code>.</li> - <li>L'image spécifiée est dans un format non supporté par l'"{{Glossary("user agent")}}".</li> -</ul> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: js">var img1 = new Image(); // Constructeur HTML5 +{{APIRef("HTML DOM")}} + +L'interface **`HTMLImageElement`** fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} . + +## Propriétés + +_Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_ + +- {{domxref("HTMLImageElement.align")}} {{obsolete_inline}} + - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont `"left"`_(gauche)_, `"right"`_(droite)_, `"justify"`_(justifié)_, et `"center"`_(centré) ._ +- {{domxref("HTMLImageElement.alt")}} + - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui reflète les attributs HTML {{htmlattrxref("alt", "img")}} , ceux-ci indiquant le recul du contexte de l'image. +- {{domxref("HTMLImageElement.border")}} {{obsolete_inline}} + - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui est responsable de la largeur de la bordure entourant l'image. Il est maintenant déprécié et la propriété CSS {{cssxref("border")}} est utilisée à la place. +- {{domxref("HTMLImageElement.complete")}} {{readonlyInline}} + - : Retourne un {{domxref("Boolean")}} _(booléen)_ qui est `true` _(vrai)_ si le navigateur a fini de chercher l'image, que ce soit avec succès ou non. Il affiche aussi "true" si l'image n'a pas de valeur {{domxref("HTMLImageElement.src", "src")}} . +- {{domxref("HTMLImageElement.crossOrigin")}} + - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ représentant le paramètre CORS défini pour cet élément image. Voir [Attributs de règlage du CORS](/fr/docs/Web/HTML/Reglages_des_attributs_CORS) pour plus de détails. +- {{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}} + - : Retourne une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia). +- {{domxref("HTMLImageElement.height")}} + - : Est un `unsigned long` _(non signé long)_ qui reflète l'attibut HTML {{htmlattrxref("height", "img")}} indiquant la hauteur du rendu de l'image en pixels CSS. +- {{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}} + - : Est un `long` représentant l'espace de chaque côté de l'image. +- {{domxref("HTMLImageElement.isMap")}} + - : Est un {{domxref("Boolean")}} _(booléen)_ qui reflète l'attribut HTML {{htmlattrxref("ismap", "img")}} indiquant que l'image fait partie d'une carte d'image côté serveur. +- {{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}} + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL d'une longue description de l'image. +- {{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}} + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image. +- {{domxref("HTMLImageElement.name")}} {{obsolete_inline}} + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant le nom de l'élément. +- {{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}} + - : Retourne un `unsigned long` représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché. +- {{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}} + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}} indiquant la référence à utiliser pour récupérer l'image. +- {{domxref("HTMLImageElement.src")}} + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base. +- {{domxref("HTMLImageElement.sizes")}} {{experimental_inline}} + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} _(taille)_. +- {{domxref("HTMLImageElement.srcset")}} {{experimental_inline}} + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un `'w'` avec la largeur de l'image ou d'un `'x'` avec la densité en pixels. +- {{domxref("HTMLImageElement.useMap")}} + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" _(carte)_. +- {{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}} + - : Est un `long` représentant l'espace au-dessus et en-dessous de l'image. +- {{domxref("HTMLImageElement.width")}} + - : Est un `unsigned long` qui reflète l'attribut HTML {{htmlattrxref("width", "img")}} indiquant la largeur rendue de l'image en pixels CSS. +- {{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}} + - : Retourne un `long` représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4. +- {{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}} + - : Retourne un `long` représentant le décalage vertical à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4. + +## Méthodes + +_Hérite les propriétés de son parent, {{domxref("HTMLElement")}}._ + +- {{domxref("HTMLImageElement.Image()", "Image()")}} + - : Le constructeur d'image, comprend deux propriétés `unsigned` et `long` , qui sont la largeur et la hauteur de la ressource, et crée une instance de `HTMLImageElement` , non insérée dans une arborescence DOM. + +## Erreurs + +Si une erreur apparaît pendant un essai de chargement ou de rendu de l'image, et si un gestionnaire d'évènements {{htmlattrxref("onerror")}} a été configuré pour gérer les évènements {{event("error")}} , ce gestionnaire est appelé. Cela peut se produire dans un certain nombre de situations, y compris : + +- L'attribut {{htmlattrxref("src", "img")}} est vide ou `null`. +- L'URL spécifiée de `src` est la même que l'URL de la page actuelle de l'utilisateur. +- L'image spécifiée est corrompue de telle manière qu'elle ne peut être chargée. +- Les métadonnées de l'image spécifiée sont corrompues empêchant de récupérer ses dimensions, et aucune dimension n'est spécifiée dans les attributs de l'élément `<img>`. +- L'image spécifiée est dans un format non supporté par l'"{{Glossary("user agent")}}". + +## Exemple + +```js +var img1 = new Image(); // Constructeur HTML5 img1.src = 'image1.png'; img1.alt = 'alt'; document.body.appendChild(img1); @@ -92,58 +87,24 @@ img2.alt = 'alt text'; document.body.appendChild(img2); // en utilisant la première image dans le document -alert(document.images[0].src);</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> - <td>{{Spec2('Referrer Policy')}}</td> - <td>Ajoute la propriété <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>Ajoute les propriétés <code>x</code> et<code>y</code> .</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Les propriétés suivantes sont ajoutées : <code>srcset</code>, <code>currentSrc</code> et <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 constructeur (avec 2 paramètres facultatifs) est ajouté.<br> - Les propriétés suivantes sont maintenant obsolètes : <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, et <code>longdesc</code>.<br> - Les propriétés suivantes sont maintenant <code>unsigned et long</code>, iau lieu de <code>long</code>: <code>height</code> et <code>width</code>.<br> - Les propriétés suivantes ont été ajoutées : <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code> et <code>complete</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td>La propriété <code>lowSrc</code> a été supprimée.<br> - La propriété est maintenant <code>long</code>, au lieu des <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code> et <code>vspace</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.HTMLImageElement")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<p>L'élément HTML implémentant cette interface : {{HTMLElement("img")}}</p> +alert(document.images[0].src); +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}} | {{Spec2('Referrer Policy')}} | Ajoute la propriété `referrerPolicy` . | +| {{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}} | {{Spec2('CSSOM View')}} | Ajoute les propriétés `x` et`y` . | +| {{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}} | {{Spec2('HTML WHATWG')}} | Les propriétés suivantes sont ajoutées : `srcset`, `currentSrc` et `sizes`. | +| {{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}} | {{Spec2('HTML5 W3C')}} | Un constructeur (avec 2 paramètres facultatifs) est ajouté. Les propriétés suivantes sont maintenant obsolètes : `name`, `border`, `align`, `hspace`, `vspace`, et `longdesc`. Les propriétés suivantes sont maintenant `unsigned et long`, iau lieu de `long`: `height` et `width`. Les propriétés suivantes ont été ajoutées : `crossorigin`, `naturalWidth`, `naturalHeight` et `complete`. | +| {{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}} | {{Spec2('DOM2 HTML')}} | La propriété `lowSrc` a été supprimée. La propriété est maintenant `long`, au lieu des `DOMString`: `height`, `width`, `hspace` et `vspace`. | +| {{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}} | {{Spec2('DOM1')}} | définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.HTMLImageElement")}} + +## Voir aussi + +L'élément HTML implémentant cette interface : {{HTMLElement("img")}} |