Dynamically resizable imagemap

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.

1 Like

I have already tried this way, but unsuccessfully. Because I didn’t manage to expand a svg image.
If you can help me in this, I will appreciate it very much.

This is a very basic SVG example. But you can see I put an anchor around the middle circle only, when you hover over it. It should work the same with more complex shapes.

1 Like

Uhm… In your code the image doesn’t seem resizable regardless to the whole window. I need an image resizable (possibly by a click) without resizing the whole browser window.

Any way I tried to show a svg with an embedded image (otherwise I should create a lot of svg) and this code doesn’t work (works in a browser as standalone svg, but not inserted in a complex code):

<svg version="1.1" id="image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="1920" height="800" x="0px" y="0px" viewBox="220 40 1920 800" style="enable-background:new 220 40 1920 800;" xml:space="preserve">

  <image x="2" y="2" width="1920" height="800"
         xlink:href="../my-path/my-file.jpg"></image>
  <text x="260" y="240" fill="#fff">[a name]</text>
 
</svg>

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:

<p><img class='fl' type='image/svg+xml' onclick='onClick(this)' style='width:600px' alt='immagine della classe' tabindex='1' usemap='#s43map' src='http://localhost/mypath/my-image.svg' /></p>

The only thing now is understand why the text is shown and the image embedded in svg not.

EDIT

It is a secure measure: no way to by-pass it.
And using object tag instead of img one, means impossibility to expand the svg. At least, it seems so.

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.

1 Like

I mean a “modal image”. I have modal images, according to a post of mine on sitepoint. By clicking on an image I get it expanded and centered on the screen. Without resizing the browser window.

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

Should I open a new thread or go ahead here?

Open a new thread in the PHP forum but supply a link to this thread so that they don’t go over old ground.

1 Like

OK, but maybe I could solve somehow without that code. I will do some attempts, before opening a new thread.
Thank you!

1 Like