1485 sujets

Web Mobile et responsive web design

Responsive map area

Bonjour à tous,

Je vous écris ce message puisque je rencontre un souci depuis plusieurs jours lors du développement d'un site.
J'ai une image qui est une carte avec des villes dessus, et j'y ai mis des coordonnées (grâce à un générateur) qui redirigent vers un lien différents pour chaque ville. J'ai alors décidé d'utiliser un plugin pour rendre cette map area responsive.
Ce plugin est celui-la :

https://github.com/stowball/jQuery-rwdImageMaps

Or, il marche uniquement lors des test sur MAMP. Une fois en ligne à cette adresse , vous pouvez voir que les liens sont décalés.

Voici le code de ma page d'accueil :


<body id="home">
  
            <!--<div id="snowflakeContainer">
                <p class="snowflake">*</p>
            </div>-->
  
  
            <div id="headerhome" class="">
                <img class="logoaccueil" src="images/logonoel.png">
            </div>
  
            <div class="divmap">
                <img class="map" src="images/Carte.png" alt="" usemap="#homemap" />
                <map name="homemap">
                    <a href="Montpellier/"><area shape="poly" coords="560, 719, 560, 695, 574, 687, 588, 669, 597, 659, 615, 686, 629, 699, 633, 720, 607, 724, 585, 724" /></a>
                    <a href="Montpellier/"><area shape="rect" coords="816, 800, 951, 832" /></a>
                    <a href="Marseille/"><area shape="poly" coords="705, 713, 706, 682, 689, 669, 671, 633, 664, 655, 648, 680, 636, 684, 636, 713, 661, 717, 684, 715" /></a>
                    <a href="Marseille/"><area shape="rect" coords="676, 799, 788, 832" /></a>
                    <a href="Nimes/"><area shape="poly" coords="590, 653, 590, 645, 604, 638, 615, 623, 625, 596, 636, 620, 647, 639, 661, 647, 660, 660, 647, 672, 609, 672, 601, 651" /></a>
                    <a href="Nimes/"><area shape="rect" coords="812, 765, 894, 796" /></a>
                    <a href="Lyon/"><area shape="poly" coords="658, 524, 659, 503, 676, 489, 688, 467, 694, 451, 706, 476, 719, 495, 731, 505, 731, 527, 697, 532, 673, 529" /></a>
                    <a href="Lyon/"><area shape="rect" coords="729, 767, 792, 797" /></a>
                    <a href="Angouleme/"><area shape="poly" coords="470, 596, 470, 573, 452, 557, 445, 541, 435, 520, 426, 541, 414, 559, 401, 572, 402, 588, 412, 596, 437, 599" /></a>
                    <a href="Angouleme/"><area shape="rect" coords="182, 518, 318, 553" /></a>
                    <a href="Bordeaux/"><area shape="poly" coords="359, 647, 359, 625, 372, 617, 382, 601, 394, 576, 405, 600, 422, 619, 430, 625, 431, 649, 405, 651, 380, 651" /></a>
                    <a href="Bordeaux/"><area shape="rect" coords="40, 521, 159, 549" /></a>
                    <a href="Metz/"><area shape="poly" coords="778, 333, 778, 312, 762, 299, 749, 277, 741, 261, 735, 279, 725, 296, 714, 306, 725, 313, 738, 337" /></a>
                    <a href="Metz/"><area shape="rect" coords="910, 145, 972, 177" /></a>
                    <a href="Reims/"><area shape="poly" coords="642, 336, 644, 315, 658, 304, 677, 268, 709, 313, 706, 332, 696, 337" /></a>
                    <a href="Reims/"><area shape="rect" coords="805, 146, 881, 178" /></a>
                    <a href="Nancy/"><area shape="poly" coords="684, 380, 685, 357, 704, 344, 719, 312, 733, 339, 754, 361, 754, 381, 720, 385, 704, 385" /></a>
                    <a href="Nancy/"><area shape="rect" coords="688, 148, 770, 176" /></a>
                    <a href="Maubeuge/"><area shape="poly" coords="635, 271, 636, 251, 646, 243, 658, 230, 672, 206, 685, 230, 707, 251, 707, 273, 686, 274, 676, 260, 668, 276" /></a>
                    <a href="Maubeuge/"><area shape="rect" coords="848, 112, 969, 141" /></a>
                    <a href="Compiegne/"><area shape="poly" coords="578, 322, 579, 301, 590, 291, 605, 271, 613, 251, 628, 280, 648, 299, 647, 308, 636, 322, 602, 324" /></a>
                    <a href="Compiegne/"><area shape="rect" coords="691, 111, 820, 142" /></a>
                    <a href="Beauvais/"><area shape="poly" coords="514, 320, 513, 297, 530, 285, 537, 276, 549, 253, 566, 282, 581, 296, 574, 301, 575, 321, 550, 324" /></a>
                    <a href="Beauvais/"><area shape="rect" coords="846, 80, 956, 108" /></a>
                    <a href="Amiens/"><area shape="poly" coords="498, 256, 497, 233, 512, 222, 524, 205, 534, 181, 544, 211, 555, 223, 569, 235, 571, 259, 556, 259, 549, 244, 541, 259" /></a>
                    <a href="Amiens/"><area shape="rect" coords="727, 78, 819, 104" /></a>
                    <a href="Villeneuve/"><area shape="poly" coords="569, 216, 568, 193, 585, 181, 596, 164, 605, 146, 617, 171, 641, 198, 642, 220, 609, 223, 591, 223" /></a>
                    <a href="Villeneuve/"><area shape="rect" coords="729, 43, 940, 76" /></a>
                    <a href="Nantes/"><area shape="poly" coords="345, 475, 347, 455, 360, 445, 371, 425, 381, 401, 390, 426, 409, 450, 392, 477, 373, 477" /></a>
                    <a href="Nantes/"><area shape="rect" coords="228, 184, 312, 212" /></a>
                    <a href="StNazaire/"><area shape="poly" coords="283, 457, 284, 435, 298, 424, 310, 405, 318, 384, 329, 408, 342, 428, 352, 436, 354, 445, 342, 453, 342, 461, 315, 462" /></a>
                    <a href="StNazaire/"><area shape="rect" coords="74, 180, 198, 209" /></a>
                    <a href="LeHavre/"><area shape="poly" coords="394, 284, 395, 264, 413, 250, 420, 235, 429, 216, 445, 244, 466, 264, 464, 270, 451, 286, 424, 287" /></a>
                    <a href="LeHavre/"><area shape="rect" coords="225, 148, 332, 178" /></a>
                    <a href="Rouen/"><area shape="poly" coords="426, 345, 426, 322, 441, 311, 450, 296, 463, 276, 474, 301, 487, 315, 497, 324, 498, 347, 461, 351" /></a>
                    <a href="Rouen/"><area shape="rect" coords="123, 148, 198, 177" /></a>
                    <a href="Chantonnay/"><area shape="poly" coords="383, 507, 383, 487, 398, 479, 408, 463, 418, 435, 432, 463, 442, 477, 456, 487, 456, 509, 430, 513, 406, 512" /></a>
                    <a href="Chantonnay/"><area shape="rect" coords="141, 115, 283, 146" /></a>
                </map>
            </div>
  
            <div class="clear"></div>
  
            <div class="home480px">
                <h2>Choisissez votre ville</h2>
  
                <ul>
                   <li><a href="Reims/">Reims</a> <img src="images/etoilerose.png"> <a href="Rouen/">Rouen</a></li>
                   <li><a href="Nantes/">Nantes</a> <img src="images/etoilerose.png"> <a href="Mets/">Metz</a></li>
                   <li><a href="Nancy/">Nancy</a> <img src="images/etoilerose.png"> <a href="Nimes/">Nimes</a></li>
                   <li><a href="Marseille/">Marseille</a> <img src="images/etoilerose.png"> <a href="Bordeaux/">Bordeaux</a></li>
                   <li><a href="Montpellier/">Montpellier</a> <img src="images/etoilerose.png"> <a href="Nimes/">Nimes</a></li>
                   <li><a href="Amiens/">Amiens</a> <img src="images/etoilerose.png"> <a href="Nancy/">Nancy</a></li>
                   <li><a href="Compiegne/">Compiègne</a> <img src="images/etoilerose.png"> <a href="LeHavre/">Le Havre</a></li>
                   <li><a href="StNazaire/">St-Nazaire</a> <img src="images/etoilerose.png"> <a href="Chantonnay/">Chantonnay</a></li>
                   <li><a href="Beauvais/">Beauvais</a> <img src="images/etoilerose.png"> <a href="Maubeuge/">Maubeuge</a></li>
                   <li><a href="Lyon/">Lyon</a> <img src="images/etoilerose.png"> <a href="Angouleme/">Angoulême</a></li>
                   <li><a href="Villeneuve/">Villeneuve d'Ascq</a></li>
                </ul>
  
            </div>
  
        <script src="js/fallingsnow_v6.js"></script>
        <script src="js/jquery.rwdImageMaps.min.js"></script>
        <script src="js/jquery.rwdImageMaps.js"></script>
        <script>
              $(document).ready(function(e) {
                    $('img[usemap]').rwdImageMaps();
              });
        </script>
  
    </body>


