One page on my website consists of a single large image (with absolute position and fixed width) and an imagemap. I just realized that if i shrink my browser window or try to view the page on any screen that's not the same size as mine, the image and map become desynchronized.
I don't think this would be a problem if i could make the imagemap use percentage or vw/vh units instead of pixels, but it doesn't seem to work that way. It will accept percentages or vw/vh for one of a rectangular hotspot's coordinates, even mixed, but apparently one coordinate has to be in pixels.
Does anyone know a way around this besides letting the image be bigger than the window it's in and making users with smaller screens scroll horizontally?
I'm mostly concerned with compatibility with Firefox v138, but more generally compatible solutions are better.
If it helps, the relevant code for the image is:
style="position:absolute; top:0vh; left:0vw; width:100%"
and the map is:
<map name="map"> <area shape="rect" coords="89,522,173,634" title="font compryption" href="inventions/compryption.htm"> </map>
A normal imagemap, as far as i can tell.
Turns out no, an imagemap cannot use relative units for its hotspots. Sort of. I can use whatever units i want for one corner of a rectangular hotspot, i can even mix units, but one corner has to be in px. What does work is adding a single pixel transparent image with a link, stretched to cover the hotspot. Then i can position and scale that image using vw units (vh and % won't work) and for reasons beyond my comprehension, that just works.