Image map area responsive

**Elliot31** · 24/10/2016, 09h48

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 !

**NoSmoking** · 27/10/2016, 18h13

Bonjour,

...vous pouvez voir que les liens sont décallés.

peu être as tu réglé ton soucis car je n'observe pas de décalage même en redimensionnant le navigateur.

Nota : En observant la console on peut voir apparaître 2 erreurs

TypeError: $(...).rwdImageMaps is not a function
TypeError: originalSnowflake is null

Image map area responsive

Conception Web

Discussions similaires

Partager

Partager