Add mechanism for a button-like element to behave like an <area>

[lukewarlow]

Currently when using a <map> you can't position /shape a <button> like you can an area.

This means you cannot use popover attributes. (nor will you be able to use the proposed invoker attributes).

This feels like a valid use case that's not currently possible without having to manually position buttons a top an image.

For example trying to mark up a map, where you can click on one of the cities and see some info about it (see https://x.com/brucel/status/1702295018428330255?s=20 for context)

Possible solutions:

• Allow button inside of a <map> and let coords and shape attributes to work as expected on it.
• A new element such as <area-button> that works much like an <area> but doesn't support target and href and does support these new attributes (is also semantically a button)
• Allow <area> to use these new attributes (and preferably they would automatically make it's role button like href makes it a link)

I'm not particularly attached to any of these solutions it's more just to ensure it's possible.

[domenic]

Why is positioning using coords and shape preferable to positioning using CSS? I thought CSS was really good at positioning, and coords and shape were from the old days before CSS existed.

[annevk]

My impression was also that image maps are a soft-deprecated feature. They certainly haven't really been touched since they were added to the platform. The only thing we do still do is ensure area and a have the same feature set.

[lukewarlow]

Its slightly unfortunate to have something but not make it better as the platform progresses with stuff like popovers. Having said that I do understand, potentially it should be reflected better on MDN to give an alternative suggestion?

Wrt CSS Vs coords and shape, I personally find there's not much in it but having an interactive image map not be interactive fully does feel like something more people will run into. But then I have no data maybe really doesn't get any use and this is all academic.

Just thought it was worth raising for discussion as it is a "gap" in the platform in some respects.

[scottaohara]

Seems this use case could be solved with the popover API without needing a new element?

https://codepen.io/scottohara/pen/VwqroKv

extra css/js added for fallback solution for lack of popover support

[lukewarlow]

Yep it's definitely possible. I guess it's just that it needs JS whereas it would be nice to do it declaratively.