Responsive image mapping

Question

Responsive image mapping

Navigation

#1 by (1 votes)

1

I made the image mapping as in the example below, but it does not work for mobile devices, it is totally unconfigured, what is 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>

responsivo

asked by anonymous 29.12.2017 / 01:19

1 answer

Bootstrap Modal integer and centered on the page How to import non-angular Javascript?

score 1 · Accepted Answer

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

How does it work?

Do not put the width or height attributes in the image. Do this for CSS with responsive image:

img{
    width: 100%;
}

Download the plugin (code below) and call:

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

See it working:

The right half of the image is LINK1, and the one on the left 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><imgsrc="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>