How to make an image mapping responsive?

Asked

Viewed 138 times

-1

<img id="Imag" usemap="#Calculadora" width="100%" height="auto" src="Calculadora.png">
            <map name="Calculadora">
                <area class="mapa" onclick="teste()" coords="252,953,647,1379" shape="rect">
                <area class="mapa" onclick="teste()" coords="746,952,1141,1375" shape="rect">
                <area class="mapa" onclick="teste()" coords="1258,954,1644,1377" shape="rect">
                <area class="mapa" onclick="teste()" coords="1752,941" shape="rect">
                <area class="mapa" onclick="teste()" coords="252,1469,638,1883" shape="rect">
                <area class="mapa" onclick="teste()" coords="746,1465,1132,1879" shape="rect">
                <area class="mapa" onclick="teste()" coords="1258,1465,1644,1879" shape="rect">
                <area class="mapa" onclick="teste()" coords="2156,745,2381,988" shape="rect">
                <area class="mapa" onclick="teste()" coords="1752,1469,2138,1883" shape="rect">
                <area class="mapa" onclick="teste()" coords="252,1976,638,2390" shape="rect">
                <area class="mapa" onclick="teste()" coords="746,1980,1132,2394" shape="rect">
                <area class="mapa" onclick="teste()" coords="1258,1976,1644,2390" shape="rect">
                <area class="mapa" onclick="teste()" coords="1752,1982,2138,2396" shape="rect">
                <area class="mapa" onclick="teste()" coords="252,2482,638,2896" shape="rect">
                <area class="mapa" onclick="teste()" coords="746,2484,1132,2898" shape="rect">
                <area class="mapa" onclick="teste()" coords="1258,2486,1644,2900" shape="rect">
                <area class="mapa" onclick="teste()" coords="1752,2484,2138,2898" shape="rect">
            </map>

How can I make this image’s Mapping responsive to the image? Because the way the code is written, the mapping is entirely wrong depending on the display/screen resolution.

Image I am using: https://imgur.com/a/5c5Y0WG

NOTE: I tried using percentage instead of pixels, but it didn’t work.

Example: The following image has 500px of width and height, the coordinates of the square in the center is: 159,159,342,342. Using percentage stayed: 31.80%,31.80%,68.40%,68.40%(To define the value of the first percentages I made a rule of three, 500 was to 159, as 100% was to x)

inserir a descrição da imagem aqui

And by doing so, it didn’t work.

The code of this example was thus:

<img id="Imag" usemap="#Calculadora" width="100%" src="AAAA.jpg">
   <map name="Calculadora">
      <area class="mapa" coords="31.80%,31.80%,68.40%,68.40%" shape="rect">
   </map>

Note: If in the example above I do: coords="159%,159%,342%,342%" works, but does not get responsive, if the image has its change, the link gets in the wrong place.

html image maps

  • Tip https://www.zaneray.com/responsive-image-map/

  • @hugocsl tried to use this site, but I didn’t understand where to put the code that he made available to me.

1 answer

0


FOIIII!

To make a responsive image mapping, I used javascript. It had the function of picking up the image (I used "Document.getElementById('Image id').width") and according to the proportion I gave in percentage, calculate which would be the right string for mapping.

Example:

#Mapa
{
  cursor: pointer;
}
<body>
    <div>
        <img id="Imag" usemap="#QuadradoMap" width="100%" src="Imagem.jpg">
            <map id="Mapa" name='QuadradoMap'>
            </map>
        <script>
      //Aquisição da resolução da imagem
            var largura = document.getElementById('Imag').width;
            var altura = document.getElementById('Imag').height;
      
      //Definição das coordenadas utilizando as devidas proporções
            var cord1 = largura*0.318;
            var cord2 = largura*0.318;
            var cord3 = altura*0.684;
            var cord4 = altura*0.684;
      
      //Junção das coordenadas
            var cordg = "" + cord1 + "," + cord2 + "," + cord3 + "," + cord4 + ""; 

      
      //Criação do elemento area
            var Area = document.createElement("area");

      //Criação dos atributos do elemento area
            var Forma = document.createAttribute("shape");
            Forma.value = "rect";
            var Cord = document.createAttribute("coords");
            Cord.value = cordg ;
            var Classe = document.createAttribute("class");
            Classe.value = "mapa";

      //Atribuição dos atributos
            Area.setAttributeNode(Forma);
            Area.setAttributeNode(Cord);
            Area.setAttributeNode(Classe);
      
      //Adição do elemento area ao elemento Mapa
            document.getElementById("Mapa").appendChild(Area);
        </script>
    </div>
</body>

The original size of the "Image.jpg" was 500x500 and the original Mapping was 159,159,342,342. Using a rule of 3, I discovered the percentage of each coordinate according to the total(500), thus I discovered the proportion of the image to the coordinates(In this example: 31.8% and 68.4%).

It’s gonna take a lot of work to scale up that code, but it’s the only answer I could find.

Browser other questions tagged html image maps

You are not signed in. Login or sign up in order to post.