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?
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.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.
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)
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.