Merci d'avance pour votre aide !
Modifié par Zop (24 Oct 2016 - 10:38)
Administrateur
Bonjour,

Sans avoir regardé ta page :

as-tu essayé cet autre plugin puisque celui que tu utilises n'est plus maintenu ? http://stackoverflow.com/questions/7844399/responsive-image-map
Sinon je confirme tout ce que raconte la réponse sur SO : les % sont dans la spec mais pas dans les navigateurs.

EDIT : après avoir regardé ton code :

il ne devrait pas y avoir d'élément A dans une zone réactive. C'est directement area Smiley href dans map :
<map name="unevaleur">
  <area href="autre-page.html" shape="circle" coords="100, 100, 50">
  <area href="#ancre" shape="circle" coords="200, 100, 50">
</map>

Exemple dans la doc HTML5
Ah ben non, la doc de l'élément MAP a un exemple où il contient un paragraphe et des A. M'enfin le plugin a peut-être pas été prévu pour gérer ce cas Smiley smile (resterait à trouver pourquoi ça fonctionne en localhost et pas en ligne)
EDIT2: le plugin que tu utilises cherche les éléments AREA d'une manière assez souple, ça devrait pas être ça la cause... M'enfin mieux vaut faire au plus simple)

localhost / en ligne > avec quel(s) navigateur(s) testes-tu ?
Ils ont des restrictions sur le JavaScript exécuté en local. C'est configurable mais chacun a ses réglages par défaut...
Modifié par Felipe (24 Oct 2016 - 12:24)
Bonjour et avant tout merci de ton aide.

