I see. I can reproduce the issue with the CSS you provided. Unfortunately, I think this is just an issue with how image maps are designed in HTML and didn't realize it before since I generally don't use them.

I did some searching and found other people who ran into similar issues. Most of them (who got to a solution) seemed to workaround it by using JS to recompute the coordinates as needed -- e.g. using https://github.com/jamietre/ImageMapster or other libraries.

I think you could also accomplish it with an SVG. (e.g. this result came up in a search)

My problem arises when i shrink my browser window to be less wide than the image, so it scales down to fit, and i guess the imagemap doesn't. I found a browser extension that can highlight imagemaps, and here's what the page looks like from a full screen and a smaller screen.

The image is being scaled down by width:100% but the map doesn't scale with it, and uses the same pixel distances from the origin corned of the screen. I've added some relevant code to the initial post. The horizontal scroll bar is only brought back by the extension, normally the maps to the right (not shown here) are impossible to reach on a screen too narrow.

I guess as a workaround i could add invisible images with links at absolute positions where i currently have hotspots. (PS: tried this, found the same problems. Maybe i just don't understand CSS positioning, maybe what i'm trying to do is impossible. Maybe i need a break, or to not work on this stuff first thing in the morning.)

Not sure how you're getting things desynchronized. If I just put an img on a page and transform it with CSS (e.g. img { transform: rotate(90deg) scale(50%); }) as a quick test, the areas on a map I associated with it correctly correspond to the rotated and scaled areas displayed. The pixels I used in the map are from the coordinate system of the image -- not absolute coordinates on the page.

With pure HTML, probably not, I think it can be done with JS though.

you could look at the user agents and have 2 versions, one for normal browsers and one for Links and similar.

you could also probably do something terrible with having an initial page that supports both, adding a cookie and detecting if the css file gets downloaded, then after that point serving them the css styled if they did or the table styled if not. you could even reload the page with js if it's enabled and you detect the css was downloaded. this hinges on Links and similar not even downloading the css, which I'm not sure if is true.

EDIT: assuming here that "just make the page simple" is not an option. If the page layout is advanced enough that lacking CSS is a serious instance, you'll need two versions (or a version and an "export") anyway.

An option that I strongly don't recommend but it is doable, is to make the page with tables, then format the tables with display:flex or display:grid and the adequate related properties for the "modernized" view for browsers that support CSS.

Then again, nothing really prevents you from doing things the better way: making two pages and linking from one to the ther with a link like

Click here for a simplified / tabular version

It's even easier to maintain, in particular if you have a good workflow / build system for composing either page from the data you want to show.

If you want to have a tables version (the 90s called!) in one page (without serving different versions), then you'd probably have to have that in the page the whole time then override that with CSS, or just have two versions in the page and use CSS to show the correct version (I'm not sure if Links2 supports any CSS like display: none).

You could make your html usable without css. You could also test some css manipulaion with javascript. Or load both and hide the unstyled one with css