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.
I just found a workaround of my own, but thanks anyway. My site currently doesn't use any JS so i'm putting off learning it until i have to.