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
|
---
title: HTMLImageElement
slug: Web/API/HTMLImageElement
translation_of: Web/API/HTMLImageElement
---
{{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);
var img2 = document.createElement('img'); // utilise DOM HTMLImageElement
img2.src = 'image2.jpg';
img2.alt = 'alt text';
document.body.appendChild(img2);
// en utilisant la première image dans le document
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")}}
|
