I tried to use some solutions like this, working on the web, but requiring a unique width, height and mapname, and therefore useless for my purpose, because I have several imagemaps (of different width, height and mapname) from a (local) database, dynamically shown with php and js. At least it seems that I cannot dynamically replace that values from my php code.
Therefore I think that I should work on this other solution, that not require an unique width and height, but is dynamically adaptive.
The solution works if the whole browser window resizes, but not (I’m not able to get it working, at least) if I resize the image itself.
There would be a way to adapt the js code or the css or the html ones, so that the imagemap resizing works even if is the image to expand itself, without resizing the whole browser window?
Perhaps not what you were looking for, but I think it would be far simpler to use an SVG graphic with anchors within it.
It would scale like an ordinary image with the shapes in the anchors scaling in sync. No complex scripting required.
With the above code I see an empty space with the name ( <text x="260" y="240" fill="#fff">[a name]</text>) correctly shown (small and big, as expected, when the image is expanded).
The html code where the svg is put is:
I’m not sure what you mean by this. Can you explain?
The image resizes to fit its container size. As is the container’s size is governed by the window size, but if it is altered by some other means the image still resizes with it.
Nothing to do with foreignObject in svg.
If I could get an external resource in Firefox (or another linux browser) my problem would be resolved. Here there should be some tips, but I cannot understand them.
I think that I need a workaround: I will use svg as linked image (replacing the whole browser tab), and not a modal one. It works, because svg is not within an html code but a standalone image. Therefore there is not a security issue (external resources).
Now, however, I have a (small) php problem (to automatize the code).