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
145
146
147
148
149
|
---
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><span id="result_box" lang="fr"><span>Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}</span></span></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="https://developer.mozilla.org/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 <span id="result_box" lang="fr"><span> fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image.</span></span></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")}} <span id="result_box" lang="fr"><span>indiquant la référence à utiliser pour récupérer l'image.</span></span></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<span id="result_box" lang="fr"><span> deux propriétés </span></span> <code>unsigned</code> et <code>long</code> <span lang="fr"><span>, qui sont la largeur et la hauteur de la ressource, et crée une instance de </span></span> <code>HTMLImageElement</code> <span lang="fr"><span>, non insérée dans une arborescence DOM.</span></span></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 line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> img1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Constructeur HTML5</span>
img1<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'image1.png'</span><span class="punctuation token">;</span>
img1<span class="punctuation token">.</span>alt <span class="operator token">=</span> <span class="string token">'alt'</span><span class="punctuation token">;</span>
document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>img1<span class="punctuation token">)</span><span class="punctuation token">;</span></code>
<span class="keyword token">var</span> img2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'img'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// utilise DOM HTMLImageElement</span>
img2<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'image2.jpg'</span><span class="punctuation token">;</span>
img2<span class="punctuation token">.</span>alt <span class="operator token">=</span> <span class="string token">'alt text'</span><span class="punctuation token">;</span>
document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>img2<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">// en utilisant la première image dans le document</span>
<span class="function token">alert</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span>images<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>src<span class="punctuation token">)</span><span class="punctuation token">;</span></pre>
<h2 class="brush: js line-numbers language-js" 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>
|
