Are <map> and <area> supported html elements?

Photoshop
1

Hello,
I am trying to create a custom color swatch selector. To do this, I have a png image that I was going to add <map> and <area> tags to using the ‘usemap’ property, such that when you clicked on an area, it sets your foreground color.

But even with a simple map, I cannot get it to work. The area elements do exist in the DOM, and I am even able to add event listeners to each one. But it seems like ‘usemap’ never actually works, because clicking the image never produces the function call back. If I assign the callback to the img element itself, then the function works. So it really seems like the only thing that doesn’t work is the “usemap” property.

Here is an example

HTML

.myclass {
 cursor:crosshair; /*This also doesnt seem to do anything, but it worked in CEP*/
}

<img src="myImg.png" usemap="#myMap"/>
<map name="myMap">
<area id="area1" class ="myclass" value="10" shape="rect" coords="0,0,200,200">
<area id="area2" class ="myclass" value="20" shape="rect" coords="200,200,400,400">
</map>

JS

for (let element of document.querySelectorAll('.myclass')){
  element.addEventListener('click', myFunction) //confirmed this is being hit for all my area elements.
}

function myFunction(){
console.warn('click!')
}
2

CEP was a more or less a browser
UXP is not

you should never compare the two

not all HTML/CSS elements or properties are supported.

adobe wants us to use spectrum uxp elements only

even currently supported elements are not guaranteed to last according to the docs.

maybe consider using webview

3

I disagree that one should never compare the two.

Standard html and spectrum components are obviously parallels to one another. Learning one gives you an advantage in the other. That reason alone is enough to compare a browser to UXP, and I’ll bet you an entire plate of bean dip that this will stay true.

I am aware that not all are supported–thus the question. I wanted to make sure I wasn’t doing something wrong rather than write it off prematurely.

It would seem that your implied answer to my question is that <map> and <area> are not supported by UXP?

If so, I beseech Adobe to provide an alternative. I can get by with a much uglier approach, but generating clickable areas in an image in a program designed for editing images sounds powerful and useful.

4

in a perfect world, I’d agree. however the UXP team had to make hard choices on what to support since they’re building the UI engine from the ground up and loading a complete browser across multiple panels made for poor performance and bad UX.

when I say “never compare” I mean don’t expect things that were supported in CEP to be supported in UXP because they’re completely different things.

now to the point: sadly we don’t have a complete list of supported components.
here’s what I was able to find:
Unsupported Elements
User Interface

and the following quote from the docs:

  • Prepare for the future - Spectrum UXP components will become the only supported user-interface controls in UXP in the future. Prepare now by using them instead of the HTML correlates.

however I think you can make a good case for your usage of such element and devs might add it, if it’s not already on the roadmap.