Responsive image mapping

Question

I mapped the image as in the example below, but it does not work for mobile devices, it is totally disfigured, what the solution?

<img src="CAMINHO DA IMAGEM_01" alt="TEXTO ALTERNATIVO DA IMAGEM" usemap="#map01" />
<map name="map01" id="map01">
        <area shape="FORMA DO MAPA" coords="CORDENADAS" href="LINK" alt="TEXTO ALTERNATIVO" title="TITULO DO SEULINK" />
        <area shape="FORMA DO MAPA" coords="CORDENADAS" href="LINK" alt="TEXTO ALTERNATIVO" title="TITULO DO SEULINK" />
</map>

Answer 1

You can use the plugin Responsive Image Maps jQuery Plugin by Matt Stow (jQuery required).

How it works?

Do not enter attributes width or height image. Do this for CSS with responsive image:

img{
    width: 100%;
}

Load the plugin (code below) and call:

$('img[usemap]').rwdImageMaps();

See working:

The right half of the image is LINK1, and the left half is LINK2.

/*
* rwdImageMaps jQuery plugin v1.6
*
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2016 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").on('load',function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);
$('img[usemap]').rwdImageMaps();

img{
   width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="TEXTO ALTERNATIVO DA IMAGEM" usemap="#map01" />
<map name="map01" id="map01">
   <area shape="rect" coords="0,0,315,354" href="LINK1" alt="TEXTO ALTERNATIVO1" title="TITULO DO SEULINK1" />
   <area shape="rect" coords="316,0,630,354" href="LINK2" alt="TEXTO ALTERNATIVO1" title="TITULO DO SEULINK2" />
</map>