HTMLAreaElement: interestForElement property
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The interestForElement property of the HTMLAreaElement interface gets or sets the target element of an interest invoker, in cases where the associated <area> element is specified as an interest invoker.
See Creating an interest invoker for more details.
Value
An Element object instance, or null if the associated <area> element does not have a target element set.
Examples
Basic interestForElement usage
In this example, we use an <area> element's interestForElement property to set its target element and then retrieve the target element's tagName. The tagName is then printed in the <area> element's text content.
HTML
We include an <area> element and a <div> element. We turn the <div> element into a popover by setting a popover attribute on it.
<map>
<area href="#" shape="default" />
</map>
<div id="mypopover" popover>I am a <code><div></code> element.</div>
JavaScript
We get references to the <area> and <div> elements in script, then declare an interest invoker-target relationship between the <area> and the <div> by setting the <area> element's interestForElement property equal to a reference to the <div>. We then set the <area> element's text content equal to a string containing the target element's tagName, retrieved via invoker.interestForElement.tagName.
const invoker = document.querySelector("area");
const popover = document.querySelector("div");
invoker.interestForElement = popover;
invoker.textContent = `My target is a ${invoker.interestForElement.tagName} element`;
Result
The example renders like this:
Try showing interest in the area (for example, by hovering or focusing it) to make the <div> appear.