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écallés.

Voici le code de ma page d'accueil :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
 
    <head>
 
        <!-- Meta -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keyword" content="" />
 
        <meta property="og:title" content=""/>
        <meta property="og:description" content="" />
        <meta property="og:type" content="article" />
        <meta property="og:image" content="" />
        <meta property="og:site_name" content="" />
        <meta property="og:url" content="" />
 
    </head>
 
    <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>
</html>

Merci d'avance pour votre aide !