When an image is styled with CSS to grow or shrink to occupy available space in the container DIV, what steps must be taken to keep the image-map area coordinates in sync with the changing image size?
img {
/* border: 2px dotted red; */
width:100% !important;
max-width: none !important;
height: auto !important;
}
div {width: 100%; height: auto}
Does the plugin's scaleMap: true property handle this scenario? Or must additional steps be taken? I haven't been able to get it to work using scaleMap alone, but perhaps I'm misunderstanding what scaleMap does. Does it handle situations where the user drags the browser window wider or narrower, and changes in orientation on a tablet device?
The documentation is not exactly clear. scaleMap will scale the imagemap to match the size of the image as initially rendered. So using css like width: 200px; height: 400px; to present an image that's not actually that size will work fine, and resize the image map.
However, it doesn't handle user-initiated scaling events after the page has been initially loaded. So css like width: 100%; isn't a good idea. It will adjust the image map on the first load, but then nothing will happen if the user resizes the viewport. The intent was to deal with images that are not displayed at their native sizes, rather than responsive design.
However, you can use ImageMapster in a responsive design, but you need to tell it when to resize an image. There's an example on the "demos" page under "Fiddle with it":
"How do I get the imagemap to adjust to the size of the browser window automatically?
- Resize the map when the user resizes
The code basically captures & buffers resize events, and then calls ImageMapster's resize method in response. This will probably become a native feature in the next version, so you can just use proportional css; for now you can just copy the technique in the example.