mozilla

Revision 390917 of <area>

  • Raccourci de la révision : HTML/Element/area
  • Titre de la révision : <area>
  • ID de la révision : 390917
  • Créé :
  • Créateur : SphinxKnight
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

Résumé

L'élément HTML <area> définit une zone particulière d'une image et peut lui associer un lien hypertexte. Cet élément n'est utilisé qu'au sein d'un élément {{HTMLElement("map")}}.

  • Catégories de contenu Contenu de flux, contenu phrasé
  • Contenu autorisé Aucun, cet élément est un élément vide.
  • Omission de balises {{no_tag_omission}}
  • Éléments parents autorisés Tout élément acceptant du contenu phrasé. L'élément <area> doit avoir un élément {{HTMLElement("map")}} parmi ses ancêtres mais ce dernier n'a pas besoin d'être son parent direct.
  • Interface DOM {{domxref("HTMLAreaElement")}}

Attributs

Cet élément inclut les attributs globaux.

{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
Définit un raccourci clavier pour cet élément. Appuyer sur la touche ALT (ou une autre touche similaire) et sur la touche définie par l'attribut sélectionnera l'action associée à cette séquence. Il est conseillé de ne pas utiliser les combinaisons de touches déjà utilisées par les navigateurs. Cet attribut est global depuis HTML5.
{{htmlattrdef("alt")}}
Un texte alternatif à afficher par les navigateurs pour remplacer l'image si le navigateur ne l'affiche pas. Le texte devrait être phrasé afin de présenter les mêmes choix qui auraient été offerts par l'image. En HTML4, cet attribut est obligatoire mais peut prendre la valeur "" (chaîne de caractères vide). En HTML5, cet attribut est requis seulement si l'attribut href est utilisé.
{{htmlattrdef("coords")}}
Un ensemble de valeurs définissant les coordonnées de la zone d'intérêt. Le nombre et la signification des valeurs de cet attribut dépendent de la valeur de l'attribut shape. Dans le cas où ce dernier vaut rect (c'est à dire une forme rectangulaire), les valeurs de l'attribut coords seront deux paires x,y : gauche,haut et droite,bas. Si shape vaut circle, la valeur est x,y,r avec  x,y les coordonnées du centre du cercle et r son rayon. Pour un polygone (shape valant poly), la valeur est un ensemble pairs x,y représentant les points du polygone : x1,y1,x2,y2,x3,y3, et ainsi de suite. En HTML4, les valeurs sont exprimées en nombre de pixels ou en pourcentage si un caractère pourcent (%) est ajouté. En HTML5, les valeurs sont exprimées en pixels CSS.
{{htmlattrdef("download")}} {{HTMLVersionInline("5")}}
Cet attribut, s'il est indiqué, fournit le lien hypertexte souhaité par l'auteur de la page pour que l'utilisateur télécharge la ressource. Voir l'élément {{HTMLElement("a")}} pour une description complète de l'attribut {{htmlattrxref("download", "a")}}.
{{htmlattrdef("href")}}
Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. En HTML4, l'un des deux attributs href ou nohref doit être présent. En HTML5, cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.
{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}
Indique la langue de la ressource liée. Les valeurs que peut prendre cet attribut sont définis dans le BCP47. Cet attribut ne doit être utilisé que si l'attribut href est présent.
{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
Définit un nom pour la zone sur laquelle on peut cliquer afin que cet élément puisse être interprété par les navigateurs plus anciens.
{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}
Une indication concernant le media pour lequel la ressource liée a été conçue. Il peut par exemple valoir print and screen. S'il est absent, sa valeur par défaut sera all. Cet attribut ne doit être utilisé seulement si l'attribut href est présent.
{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si href ne l'est pas et vice versa.

Note d'utilisation : Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut href suffit.

{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}
Pour les ancres contenant l'attribut href, cet attribut définit la relation entre l'objet ciblé et l'objet lié. La valeur est une liste des différentes relations dont les valeurs sont séparées par des virgules. Les valeurs et leurs significations peuvent être enregistrées par une autorité jugée utile par l'auteur du document. La valeur par défaut est la relation vide. Cet attribut ne doit être utilisé seulement si l'attribut href est présent.
{{htmlattrdef("shape")}}
La forme de la zone d'intérêt. Les spécifications HTML5 et HTML4 définissent les valeurs rect (zone rectangulaire), circle (zone circulaire), poly (zone polygonale) et default (indiquant toute la zone). Beacuoup de navigateurs, comme Internet Explorer 4 et ultérieur, supportent les valeurs circ, polygon et rectangle pour l'attribut shape. Ces valeurs sont {{Non-standard_inline}}.
{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est global dans HTML5.
{{htmlattrdef("target")}}
Cet attribut précise où afficher la ressource liée. En HTML4 c'est le nom (ou un mot-clé) d'un cadre. En HTML5, c'est le nom (ou le mot-clé) d'un contexte de navigation (un onglet, une fenêtre, ou une frame inline). Les mots-clés peuvent avoir les significations suivantes :
  • _self : Charge la réponse dans le même cadre HTML4 ou dans le même contexte de navigation HTML5. Cette valeur est la valeur par défaut si l'attribut n'est pas précisé.
  • _blank : Charge la réponse dans une nouvelle fenêtre (sans nom) avec HTML4 ou dans un nouveau contenu de navigation HTML5 (sans nom).
  • _parent : Charge la réponse dans le même cadre que le parent  du cadre de l'élément actuel en HTML4. En HTML5 on a la même situation avec le contexte de navigation. S'il n'y pas de parent, cette valeur aura le même rôle que la valeur _self.
  • _top : En HTML4 la réponse sera chargée dans toute la fenêtre d'origine annulant ainsi les autres cadres. En HTML5 la réponse sera chargée dans le contexte de navigation avec le plus haut niveau (autrement dit l'ancêtre du contexte actuel qui n'a pas de parent). Si le contexte actuel n'a pas de parent alors cette valeur aura le même effet que la valeur _self.

Cet attribut ne doit être utilisé que si l'attribut href est présent.

{{htmlattrdef("type")}}
Cet attribut définit le type MIME de la cible du lien. Cet attribut a généralement une fonction indicative. Cependant les prochains navigateurs pourraient ajouter une petite icône pour les types multimédia. Voir http://www.w3.org/TR/html4/references.html#ref-MIMETYPES our une liste complète des types MIME reconnus. Cet attribut ne doit être utilisé que si l'attribut href est présent.

Exemple

<map name="primary">
  <area shape="circle" coords="200,250,25" href="une_autre_page.htm" /> 
  <area shape="default" nohref />
</map>

Spécifications

Spécification Statut Commentaires
{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'the-area-element.html#the-area-element', '<area>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}} {{Spec2('HTML4.01')}}  

Compatibilité des navigateurs

{{CompatibilityTable}}

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Support simple {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

Notes

Dans les spécifications HTML des versions 3.2, 4.0, et 5, la balise de fermeture </area> est proscrite.

La spécification XHTML 1.0 demande l'utilisation d'une barre oblique avant le chevron fermant : <area />.

Les attributs id, class et style ont la même signification que ceux qui avaient été définis dans la spécification HTML 4. Cependant cette spécification n'avait été définie que par Microsoft et Netscape.

Les navigateurs Netscape de niveau 1 n'arrivent pas à interpréter l'attribut target si celui-ci fait références à des éléments frames.

HTML 3.2 définit seulement les attributs alt, coords, href, nohref et shape.

{{HTML:Element_Navigation}}

Source de la révision

<h2 id="Summary">Résumé</h2>
<p>L'élément <strong>HTML <code>&lt;area&gt;</code></strong><em> </em>définit une zone particulière d'une image et peut lui associer un lien hypertexte. Cet élément n'est utilisé qu'au sein d'un élément {{HTMLElement("map")}}.</p>
<ul class="htmlelt">
  <li><dfn><a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu" title="/fr/docs/HTML/Catégorie_de_contenu">Catégories de contenu </a></dfn><a href="/fr/docs/HTML/Catégorie_de_contenu#Contenu_de_flux" title="/fr/docs/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a></li>
  <li><dfn>Contenu autorisé </dfn>Aucun, cet élément est un élément vide.</li>
  <li><dfn>Omission de balises </dfn> {{no_tag_omission}}</li>
  <li><dfn>Éléments parents autorisés </dfn> Tout élément acceptant du <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>. L'élément&nbsp;<code>&lt;area&gt;</code> doit avoir un élément {{HTMLElement("map")}} parmi ses ancêtres mais ce dernier n'a pas besoin d'être son parent direct.</li>
  <li><dfn>Interface DOM </dfn> {{domxref("HTMLAreaElement")}}</li>
</ul>
<h2 id="Attributes">Attributs</h2>
<p><span style="line-height: 21px;">Cet élément inclut les </span><a href="/fr/docs/HTML/Global_attributes" style="line-height: 21px;" title="/fr/docs/HTML/Global_attributes">attributs globaux</a>.</p>
<dl>
  <dt>
    {{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
  <dd>
    Définit un raccourci clavier pour cet élément. Appuyer sur la touche ALT (ou une autre touche similaire) et sur la touche définie par l'attribut sélectionnera l'action associée à cette séquence. Il est conseillé de ne pas utiliser les combinaisons de touches déjà utilisées par les navigateurs. Cet attribut est global depuis HTML5.</dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("alt")}}</dt>
  <dd>
    Un texte alternatif à afficher par les navigateurs pour remplacer l'image si le navigateur ne l'affiche pas. Le texte devrait être phrasé afin de présenter les mêmes choix qui auraient été offerts par l'image. En HTML4, cet attribut est obligatoire mais peut prendre la valeur "" (chaîne de caractères vide). En HTML5, cet attribut est requis seulement si l'attribut <strong>href</strong> est utilisé.</dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("coords")}}</dt>
  <dd>
    Un ensemble de valeurs définissant les coordonnées de la zone d'intérêt. Le nombre et la signification des valeurs de cet attribut dépendent de la valeur de l'attribut <strong>shape</strong>. Dans le cas où ce dernier vaut <code>rect</code> (c'est à dire une forme rectangulaire), les valeurs de l'attribut <strong>coords</strong> seront deux paires x,y : gauche,haut et droite,bas. Si <strong>shape</strong> vaut <code>circle</code>, la valeur est <code>x,y,r</code> avec&nbsp; <code>x,y</code> les coordonnées du centre du cercle et <code>r</code> son rayon. Pour un polygone (<strong>shape</strong> valant <code>poly</code>), la valeur est un ensemble pairs x,y représentant les points du polygone : <code>x1,y1,x2,y2,x3,y3,</code> et ainsi de suite. En HTML4, les valeurs sont exprimées en nombre de pixels ou en pourcentage si un caractère pourcent (%) est ajouté. En HTML5, les valeurs sont exprimées en pixels CSS.</dd>
  <dt>
    {{htmlattrdef("download")}} {{HTMLVersionInline("5")}}</dt>
  <dd>
    Cet attribut, s'il est indiqué, fournit le lien hypertexte souhaité par l'auteur de la page pour que l'utilisateur télécharge la ressource. Voir l'élément {{HTMLElement("a")}} pour une description complète de l'attribut {{htmlattrxref("download", "a")}}.</dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("href")}}</dt>
  <dd>
    Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. En HTML4, l'un des deux attributs <strong>href</strong> ou <strong>nohref</strong> doit être présent. En HTML5, cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.</dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt>
  <dd>
    Indique la langue de la ressource liée. Les valeurs que peut prendre cet attribut sont définis dans le <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Cet attribut ne doit être utilisé que si l'attribut <strong>href</strong> est présent.</dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
  <dd>
    Définit un nom pour la zone sur laquelle on peut cliquer afin que cet élément puisse être interprété par les navigateurs plus anciens.</dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("media")}} {{HTMLVersionInline("5")}}</dt>
  <dd>
    Une indication concernant le media pour lequel la ressource liée a été conçue. Il peut par exemple valoir <code>print and screen</code>. S'il est absent, sa valeur par défaut sera <code>all</code>. Cet attribut ne doit être utilisé seulement si l'attribut <strong>href</strong> est présent.</dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
  <dd>
    Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si <strong>href</strong> ne l'est pas et <em>vice versa</em>.
    <div class="note">
      <p><strong>Note d'utilisation : </strong>Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut <strong>href</strong> suffit.</p>
    </div>
  </dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}</dt>
  <dd>
    Pour les ancres contenant l'attribut <strong>href</strong>, cet attribut définit la relation entre l'objet ciblé et l'objet lié. La valeur est une liste des différentes relations dont les valeurs sont séparées par des virgules. Les valeurs et leurs significations peuvent être enregistrées par une autorité jugée utile par l'auteur du document. La valeur par défaut est la relation vide. Cet attribut ne doit être utilisé seulement si l'attribut <strong>href</strong> est présent.</dd>
  <dt>
    {{htmlattrdef("shape")}}</dt>
  <dd>
    La forme de la zone d'intérêt. Les spécifications HTML5 et HTML4 définissent les valeurs <code>rect</code> (zone rectangulaire), <code>circle</code> (zone circulaire), <code>poly</code> (zone polygonale) et <code>default</code> (indiquant toute la zone). Beacuoup de navigateurs, comme Internet Explorer 4 et ultérieur, supportent les valeurs <code>circ</code>, <code>polygon</code> et <code>rectangle</code> pour l'attribut <strong>shape</strong>. Ces valeurs sont {{Non-standard_inline}}.</dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
  <dd>
    Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est global dans HTML5.</dd>
</dl>
<dl>
  <dt>
    {{htmlattrdef("target")}}</dt>
  <dd>
    Cet attribut précise où afficher la ressource liée. En HTML4 c'est le nom (ou un mot-clé) d'un cadre. En HTML5, c'est le nom (ou le mot-clé) d'un <em>contexte de navigation</em> (un onglet, une fenêtre, ou une <code>frame</code> <em>inline).</em> Les mots-clés peuvent avoir les significations suivantes :
    <ul>
      <li><code>_self</code> : Charge la réponse dans le même cadre HTML4 ou dans le même contexte de navigation HTML5. Cette valeur est la valeur par défaut si l'attribut n'est pas précisé.</li>
      <li><code>_blank </code>: Charge la réponse dans une nouvelle fenêtre (sans nom) avec HTML4 ou dans un nouveau contenu de navigation HTML5 (sans nom).</li>
      <li><code>_parent</code> : Charge la réponse dans le même cadre que le parent&nbsp; du cadre de l'élément actuel en HTML4. En HTML5 on a la même situation avec le contexte de navigation. S'il n'y pas de parent, cette valeur aura le même rôle que la valeur <code>_self</code>.</li>
      <li><code>_top </code>: En HTML4 la réponse sera chargée dans toute la fenêtre d'origine annulant ainsi les autres cadres. En HTML5 la réponse sera chargée dans le contexte de navigation avec le plus haut niveau (autrement dit l'ancêtre du contexte actuel qui n'a pas de parent). Si le contexte actuel n'a pas de parent alors cette valeur aura le même effet que la valeur <code>_self</code>.</li>
    </ul>
    <p>Cet attribut ne doit être utilisé que si l'attribut <strong>href</strong> est présent.</p>
  </dd>
  <dt>
    {{htmlattrdef("type")}}</dt>
  <dd>
    Cet attribut définit le type MIME de la cible du lien. Cet attribut a généralement une fonction indicative. Cependant les prochains navigateurs pourraient ajouter une petite icône pour les types multimédia. Voir <a class="linkification-ext external" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a> our une liste complète des types MIME reconnus. Cet attribut ne doit être utilisé que si l'attribut <strong>href</strong> est présent.</dd>
</dl>
<h2 id="Example">Exemple</h2>
<pre class="brush: html">
&lt;map name="primary"&gt;
  &lt;area shape="circle" coords="200,250,25" href="une_autre_page.htm" /&gt; 
  &lt;area shape="default" nohref /&gt;
&lt;/map&gt;
</pre>
<h2 id="Specifications" name="Specifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
      <th scope="col">Commentaires</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '&lt;area&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'the-area-element.html#the-area-element', '&lt;area&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;area&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mini</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Notes">Notes</h2>
<p>Dans les spécifications HTML des versions 3.2, 4.0, et 5, la balise de fermeture <code>&lt;/area&gt;</code> est proscrite.</p>
<p>La spécification XHTML 1.0 demande l'utilisation d'une barre oblique avant le chevron fermant : <code>&lt;area /&gt;</code>.</p>
<p>Les attributs <strong>id</strong>, <strong>class</strong> et <strong>style</strong> ont la même signification que ceux qui avaient été définis dans la spécification HTML 4. Cependant cette spécification n'avait été définie que par Microsoft et Netscape.</p>
<p>Les navigateurs Netscape de niveau 1 n'arrivent pas à interpréter l'attribut <strong>target</strong> si celui-ci fait références à des éléments <strong>frames</strong>.</p>
<p>HTML 3.2 définit seulement les attributs <strong>alt</strong>, <strong>coords</strong>, <strong>href</strong>, <strong>nohref</strong> et <strong>shape</strong>.</p>
<p>{{HTML:Element_Navigation}}</p>
Revenir à cette révision