How to change the image in percentage (reduction depending on the size of the window), but in such a way that the points (map area) do not slide from the given places?

Question

HTML

Good afternoon. Please tell me a way to change the image as a percentage (decrease depending on the size of the window), but in such a way that the points (map area) do not slide from the specified places.
If you specify the size only for the image, then the image changes, but the points remain in their old places.
Thank you.

Answer 1

mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

Answer 2

for image style="width:100%;height:auto"
Or you can look here jsfiddle.net/jamietre/jQG48/

Answer 3

mattstow.com/experiment/responsive-image-maps/jque...
copy and paste this script after including jquery

$(document).ready(function(e) {
  $('img[usemap]').rwdImageMaps();
  
  $('area').on('click', function() {
    alert($(this).attr('alt') + ' clicked');
  });
});

Add this script after the connected first script.

Answer 4

instead of the plug-in, I completed it a little. Should work fine.

the code

;(function($) {
        $.fn.rwdImageMaps = function() {
                var $img = this;
                
                var rwdImageMap = function() {
                        $img.each(function() {
                                if (typeof($(this).attr('usemap')) == 'undefined')
                                        return;
                                
                                var that = this,
                                        $that = $(that);
                                
                                // Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
                                $('<img />').load(function() {
                                        var attrW = 'width',
                                                attrH = 'height',
                                                w = $that.attr(attrW),
                                                h = $that.attr(attrH);
                                        
                                        if (!w || !h) {
                                                var temp = new Image();
                                                temp.src = $that.attr('src');
                                                if (!w)
                                                        w = parseInt(temp.width);
                                                if (!h)
                                                        h = parseInt(temp.height);
                                        }
                                        
                                        var wPercent = parseInt(parseInt($that.width())/100),
                                                hPercent = parseInt(parseInt($that.height())/100),
                                                map = $that.attr('usemap').replace('#', ''),
                                                c = 'coords';
                                        
                                        $('map[name="' + map + '"]').find('area').each(function() {
                                                var $this = $(this);
                                                if (!$this.data(c))
                                                        $this.data(c, $this.attr(c));
                                                
                                                var coords = $this.data(c).split(','),
                                                        coordsPercent = new Array(coords.length);
                                                
                                                for (var i = 0; i < coordsPercent.length; ++i) {
                                                        if (i % 2 === 0) {
                                coord = parseInt(coords[i]);
                                w = parseInt(w);
                                                                coordsPercent[i] = ((coord/w)*100)*wPercent;
                            }else{
                                coord = parseInt(coords[i]);
                                h = parseInt(h);
                                                                coordsPercent[i] = ((coord/h)*100)*hPercent;
                            }
                                                }
                                                $this.attr(c, coordsPercent.toString());
                                        });
                                }).attr('src', $that.attr('src'));
                        });
                };
                $(window).resize(rwdImageMap).trigger('resize');
                
                return this;
        };
})(jQuery);