HTMLAreaElement : propriété interestForElement

Valeur

Une instance d'objet Element, ou null si l'élément <area> associé n'a pas d'élément cible défini.

Exemples

Exemple simple d'utilisation de interestForElement

Dans cet exemple, nous utilisons la propriété interestForElement d'un élément <area> pour définir son élément cible, puis récupérer le tagName de cet élément. Le tagName est ensuite affiché dans le contenu texte de l'élément <area>.

HTML

Le balisage inclut un élément <area> et un élément <div>. Nous transformons l'élément <div> en popover en lui ajoutant l'attribut popover.

<map>
  <area href="#" shape="default" />
</map>
<div id="mypopover" popover>I am a <code>&lt;div&gt;</code> element.</div>

map {
  width: 200px;
  height: 100px;
  background-color: pink;
  padding: 5px;
}

JavaScript

On récupère des références aux éléments <area> et <div> dans le script, puis on crée la relation invocateur d'intérêt ↔ élément cible entre le <area> et le <div> en affectant à la propriété interestForElement du <area> une référence vers le <div>. On définit ensuite le contenu texte de l'élément <area> sur une chaîne contenant le tagName de l'élément cible, obtenu via invoker.interestForElement.tagName.

const invoker = document.querySelector("area");
const popover = document.querySelector("div");

invoker.interestForElement = popover;

invoker.textContent = `Mon élément cible est un ${invoker.interestForElement.tagName}`;

Résultat

L'exemple se rend ainsi :

Essayez de montrer de l'intérêt pour la zone (par exemple au survol ou au focus) pour faire apparaître le <div>.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Utilisation des invocateurs d'intérêt
• L'API Popover