J'ai essayé en enlevant les <a> mais c'est le même résultat.

Pour le navigateur je teste tout sous Chrome. Je n'ai rien touché quant aux réglages pour le JS.

Le plugin que tu m'as passé je viens de le tester, et exactement le même résultat que le 1er...

Peut être un souci avec la version de JQuery ? Smiley ohwell
Administrateur
Ah oui, bonne piste : tester avec la version utilisée par la démo du plugin.
Penser à vérifier que le plugin en démo est la même version que celle récupérée sur GitHub, des fois c'est pas à jour du tout, donne une certaine impression alors qu'en fait...

Mais tu dis que ça fonctionne en localhost ? C'est quand même assez étonnant (l'inverse ne le serait pas)
Administrateur
Après avoir fait un tour dans la Console, il y a des erreurs :
- ton site est en https tandis que jQuery est chargé depuis Google en http. Il y a une astuce pour charger jQuery depuis Google "avec le même protocole que ton site" mais je te conseille plutôt de récupérer jquery.min.js et de le faire charger depuis ton serveur.
- la version 1.0.2 est ultra-vieille, c'est pour tester ? Il faudrait 1.11 ou .12, enfin la dernière 1.x et si ça fonctionne alors 2.x. Si 1.12 ne fonctionne pas, tenter avec 1.9, 1.8 et 1.6 finalement... Des choses ont été dépréciées au fur et à mesure des versions.
J'ai testé bien des versions de JQuery, même en téléchargeant le .min et ça ne change rien...

Et oui cela fonctionne parfaitement en localhost via MAMP. Vraiment bizarre.
J'ai aussi essayé ce plugin et il ne marche ni en local ni en ligne.
Et je dis juste qu'il ne marche pas pour moi, je dois faire une erreur lors de la mise en place...
Sujet clos
Aller à