[IDEA] Make image map (usemap) responsive

[Telumire]

Currently maps have the default behavior of being defined with pixels. This cause issues when using responsive images, for example here:

<$image width="1024px" source="https://i.imgur.com/uI3incl.jpg" usemap="#image-map"/>
<map name="image-map">
<area target="_self" alt="Enter The Door" title="Enter the room" href="#:[[The Library]]" coords="115,344,235,402,242,740,131,804,128,708,100,664,101,558" shape="poly">
</map>

https://point-and-click.tiddlyhost.com/#Image%20Map%20Demo

When the sidebar is open, the image scale down, and the area do not match the door entrance anymore. There is a (verbose) alternative using svg :

<svg viewBox="0 0 1024 1024">
<foreignObject width="100%" height="100%">
[img[https://i.imgur.com/uI3incl.jpg]]
</foreignObject>
<a href="#:[[The Library]]">
<title>Enter the room</title>
<path opacity="0" d="m107.6 342.19 136.7 50.271 0.16392 341.23-106.64 58.621 0.62363-18.397-9.6663-6.2363-1.5591-61.428-13.408-3.43-9.3544-28.375z"/>
</a>
</svg>

The scalability issue might cause users to be confused. I suggest that we either include a javascript solution to resize the map, such as https://github.com/davidjbradshaw/image-map-resizer, or that in the doc we warn the user of that potential issue and provide the above alternative. Another option would be to generate a SVG behind the scene instead. What do you think ?

Relevant: https://github.com/Jermolene/TiddlyWiki5/pull/8044