Resizing ImageMap with hotspots

Using Django
1

I am looking for a way to maintain the relationship between an image map and hotspots on the image map as the image is resized. It appears the only way to position clickable hotspots is via pixel location, which gets out of synch s teh image grows or shrinks.

Here is my code:

views.pt

<body>
    <img src='{% static 'images/ISO_Map.png' %}' alt='Workplace' class= 'center' usemap='#ISO'>
    <map name = 'ISO'>
        <area shape='circle' coords='935,460, 50' alt='ISO22301/introduction' href='ISO22301/introduction.html'>
    </map>    
</body>

css


  img {
    display: block;
    width: 50vw;
    margin-left: auto;
    margin-right: auto;
  }
2

There’s nothing Django-specific about this. There are several possible solutions here html - Responsive image map - Stack Overflow

I’m interested to try them out but won’t have a chance for a while, so I hope the link is useful.

3

Thanks. I’ve been looking some solutions but have come to the conclusion an svg based approach may be better. I can overlay transparent SVGs on the png image where needed with the added benefit of more shape flexibility.

This worked although you have to put the tag in the template, not the svg file

<svg width="1000" height="956" viewBox="0 0 1000 956" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <a href='ISO22301/introduction.html'>
    <path id="Oval" fill="#027aff" fill-rule="evenodd" stroke="none" d="M 983 459.5 C 983 432.714172 961.285828 411 934.5 411 C 907.714172 411 886 432.714172 886 459.5 C 886 486.285797 907.714172 508 934.5 508 C 961.285828 508 983 486.285797 983 459.5 Z"/>
    </a>
</svg>

except now the graphic doesn’t resize with the window.
4

Well. I resized the image so that it looks good on a 13"" screen and flexbox resizes it a bit, especially horizontally. I still haven’t figured out how to get a full resize as I make the screen smaller.

I tried which resizes like I want but I can’t get teh tags to work within the tag

Interestingly, fill = “None” doesn’t keep the link but any color with opacity set to “0” does; and does not obscure he underlying graphic.