Discussion :

[NoSmoking]

... parce que ton code est incomplet.

Non il est bel et bien complet !

Le code que j'ai récuperé est celui ci

tu omets de dire que tu as modifié le sélecteur sans savoir ce que tu faisais !
(voir ma réponse post #16 qui est passée visiblement inaperçue !)

Pour en revenir à ton approche, pourquoi faire simple quand on peut faire compliqué semble être ta devise.

Tout d'abord je tiens à te dire que « ergonomiquement » parlant ton approche est mauvaise car pour moi un « tooltip » doit apporter une information succincte et pertinente et que masquer les noms au départ c'est limite se foutre de la gueule de ton visiteur sauf si tu veux faire un quizz.
Une fois les noms affichés afficher le même texte au survol là c'est presque les prendre pour des c..., excuse moi d'être un peu cru sur ce coup mais je considère que tes « tooltip » ne servent à rien sur ce coup sauf à alourdir ton code et à te faire perdre du temps que tu pourrais passer à essayer de comprendre ce que tu fais !

Ceci étant une solution plus propre est de faire apparaitre tes « tooltip » au survol de tes liens contenus dans tes balises <g> en y reportant tes titres, par exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<g>
    <a title="Balsac" id="region-01" xlink: href="Aveyron/balsac.html" target="myframe" data-img="img1" data-txt=" Balsac">
        <path id="01" d="M438.5,540.8 346.2,567.5 322.1,535.6 312.6,507.4 351.8,437.5 348.7,427.9 375.1,438.1 389.3,432.3 413.9,474.4 443.9,504 455.7,518.3 " />
        <text transform="matrix(1 0 0 1 356 508)">
            <tspan x="0" y="0" class="texte">Balsac</tspan>
        </text>
    </a>
</g>

le sélecteur devient un simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var group = $('g a');
// puis
group.each(function(id, obj) {
// la suite de ton code

A l'avenir, pense simple pour faire simple et surtout pose toi la question de ce que tu veux vraiment avoir comme rendu final, dans ton cas il te faut avoir une vue d'ensemble de ton projet et ne pas ajouter des morceaux de code un peu partout suivant ton humeur.

[psychadelic]

Le code que j'ai récuperé est celui ci

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
//...
        that   = $("<div class='svgtip'>" + tt + "</div>");
//...
 
      that.slideDown(100);
    }, function() {
      that.slideUp(100);
//..

ligne 11: that = $("<div class='svgtip'>" + tt + "</div>"); .

Cette classe (svgtip) a forcément une description CSS, sinon les slideUp et SlideDown ne fonctionneront pas correctement.

Non il est bel et bien complet !

ben non, et c'est la raison pour laquelle j'ai écris précédemment :

et ou est passée la classe css svgtip ?

[NoSmoking]

Cette classe (svgtip) a forcément une description CSS, sinon les slideUp et SlideDown ne fonctionneront pas correctement.

Non, que la classe soit définie ou non dans le document ne changera rien au fonctionnement des méthodes slideUp/Down, elle ne contiendra quoiqu'il arrive que du cosmétique.

Les éléments apparaissent bien en s'ouvrant par le haut et en se refermant à l'inverse, pour t'en convaincre fait le test en augmentant simplement le délai en paramètre.

@apdf1 : cela me rappelles que tu nous avais déjà laissé tomber dans cette discussion : https://www.developpez.net/forums/d1...-carte-france/ ( là je taquines ...)

[psychadelic]

Je n'ai écrit nulle part que cela empêchait le fonctionnement de son "toolTip". Mais cela ne permet pas de le qualifier de complet.
Ou alors on n'a pas la même définition du mot "complet" ?

[apdf1]

Bonjour,
Bon…. Je vois que ce que je fais n'est pas bon, vue les remarques.
NoSmoking Je ne suis pas informaticien je suis seulement un homme de 70 balais clouer dans un fauteuil et essaye de passer son temps comme il peut.
Alors je vais arrêter là sa seras plus simple.
Je vous remercie tous et je vous souhaite bonne continuation.
Max

[NoSmoking]

Bon…. Je vois que ce que je fais n'est pas bon, vue les remarques.

Non je dis que pour moi c'est « ergonomiquement » pas terrible mais cela ne t'empêches pas de vouloir le faire.

Faire et/ou essayer de faire c'est toujours apprendre !

Revenons quand même à ton projet.

• Met en place une structure de ce type, correction par rapport à ma dernière proposition qui était sur l'élément <a>, autant le mettre sur les éléments <g>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<g data-description="Balsac<br>15,57 km²<br>617 habitants">
  <a id="region-01" xlink:href="Aveyron/balsac.html" target="myframe" data-img="img1" data-txt=" Balsac">
    <path id="path-01" d="M438.5,540.8 346.2,567.5 322.1,535.6 312.6,507.4 351.8,437.5 348.7,427.9 375.1,438.1 389.3,432.3 413.9,474.4 443.9,504 455.7,518.3 " />
    <text transform="matrix(1 0 0 1 356 508)">
      <tspan x="0" y="0" class="texte">Balsac</tspan>
    </text>
  </a>
</g>

on met une data-description sur l'élément et c'est ce qui sera affiché dans la « tooltip », du code HTML est possible.

• Ta fonction svgTip est à modifier pour prendre en compte ce nouveau sélecteur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('g[data-description]').each(function(id, obj) {
  var tt = $(this).data("description"),
    that = $("<div class='svgtip'>" + tt + "</div>");

voilà qui est bien plus simple !

• Concernant la partie cosmétique, mais pas que, de la « tooltip » il y aurait plusieurs façons de procéder, tout mettre dans la classe affectée à l'élément, tout mettre dans la fonction ou faire un mixte le cosmétique dans la classe et l'indispensable dans la fonction.
Je te laisse le choix à toi de voir ce qui te sera le plus facile à maintenir ou à personnaliser.

Je te mets l'exemple de ce à quoi cela pourrait ressembler

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title> svg over </title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
body{
  background:#000;
}
svg.map__image {
  position: absolute;
    top: 90px;
    left: 20px;
  border    : 1px solid red;/*Cadre*/
  width     : 940px;
  height    : 640px;
  margin    : 0px;
}
svg.map__image path {
  fill          : #19191f;
  stroke        : #cc4646;
  stroke-width  : 0.5;
  transition    : fill 0.1s;
}
svg.map__image g:hover path {
  fill   : #0000FF;
  stroke : #cc4646;
}
svg.map__image text {
  fill      : #e8e809;
  font-size : 12px;/*taille sans hover*/
}
svg.map__image g:hover text {
  fill        : #fdfefe;
  font-weight : bold;
  font-size   : 15px;  /*taille avec hover*/
  font-style  : italic;
}
/*Pas de nom sur la carte*/
.texte {
  /*visibility: hidden;/* SUPPRIME */
}
/* Fin de Carte */
 
/* Bouton afficher/masquer le texte sur la carte*/
.bt_afficher {
  margin-top: 55px;
  margin-left: 10px;
  padding-left: -100px;
}
.bt_texte:hover {
  font-size: 18px;
  color: #1af508;
}
.bt_texte {
  margin-left: 10px;
  color: #e8e809;
  cursor: pointer;
}
/* Fin Bouton afficher/masquer le texte sur la carte*/
 
/*=======================*/
/* style pour la tooltip */
/*=======================*/
.svgtip {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1em;
  border: 1px solid red;
  font-size: 1em;
  color: #000;
  background-color: rgba(255,255,255,.8);
  pointer-events: none;
}
</style>
</head>
<body>
  <!--   Afficher ou maquer le texte sur la Carte   -->
  <table class="bt_afficher">
    <tr>
      <td> <span class="bt_texte" id="bouton_texte">Masquer le texte</span></td>
    </tr>
  </table>
  <!-- Fin Afficher et masquer nom sur la carte -->
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 50 660 660" class="map__image">
    <g data-description="Balsac<br>15,57 km²<br>617 habitants">
      <a id="region-01" xlink:href="Aveyron/balsac.html" target="myframe" data-img="img1" data-txt=" Balsac">
        <path id="path-01" d="M438.5,540.8 346.2,567.5 322.1,535.6 312.6,507.4 351.8,437.5 348.7,427.9 375.1,438.1 389.3,432.3 413.9,474.4 443.9,504 455.7,518.3 " />
        <text transform="matrix(1 0 0 1 356 508)">
          <tspan x="0" y="0" class="texte">Balsac</tspan>
        </text>
      </a>
    </g>
    <g data-description="Clairvaux D'Aveyron">
      <a id="region-02" xlink:href="Aveyron/clairvaux_d_aveyron.html" target="myframe" data-img="img2" data-txt=" Clairvaux D'Aveyron">
        <path id="path-02" d="M268.5,594.3 251.3,613.7 237.2,601.2 227.5,603.7 224.6,574.8 243.5,508 202,495.7 175.2,452.7 157.2,464.3 149.8,455.7 261.4,417.6 285.7,386.2 348.7,427.9 351.8,437.5 312.6,507.4 322.1,535.6 302,541.4 271.2,566.5 " />
        <text transform="matrix(1 0 0 1 196 464)">
          <tspan x="0" y="0" class="texte">Clairvaux D'Aveyron</tspan>
        </text>
      </a>
    </g>
    <g data-description="Druelle">
      <a id="region-03" xlink:href="Aveyron/druelle.html" target="myframe" data-img="img3" data-txt=" Druelle">
        <path id="path-03" d="M472.3,707 437.3,696.3 435.5,686.3 394,672.4 386.6,643.8 363.8,644.9 328.8,621.5 307.9,629.6 268.5,594.3 271.2,566.5 302,541.4 322.1,535.6 346.2,567.5 438.5,540.8 418.3,563.9 418,583.7 428.1,588.4 450.3,584.1 493.7,593.8 549.6,559.6 565.9,570.6 561.1,590.6 575.6,618.1 553.5,618.4 538.9,633.5 536.2,691.8 528.8,698.2 498.7,692.3 " />
        <text transform="matrix(1 0 0 1 383 610)">
          <tspan x="0" y="0" class="texte">Druelle</tspan>
        </text>
      </a>
    </g>
    <g data-description="Marcillac Vallon">
      <a id="region-04" xlink:href="Aveyron/marcillac_vallon.html" target="myframe" data-img="img4" data-txt=" Marcillac Vallon">
        <path id="path-04" d="M395.8,335.6 354.2,308.7 332.3,307.8 311.6,273.6 319.6,266.8 359.3,246 393.1,239.5 407,223.4 425.8,232.4 446.5,226.4 455.3,232 461.6,278.3 468.3,297.2 439.9,328.6 " />
        <text transform="matrix(1 0 0 1 343 284)">
          <tspan x="0" y="0" class="texte">Marcillac Vallon</tspan>
        </text>
      </a>
    </g>
    <g data-description="Mouret">
      <a id="region-05" xlink:href="Aveyron/mouret.html" target="myframe" data-img="img5" data-txt=" Mouret">
        <path id="path-05" d="M461.6,278.3 455.3,232 446.5,226.4 425.8,232.4 407,223.4 392.1,198.8 402.3,163.3 444.5,173.9 475.2,162 497.7,165.9 526.6,135 541.9,87.9 552.4,89.5 584.7,66.5 616.3,62.6 631,89.1 624.6,128 640.3,153.5 648.3,160.1 621.5,190.4 590.2,193.2 585.1,221.5 562.4,217.3 542.2,239.4 " />
        <text transform="matrix(1 0 0 1 496 199)">
          <tspan x="0" y="0" class="texte">Mouret</tspan>
        </text>
      </a>
    </g>
    <g data-description="Muret Le Chateau">
      <a id="region-06" xlink:href="Aveyron/muret_le_chateau.html" target="myframe" data-img="img6" data-txt=" Muret Le Chateau">
        <path id="path-06" d="M698.8,307.6 665.5,303.8 610,273.3 605,244.4 585.1,221.5 590.2,193.2 621.5,190.4 648.3,160.1 640.3,153.5 662.6,151.8 693.2,163.7 714,157.4 686.2,211.3 681.2,241 " />
        <text transform="matrix(1 0 0 1 611 221)">
          <tspan x="0" y="0" class="texte">Muret Le Chateau</tspan>
        </text>
      </a>
    </g>
    <g data-description="Nauviale">
      <a id="region-07" xlink:href="Aveyron/nauviale.html" target="myframe" data-img="img7" data-txt=" Nauviale">
        <path id="path-07" d="M319.6,266.8 314.8,247.5 237.2,192.7 232.4,164.7 253.8,142.8 271.9,98 360.6,109.4 381,118.6 392.8,157.6 402.3,163.3 392.1,198.8 407,223.4 393.1,239.5 359.3,246 " />
        <text transform="matrix(1 0 0 1 302 182)">
          <tspan x="0" y="0" class="texte">Nauviale</tspan>
        </text>
      </a>
    </g>
    <g data-description="Pruines">
      <a id="region-08" xlink:href="Aveyron/pruines.html" target="myframe" data-img="img8" data-txt=" Pruines">
        <path id="path-08" d="M541.9,87.9 526.6,135 497.7,165.9 475.2,162 444.5,173.9 402.3,163.3 392.8,157.6 381,118.6 360.6,109.4 393.5,60.4 401.3,59.8 531.2,75.5 541.9,78.1 " />
        <text transform="matrix(1 0 0 1 434 123)">
          <tspan x="0" y="0" class="texte">Pruines</tspan>
        </text>
      </a>
    </g>
    <g data-description="Saint Christophe Vallon">
      <a id="region-09" xlink:href="Aveyron/saint_christophe_vallon.html" target="myframe" data-img="img9" data-txt=" Saint Christophe Vallon">
        <path id="path-09" d="M276,361.7 223.5,345.4 199,325 176.8,328.1 196.2,303.7 193.1,283.8 128.5,227.9 127.2,209.8 135.7,204.2 159.6,222.3 184.5,206 221.7,214.8 237.2,192.7 314.8,247.5 319.6,266.8 311.6,273.6 332.3,307.8 291.3,311.2 297,339.7 " />
        <text transform="matrix(1 0 0 1 150 276)">
          <tspan x="0" y="0" class="texte">Saint Christophe Vallon</tspan>
        </text>
      </a>
    </g>
    <g data-description="Salles La Source">
      <a id="region-10" xlink:href="Aveyron/salles_la_source.html" target="myframe" data-img="img10" data-txt=" Salles La Source">
        <path id="path-10" d="M628.8,478.1 586.6,511.6 505.6,510.3 463.6,493 443.9,504 413.9,474.4 389.3,432.3 410.6,360.4 395.8,335.6 439.9,328.6 468.3,297.2 461.6,278.3 542.2,239.4 562.4,217.3 585.1,221.5 605,244.4 610,273.3 665.5,303.8 698.8,307.6 711.5,333.6 690.6,397 672.4,388.5 610.2,425.5 628.3,458.7 " />
        <text transform="matrix(1 0 0 1 501 359)">
          <tspan x="0" y="0" class="texte">Salles La Source</tspan>
        </text>
      </a>
    </g>
    <g data-description="Valady<br>15,51 km²<br>1 509 habitants">
      <a id="region-11" xlink:href="Aveyron/valady.html" target="myframe" data-img="img11" data-txt="Valady">
        <path id="path-11" d="M389.3,432.3 375.1,438.1 348.7,427.9 285.7,386.2 276,361.7 297,339.7 291.3,311.2 332.3,307.8 354.2,308.7 395.8,335.6 410.6,360.4 " />
        <text transform="matrix(1 0 0 1 326 367)">
          <tspan x="0" y="0" class="texte">Valady</tspan>
        </text>
      </a>
    </g>
  </svg>
 
<!--  Script bouton afficher/masquer texte sur la carte  -->
<script>
var oTexts = $("g text");
$("#bouton_texte").on("click",function(){
  var obj = $(this);
  if( obj.text() === "Masquer le texte"){
    obj.text("Afficher le texte");
    oTexts.hide();
  }
  else {
    obj.text("Masquer le texte");
    oTexts.show();
  }
});
</script>
 
<!-- /////////////////////////// tooltip sur la carte//////////////////////////////-->
<script>
function svgTip() {
  // style à appliquer si l'on ne passe pas par la classe  
  var opts = {
    "display": "none",
    "position": "absolute",
    "top": 0,
    "left": 0,
    "padding": "1em",
    "border": "1px solid red",
    "font-size": "1em",
    "color": "#000",
    "background-color": "rgba(255,255,255,.8)",
    "pointer-events": "none"
  };
 
$('g[data-description]').each(function(id, obj) {
  var tt = $(this).data("description"),
    that = $("<div class='svgtip'>" + tt + "</div>");
    
    // application du CSS
    that.css(opts);
 
    $(this).hover(function(event) {
      that.css({
        'left': event.clientX,
        'top': event.clientY + $(window).scrollTop()
      });
      that.addClass("active");
      that.slideDown(150);
    }, function() {
      that.slideUp(150);
      that.removeClass("active");
    });
    $(this).on("mousemove", function(event) {
      if (that.hasClass("active")) {
        that.css({
          'left': event.clientX,
          'top': event.clientY + $(window).scrollTop() - that.height()
        });
      }
    });
    $('body').append(that);
  });
};
new svgTip();
 
</script>
</body>
</html>

tu noteras que j'ai replacé le code, déjà donné, pour l'affichage/masquage des noms et que ceux-ci sont affichés par défaut à l'ouverture de la page.

A toi de jouer maintenant, tu arrêteras plus tard

[apdf1]

Salut NoSmoking

Excuse-moi je me suis un peut emporter à mon âge c’est pas évident.

Je viens de voir ton code, beaucoup plus noble.

Pour le tooltip comme tu l’as mis "Balsac<br>15,57 km²<br>617 habitants" je suis tout à fait d'accord avec toi.

Maintenant je rencontre un problème avec ton code puisque tu as tout changer ou presque !
J’ai la liste des régions que j’ai rajouter elle ne fonctionne plus normalement je m'explique lorsque tu passe sur le path tous se passe bien mais si tu passe sur le texte sa ne s'affiche pas dans la liste des régions si non nickel.
Pour ce qui concerne ceci :

• Concernant la partie cosmétique, mais pas que, de la « tooltip » il y aurait plusieurs façons de procéder, tout mettre dans la classe affectée à l'élément, tout mettre dans la fonction ou faire un mixte le cosmétique dans la classe et l'indispensable dans la fonction.
Je te laisse le choix à toi de voir ce qui te sera le plus facile à maintenir ou à personnaliser.

Je pense que le plus simple est de tout mettre dans la classe affectée à l'élément.

Je joint le code avec liste des régions:

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title> svg over </title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
body{
  background:#000;
}
svg.map__image {
  position: absolute;
    top: 90px;
    left: 20px;
  border    : 1px solid red;/*Cadre*/
  width     : 940px;
  height    : 640px;
  margin    : 0px;
}
svg.map__image path {
  fill          : #19191f;
  stroke        : #cc4646;
  stroke-width  : 0.5;
  transition    : fill 0.1s;
}
svg.map__image g:hover path {
  fill   : #0000FF;
  stroke : #cc4646;
}
svg.map__image text {
  fill      : #e8e809;
  font-size : 12px;/*taille sans hover*/
}
svg.map__image g:hover text {
  fill        : #fdfefe;
  font-weight : bold;
  font-size   : 15px;  /*taille avec hover*/
  font-style  : italic;
}
/*Pas de nom sur la carte*/
.texte {
  /*visibility: hidden;/* SUPPRIME */
}
/* Fin de Carte */
 
/* Bouton afficher/masquer le texte sur la carte*/
.bt_afficher {
  margin-top: 55px;
  margin-left: 10px;
  padding-left: -100px;
}
.bt_texte:hover {
  font-size: 18px;
  color: #1af508;
}
.bt_texte {
  margin-left: 10px;
  color: #e8e809;
  cursor: pointer;
}
/* Fin Bouton afficher/masquer le texte sur la carte*/
 
/*=======================*/
/* style pour la tooltip */
/*=======================*/
.svgtip {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1em;
  border: 1px solid red;
  font-size: 1em;
  color: #000;
  background-color: rgba(255,255,255,.8);
  pointer-events: none;
}
    
   /* Liste des régions*/      
    .map__image .is-active path {
      fill: #0000FF;
    }
    .map__image path:hover {
      fill: #0000FF;
      stroke: #0000FF;
    }
    .map__list {
      position: absolute;
      top: 820px;
      left: 210px; /* border-style: double;*/
      height: 90px; 
      width: 930px;
      list-style: none;  /*overflow-y: scroll;*/
    }
    .map__list ul, .map__list li{
      margin: 0;
      padding: 0;
      list-style: none;
      color: #f5eded;
    }
    .map__list a{ 
      font-size: 18px;   
      text-decoration: none;
      transition: 0.1s;
    }
    .map__list a.is-active {
      color: #c5f20b;
      background-color: #050505;font-weight: bold;
    }
    .map__list a {
      color: #09d7f2;
      text-decoration: none;
    }
    /* Fin Liste */
 
    /* Afficher le texte des régions en passant sur les noms des régions*/
    #ejs_texte{   
      position: absolute;
      top: 140px;
      left: 35px;
      font-size : 20pt;
      color : #d1f412;
      font-weight : bold;
      font-family : Brush Script MT, Brush Script Std, cursive;   
    }  
       
    /* Bouton la liste des régions*/
    #masquer_liste:hover {
      font-size: 17px;
      color: #1af508;
    }  
    #masquer_liste{  /* Afficher ou Masquer la liste*/
      position: absolute;
      top: 70px;
      left: 800px;
      color:#f2f210; 
      outline: 0;/*Supprimer l'encadrement bleu lors du clic*/
    }     
    /* Fin Bouton la liste des régions*/
    .bloc{
      display:block; 
      float:left; 
      width:205px;
      width:205px;
    }  
    .list_ul{ 
      display:block; 
      width:100px;
    } 
    #tadiv{
      position: absolute;
      top: 110px;
      left: 800px;
      display: block;
      height: 690px;
      width: 250px;
      overflow-y:auto;
    }      
    /* Fin Afficher le texte des régions en passant sur les noms des régions*/    
    
    
    
</style>
</head>
<body>
  <!--   Afficher ou maquer le texte sur la Carte   -->
  <table class="bt_afficher">
    <tr>
      <td> <span class="bt_texte" id="bouton_texte">Masquer le texte</span></td>
    </tr>
  </table>
 
   	<div class="map" id="map">
		<div class="map__image"> 
 
 
 
  <!-- Fin Afficher et masquer nom sur la carte -->
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="160 50 660 660" class="map__image">
 
    <g data-description="Balsac<br>15,57 km²<br>617 habitants">
      <a id="region-01" xlink:href="Aveyron/balsac.html" target="myframe" data-img="img1" data-txt=" Balsac">
        <path id="path-01" d="M438.5,540.8 346.2,567.5 322.1,535.6 312.6,507.4 351.8,437.5 348.7,427.9 375.1,438.1 389.3,432.3 413.9,474.4 443.9,504 455.7,518.3 " />
        <text transform="matrix(1 0 0 1 356 508)">
          <tspan x="0" y="0" class="texte">Balsac</tspan>
        </text>
      </a>
    </g>
    <g data-description="Clairvaux D'Aveyron">
      <a id="region-02" xlink:href="Aveyron/clairvaux_d_aveyron.html" target="myframe" data-img="img2" data-txt=" Clairvaux D'Aveyron">
        <path id="path-02" d="M268.5,594.3 251.3,613.7 237.2,601.2 227.5,603.7 224.6,574.8 243.5,508 202,495.7 175.2,452.7 157.2,464.3 149.8,455.7 261.4,417.6 285.7,386.2 348.7,427.9 351.8,437.5 312.6,507.4 322.1,535.6 302,541.4 271.2,566.5 " />
        <text transform="matrix(1 0 0 1 196 464)">
          <tspan x="0" y="0" class="texte">Clairvaux D'Aveyron</tspan>
        </text>
      </a>
    </g>
    <g data-description="Druelle">
      <a id="region-03" xlink:href="Aveyron/druelle.html" target="myframe" data-img="img3" data-txt=" Druelle">
        <path id="path-03" d="M472.3,707 437.3,696.3 435.5,686.3 394,672.4 386.6,643.8 363.8,644.9 328.8,621.5 307.9,629.6 268.5,594.3 271.2,566.5 302,541.4 322.1,535.6 346.2,567.5 438.5,540.8 418.3,563.9 418,583.7 428.1,588.4 450.3,584.1 493.7,593.8 549.6,559.6 565.9,570.6 561.1,590.6 575.6,618.1 553.5,618.4 538.9,633.5 536.2,691.8 528.8,698.2 498.7,692.3 " />
        <text transform="matrix(1 0 0 1 383 610)">
          <tspan x="0" y="0" class="texte">Druelle</tspan>
        </text>
      </a>
    </g>
    <g data-description="Marcillac Vallon">
      <a id="region-04" xlink:href="Aveyron/marcillac_vallon.html" target="myframe" data-img="img4" data-txt=" Marcillac Vallon">
        <path id="path-04" d="M395.8,335.6 354.2,308.7 332.3,307.8 311.6,273.6 319.6,266.8 359.3,246 393.1,239.5 407,223.4 425.8,232.4 446.5,226.4 455.3,232 461.6,278.3 468.3,297.2 439.9,328.6 " />
        <text transform="matrix(1 0 0 1 343 284)">
          <tspan x="0" y="0" class="texte">Marcillac Vallon</tspan>
        </text>
      </a>
    </g>
    <g data-description="Mouret">
      <a id="region-05" xlink:href="Aveyron/mouret.html" target="myframe" data-img="img5" data-txt=" Mouret">
        <path id="path-05" d="M461.6,278.3 455.3,232 446.5,226.4 425.8,232.4 407,223.4 392.1,198.8 402.3,163.3 444.5,173.9 475.2,162 497.7,165.9 526.6,135 541.9,87.9 552.4,89.5 584.7,66.5 616.3,62.6 631,89.1 624.6,128 640.3,153.5 648.3,160.1 621.5,190.4 590.2,193.2 585.1,221.5 562.4,217.3 542.2,239.4 " />
        <text transform="matrix(1 0 0 1 496 199)">
          <tspan x="0" y="0" class="texte">Mouret</tspan>
        </text>
      </a>
    </g>
    <g data-description="Muret Le Chateau">
      <a id="region-06" xlink:href="Aveyron/muret_le_chateau.html" target="myframe" data-img="img6" data-txt=" Muret Le Chateau">
        <path id="path-06" d="M698.8,307.6 665.5,303.8 610,273.3 605,244.4 585.1,221.5 590.2,193.2 621.5,190.4 648.3,160.1 640.3,153.5 662.6,151.8 693.2,163.7 714,157.4 686.2,211.3 681.2,241 " />
        <text transform="matrix(1 0 0 1 611 221)">
          <tspan x="0" y="0" class="texte">Muret Le Chateau</tspan>
        </text>
      </a>
    </g>
    <g data-description="Nauviale">
      <a id="region-07" xlink:href="Aveyron/nauviale.html" target="myframe" data-img="img7" data-txt=" Nauviale">
        <path id="path-07" d="M319.6,266.8 314.8,247.5 237.2,192.7 232.4,164.7 253.8,142.8 271.9,98 360.6,109.4 381,118.6 392.8,157.6 402.3,163.3 392.1,198.8 407,223.4 393.1,239.5 359.3,246 " />
        <text transform="matrix(1 0 0 1 302 182)">
          <tspan x="0" y="0" class="texte">Nauviale</tspan>
        </text>
      </a>
    </g>
    <g data-description="Pruines">
      <a id="region-08" xlink:href="Aveyron/pruines.html" target="myframe" data-img="img8" data-txt=" Pruines">
        <path id="path-08" d="M541.9,87.9 526.6,135 497.7,165.9 475.2,162 444.5,173.9 402.3,163.3 392.8,157.6 381,118.6 360.6,109.4 393.5,60.4 401.3,59.8 531.2,75.5 541.9,78.1 " />
        <text transform="matrix(1 0 0 1 434 123)">
          <tspan x="0" y="0" class="texte">Pruines</tspan>
        </text>
      </a>
    </g>
    <g data-description="Saint Christophe Vallon">
      <a id="region-09" xlink:href="Aveyron/saint_christophe_vallon.html" target="myframe" data-img="img9" data-txt=" Saint Christophe Vallon">
        <path id="path-09" d="M276,361.7 223.5,345.4 199,325 176.8,328.1 196.2,303.7 193.1,283.8 128.5,227.9 127.2,209.8 135.7,204.2 159.6,222.3 184.5,206 221.7,214.8 237.2,192.7 314.8,247.5 319.6,266.8 311.6,273.6 332.3,307.8 291.3,311.2 297,339.7 " />
        <text transform="matrix(1 0 0 1 150 276)">
          <tspan x="0" y="0" class="texte">Saint Christophe Vallon</tspan>
        </text>
      </a>
    </g>
    <g data-description="Salles La Source">
      <a id="region-10" xlink:href="Aveyron/salles_la_source.html" target="myframe" data-img="img10" data-txt=" Salles La Source">
        <path id="path-10" d="M628.8,478.1 586.6,511.6 505.6,510.3 463.6,493 443.9,504 413.9,474.4 389.3,432.3 410.6,360.4 395.8,335.6 439.9,328.6 468.3,297.2 461.6,278.3 542.2,239.4 562.4,217.3 585.1,221.5 605,244.4 610,273.3 665.5,303.8 698.8,307.6 711.5,333.6 690.6,397 672.4,388.5 610.2,425.5 628.3,458.7 " />
        <text transform="matrix(1 0 0 1 501 359)">
          <tspan x="0" y="0" class="texte">Salles La Source</tspan>
        </text>
      </a>
    </g>
    <g data-description="Valady<br>15,51 km²<br>1 509 habitants">
      <a id="region-11" xlink:href="Aveyron/valady.html" target="myframe" data-img="img11" data-txt="Valady">
        <path id="path-11" d="M389.3,432.3 375.1,438.1 348.7,427.9 285.7,386.2 276,361.7 297,339.7 291.3,311.2 332.3,307.8 354.2,308.7 395.8,335.6 410.6,360.4 " />
        <text transform="matrix(1 0 0 1 326 367)">
          <tspan x="0" y="0" class="texte">Valady</tspan>
        </text>
      </a>
    </g>
  </svg>
        </div>
 
   <!-- Afficher ou Masquer texte La liste des Régions-->
		<details close="close">
			<summary id="masquer_liste" style="cursor:pointer;">La liste des Régions</summary>
			<!-- Fin Afficher ou Masquer texte La liste des Régions-->
			<!-- Liste -->
			<div class="map__list" id="tadiv">
				<ul class="scrollbar3" id="style-3">
					<ul class="list_ul">
<li class="bloc"><a href="../Ariège*/balsa.html" target="myframe" data-img="img1"data-txt="Balsa" id="list-01">Balsa </a></li>
<li class="bloc"><a href="../Ariège*/clairvaux_d_aveyro.html" target="myframe" data-img="img2"data-txt="Clairvaux D'Aveyro" id="list-02">Clairvaux D'Aveyro </a></li>
<li class="bloc"><a href="../Ariège*/druell.html" target="myframe" data-img="img3"data-txt="Druell" id="list-03">Druell </a></li>
<li class="bloc"><a href="../Ariège*/marcillac_vallo.html" target="myframe" data-img="img4"data-txt="Marcillac Vallo" id="list-04">Marcillac Vallo </a></li>
<li class="bloc"><a href="../Ariège*/moure.html" target="myframe" data-img="img5"data-txt="Moure" id="list-05">Moure </a></li>
<li class="bloc"><a href="../Ariège*/muret_le_chatea.html" target="myframe" data-img="img6"data-txt="Muret Le Chatea" id="list-06">Muret Le Chatea </a></li>
<li class="bloc"><a href="../Ariège*/nauvial.html" target="myframe" data-img="img7"data-txt="Nauvial" id="list-07">Nauvial </a></li>
<li class="bloc"><a href="../Ariège*/pruine.html" target="myframe" data-img="img8"data-txt="Pruine" id="list-08">Pruine </a></li>
<li class="bloc"><a href="../Ariège*/saint_christophe_vallo.html" target="myframe" data-img="img9"data-txt="Saint Christophe Vallo" id="list-09">Saint Christophe Vallo </a></li>
<li class="bloc"><a href="../Ariège*/salles_la_sourc.html" target="myframe" data-img="img10"data-txt="Salles La Sourc" id="list-10">Salles La Sourc </a></li>
<li class="bloc"><a href="../Ariège*/valad.html" target="myframe" data-img="img11"data-txt="Valad" id="list-11">Valad </a></li>
 
					</ul>
				</ul>
			</div>
		</details>
		<div id="ejs_texte"></div>
		<!-- Fin Liste --> 
		<!-- Photos aux passage zone des cartes -->
<img class="img_info" src="photos/Balsa.jpg" class="img_ville" width="300" height="200" id="img1" style="display:none;">
<img class="img_info" src="photos/Clairvaux D'Aveyro.jpg" class="img_ville" width="300" height="200" id="img2" style="display:none;">
<img class="img_info" src="photos/Druell.jpg" class="img_ville" width="300" height="200" id="img3" style="display:none;">
<img class="img_info" src="photos/Marcillac Vallo.jpg" class="img_ville" width="300" height="200" id="img4" style="display:none;">
<img class="img_info" src="photos/Moure.jpg" class="img_ville" width="300" height="200" id="img5" style="display:none;">
<img class="img_info" src="photos/Muret Le Chatea.jpg" class="img_ville" width="300" height="200" id="img6" style="display:none;">
<img class="img_info" src="photos/Nauvial.jpg" class="img_ville" width="300" height="200" id="img7" style="display:none;">
<img class="img_info" src="photos/Pruine.jpg" class="img_ville" width="300" height="200" id="img8" style="display:none;">
<img class="img_info" src="photos/Saint Christophe Vallo.jpg" class="img_ville" width="300" height="200" id="img9" style="display:none;">
<img class="img_info" src="photos/Salles La Sourc.jpg" class="img_ville" width="300" height="200" id="img10" style="display:none;">
<img class="img_info" src="photos/Valad.jpg" class="img_ville" width="300" height="200" id="img11" style="display:none;">
 
</div>		<!-- Fin Photos aux passage zone des cartes -->    
 
 
 
<!--  Script bouton afficher/masquer texte sur la carte  -->
<script>
var oTexts = $("g text");
$("#bouton_texte").on("click",function(){
  var obj = $(this);
  if( obj.text() === "Masquer le texte"){
    obj.text("Afficher le texte");
    oTexts.hide();
  }
  else {
    obj.text("Masquer le texte");
    oTexts.show();
  }
});
</script>
 
<!-- /////////////////////////// tooltip sur la carte//////////////////////////////-->
<script>
function svgTip() {
  // style à appliquer si l'on ne passe pas par la classe  
  var opts = {
    "display": "none",
    "position": "absolute",
    "top": 0,
    "left": 0,
    "padding": "1em",
    "border": "1px solid red",
    "font-size": "1em",
    "color": "#000",
    "background-color": "rgba(255,255,255,.8)",
    "pointer-events": "none"
  };
 
$('g[data-description]').each(function(id, obj) {
  var tt = $(this).data("description"),
    that = $("<div class='svgtip'>" + tt + "</div>");
    
    // application du CSS
    that.css(opts);
 
    $(this).hover(function(event) {
      that.css({
        'left': event.clientX,
        'top': event.clientY + $(window).scrollTop()
      });
      that.addClass("active");
      that.slideDown(150);
    }, function() {
      that.slideUp(150);
      that.removeClass("active");
    });
    $(this).on("mousemove", function(event) {
      if (that.hasClass("active")) {
        that.css({
          'left': event.clientX,
          'top': event.clientY + $(window).scrollTop() - that.height()
        });
      }
    });
    $('body').append(that);
  });
};
new svgTip();
 
</script>
 <script>
    //    Affiche le nom de la région en passant la souris sur la liste déroulante-->
   
    
    var les_g_a = document.querySelectorAll('g > a');
les_g_a.forEach( function( elt ){
  elt.addEventListener( 'mouseover', function(){
    afficher_image( this.dataset.img );
    ChangeMessage(this.dataset.txt,'ejs_texte');
  })
  elt.addEventListener( 'mouseout', function(){
    cacher_image( this.dataset.img );
    ChangeMessage('','ejs_texte');
  })
});
 
    //////////////////////////////////////////////////////////////////////////////////////////////
 
    
    var les_g_a = document.querySelectorAll('.list_ul li.bloc > a');
les_g_a.forEach( function( elt ){
  elt.addEventListener( 'mouseover', function(){
    afficher_image( this.dataset.img );
    ChangeMessage(this.dataset.txt,'ejs_texte');
  })
  elt.addEventListener( 'mouseout', function(){
    cacher_image( this.dataset.img );
    ChangeMessage('','ejs_texte');
  })
});
    
     
    
  // Fin  Affiche le nom de la région en passant la souris sur la liste déroulante--> 
 
    /////////////////////////////////////////////////////////////////////////////////////////////////
    
                                    //Script Afficher ou Masquer texte La liste des Régions--> 
                                                 
                                          function ChangeMessage(message,champ,classe) 
                                          { 
                                              if(document.getElementById) 
                                              {
                                                  var elt = document.getElementById(champ);
                                                  elt.innerHTML = message; 
                                                  elt.className = (classe) ? classe : null;
                                              }        
                                          } 
                                                         
                                   // Fin Script Afficher ou Masquer texte La liste des Régions--> 
    
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
                                          // Script pour visualiser de la liste-->
                                                          
                                           var map = document.querySelector('#map')
                                       var paths = map.querySelectorAll('.map__image a')
                                       var links = map.querySelectorAll('.map__list a')
                                       
                                                // Polyfill du foreach
                                       if (NodeList.prototype.forEach === undefined) {
                                           NodeList.prototype.forEach = function (callback) {
                                               [].forEach.call(this, callback)
                                           }
                                       }
                                       var activeArea = function (id) {
                                           map.querySelectorAll('.is-active').forEach(function (item) {
                                               item.classList.remove('is-active')
                                           })
                                           if (id !== undefined) {
                                               document.querySelector('#list-' + id).classList.add('is-active')
                                               document.querySelector('#region-' + id).classList.add('is-active')
                                           }
                                       }
                                       paths.forEach(function (path) {
                                           path.addEventListener('mouseenter', function () {
                                               var id = this.id.replace('region-','')
                                               activeArea(id)
                                           })
                                       })
                                       
                                       links.forEach(function (link) {
                                           link.addEventListener('mouseenter', function () {
                                               var id = this.id.replace('list-', '')
                                               activeArea(id)
                                           })
                                       })
                                       
                                       map.addEventListener('mouseover', function () {
                                           activeArea()
                                       })
                                              
    /////////////////////////////////////////////////////////////////////////////////////////////////
    
                                        // Photos aux passage zone des cartes -->
                                                         
                                     afficher_image=function(id) {
                                             document.getElementById(id).style.display="block";
                                     };
                                     cacher_image=function(id) {
                                             document.getElementById(id).style.display="none";
                                     }
    </script>
</body>
</html>

Je te remercie pour ta patience et ta philosophie

Max

[NoSmoking]

Excuse-moi je me suis un peut emporter à mon âge c’est pas évident.

Pas de soucis on a connu et connait encore bien pire sur ce forum

J’ai la liste des régions que j’ai rajouter elle ne fonctionne plus normalement je m'explique lorsque tu passe sur le path tous se passe bien mais si tu passe sur le texte sa ne s'affiche pas dans la liste des régions si non nickel.

Ceci est normal comme on a changé les références des éléments au survol qui sont maintenant les éléments <g>.

On va reprendre en scindant chaque étape, mais pour commencer on va redéfinir certaines de tes fonctions et les « migrer » en jQuery pour plus d'homogénéité du code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function afficheImage(id) {
  $("#" + id).show();
}
function cacheImage(id) {
  $("#" + id).hide();
}
function changeMessage(message, id, classe) {
  $("#" + id).html(message).addClass(classe);
}

Au survol des groupes <g> de la carte :

• mise en surbrillance lien de la liste ;
• surbrillance des <path> (géré via CSS:hover) ;
• affichage de l'image ;
• affichage du texte.

Au survol des liens, <a>, de la liste <ul> :

• mise en surbrillance lien survolé ;
• surbrillance <path> ;
• affichage de l'image ;
• affichage du texte.

On note une grande similitude mais on va traiter les deux cas séparément pour plus de clarté.

Ceci étant fait revenons au coeur du problème.

• Survol des groupes <g> de la carte
Récupération des éléments, que l'on utilise plusieurs fois, via un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var oGroupes = $('g[data-description]');

Ce sont les même éléments qui sont utilisés pour l'affichage des « tooltip ».

La fonction qui gère les différents affichages pourrait ressembler à cela

Code :

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
/**
 * Eléments <g> de la carte
 * Affichage
 * - mise en surbrillance lien de la liste
 * - surbrillance <path> (géré via CSS:hover)
 * - affichage de l'image
 * - affichage du texte
 */
oGroupes.each(function(ind, elem) {
  // récupération du <a> contenu
  var oLien = elem.firstElementChild;
  // récupération du numéro ID pour la liste
  var index = oLien.id.replace("region-", "");
  // récupération des ID pour image et texte
  var idImage = $(oLien).data("img");
  var idTexte = $(oLien).data("txt");
  // action sur mouseover/out
  $(this).hover(function() {
    // ajout classe sur lien de la liste
    $("#list-" + index).addClass("is-active");
    // affiche image et texte
    afficheImage(idImage);
    changeMessage(idTexte, "ejs_texte");
  }, function() {
    // supprime classe sur lien de la liste
    $("#list-" + index).removeClass("is-active");
    // masque image et texte
    cacheImage(idImage);
    changeMessage("", "ejs_texte");
  });
});

...il suffit de regarder les commentaires pour comprendre, enfin j'espère.

• Survol des liens, <a>, de la liste <ul>
La fonction qui gère les différents affichages pourrait ressembler à cela

Code :

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
/**
 * Liens de la liste
 * Affichage des différents éléments au survol des liens de la liste
 * - mise en surbrillance lien survolé
 * - surbrillance <path>
 * - affichage de l'image
 * - affichage du texte
 */
$("a[id^='list-']").each(function(ind, elem) {
  // récupération du numéro ID
  var index = elem.id.replace("list-", "");
  // récupération des ID pour image et texte
  var idImage = $(this).data("img");
  var idTexte = $(this).data("txt");
  // action sur mouseover/out
  $(this).hover(function() {
    $("#list-" + index).addClass("is-active");
    $("#region-" + index).addClass("is-active");
    // affiche image et texte
    afficheImage(idImage);
    changeMessage(idTexte, "ejs_texte");
  }, function() {
    $("#list-" + index).removeClass("is-active");
    $("#region-" + index).removeClass("is-active");
    // masque image et texte
    cacheImage(idImage);
    changeMessage("", "ejs_texte");
  });
});

...encore une fois, il suffit de regarder les commentaires pour comprendre.

• Au final le code complet à insérer en bas de ta page est

Code :

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/**
 * Script bouton afficher/masquer texte sur la carte
 */
var oTexts = $("g text");
$("#bouton_texte").on("click",function(){
  var obj = $(this);
  if( obj.text() === "Masquer le texte"){
    obj.text("Afficher le texte");
    oTexts.hide();
  }
  else {
    obj.text("Masquer le texte");
    oTexts.show();
  }
});
 
function afficheImage(id) {
  $("#" + id).show();
}
function cacheImage(id) {
  $("#" + id).hide();
}
function changeMessage(message, id, classe) {
  $("#" + id).html(message).addClass(classe);
}
 
var oGroupes = $('g[data-description]');
/**
 *  tooltip sur la carte
 */
function svgTip() {
  // style à appliquer si l'on ne passe pas par la classe
  var opts = {
    "display": "none",
    "position": "absolute",
    "top": 0,
    "left": 0,
    "padding": "1em",
    "border": "1px solid red",
    "font-size": "1em",
    "color": "#000",
    "background-color": "rgba(255,255,255,.8)",
    "pointer-events": "none"
  };
  oGroupes.each(function(id, obj) {
    var tt = $(this).data("description");
    var that = $("<div class='svgtip'>" + tt + "</div>");
    // action sur mouseover/out
    $(this).hover(function(event) {
      that.css({
        'left': event.clientX,
        'top': event.clientY + $(window).scrollTop()
      });
      that.addClass("active");
      that.slideDown(150);
    }, function() {
      that.slideUp(150);
      that.removeClass("active");
    });
    $(this).on("mousemove", function(event) {
      if (that.hasClass("active")) {
        that.css({
          'left': event.clientX,
          'top': event.clientY + $(window).scrollTop() - that.height()
        });
      }
    });
    $('body').append(that);
  });
};
new svgTip();
/**
 * Eléments <g> de la carte
 * Affichage
 * - mise en surbrillance lien de la liste
 * - surbrillance <path> (géré via CSS:hover)
 * - affichage de l'image
 * - affichage du texte
 */
oGroupes.each(function(ind, elem) {
  // récupération du <a> contenu
  var oLien = elem.firstElementChild;
  // récupération du numéro ID pour la liste
  var index = oLien.id.replace("region-", "");
  // récupération des ID pour image et texte
  var idImage = $(oLien).data("img");
  var idTexte = $(oLien).data("txt");
  // action sur mouseover/out
  $(this).hover(function() {
    // ajout classe sur lien de la liste
    $("#list-" + index).addClass("is-active");
    // affiche image et texte
    afficheImage(idImage);
    changeMessage(idTexte, "ejs_texte");
  }, function() {
    // supprime classe sur lien de la liste
    $("#list-" + index).removeClass("is-active");
    // masque image et texte
    cacheImage(idImage);
    changeMessage("", "ejs_texte");
  });
});
 
/**
  * Liens de la liste
  * Affichage des différents éléments au survol des liens de la liste
  * - mise en surbrillance lien survolé
  * - surbrillance <path>
  * - affichage de l'image
  * - affichage du texte
  */
$("a[id^='list-']").each(function(ind, elem) {
    // récupération du numéro ID
    var index = elem.id.replace("list-", "");
    // récupération des ID pour image et texte
    var idImage = $(this).data("img");
    var idTexte = $(this).data("txt");
    // action sur mouseover/out
    $(this).hover(function() {
        $("#list-" + index).addClass("is-active");
        $("#region-" + index).addClass("is-active");
        // affiche image et texte
        afficheImage(idImage);
        changeMessage(idTexte, "ejs_texte");
    }, function() {
        $("#list-" + index).removeClass("is-active");
        $("#region-" + index).removeClass("is-active");
        // masque image et texte
        cacheImage(idImage);
        changeMessage("", "ejs_texte");
    });
});

...et rien d'autres.

Il y aura surement quelques ajustements à faire mais le principal est là.

[apdf1]

Salut NoSmoking

Je te remercie, J'ai lu et relu les commentaires pour arriver à comprendre le pourquoi du comment.
Mais je comprend pas un truck, et j'aimerai que l'ont m'explique pourquoi!
Lorsque je passe la souris sur le texte ex:Valady qui se trouve sur la carte, dans la liste des régions en haut à droite sa ne sélectionne pas, alors que si je passe à côté du texte sa sélectionne le nom. Sa sa reste vraiment un mystère????

Merci d'avance

max

[NoSmoking]

Pour ma part je viens de tester de la façon suivante :

• J'ai repris ton code donné au post #27 ;
• j'ai supprimé TOUS les <script> ;
• j'ai rajouté le code final que je t'ai mis précédemment ;
• j'ai sauvegardé le fichier ;
• je l'ai ouvert dans un navigateur.

.... et ... cela fonctionne parfaitement !

[apdf1]

Re,

EXCUSE MOI.....

Je suis désolé j'avais oublier d'enlever un script, tous fonctionne NICKEL.

Un grand Merci

Max

[apdf1]

Bonjour NoSmoking

Suite au code qui fonctionne très bien je viens de m’apercevoir que j'ai un petit souci.

Sur la carte suivant ou se trouve le nom je suis obligé de mettre une flèche rouge jusque là tous fonctionne très bien mais lorsque je veut masquer les noms la flèche ne se masque pas, comme tu m'avait changer tous les codes JavaScript à juste titre puisque tous fonctionne nickel j'ai juste ce petit problème.

Je remet le code avec un flèche dessus pour bien voir.

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title> svg over </title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
body{
  background:#000;
}
svg.map__image {
  position: absolute;
    top: 90px;
    left: 20px;
  border    : 1px solid red;/*Cadre*/
  width     : 940px;
  height    : 640px;
  margin    : 0px;
}
svg.map__image path {
  fill          : #19191f;
  stroke        : #cc4646;
  stroke-width  : 0.5;
  transition    : fill 0.1s;
}
svg.map__image g:hover path {
  fill   : #0000FF;
  stroke : #cc4646;
}
svg.map__image text {
  fill      : #e8e809;
  font-size : 12px;/*taille sans hover*/
}
svg.map__image g:hover text {
  fill        : #fdfefe;
  font-weight : bold;
  font-size   : 15px;  /*taille avec hover*/
  font-style  : italic;
}
/*Pas de nom sur la carte*/
.texte {
  /*visibility: hidden;/* SUPPRIME */
}
/* Fin de Carte */
 
/* Bouton afficher/masquer le texte sur la carte*/
.bt_afficher {
  margin-top: 55px;
  margin-left: 10px;
  padding-left: -100px;
}
.bt_texte:hover {
  font-size: 18px;
  color: #1af508;
}
.bt_texte {
  margin-left: 10px;
  color: #e8e809;
  cursor: pointer;
}
/* Fin Bouton afficher/masquer le texte sur la carte*/
 
/*=======================*/
/* style pour la tooltip */
/*=======================*/
.svgtip {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1em;
  border: 1px solid red;
  font-size: 1em;
  color: #000;
  background-color: rgba(255,255,255,.8);
  pointer-events: none;
}
    
   /* Liste des régions*/      
    .map__image .is-active path {
      fill: #0000FF;
    }
    .map__image path:hover {
      fill: #0000FF;
      stroke: #0000FF;
    }
    .map__list {
      position: absolute;
      top: 820px;
      left: 210px; /* border-style: double;*/
      height: 90px; 
      width: 930px;
      list-style: none;  /*overflow-y: scroll;*/
    }
    .map__list ul, .map__list li{
      margin: 0;
      padding: 0;
      list-style: none;
      color: #f5eded;
    }
    .map__list a{ 
      font-size: 18px;   
      text-decoration: none;
      transition: 0.1s;
    }
    .map__list a.is-active {
      color: #c5f20b;
      background-color: #050505;font-weight: bold;
    }
    .map__list a {
      color: #09d7f2;
      text-decoration: none;
    }
    /* Fin Liste */
 
    /* Afficher le texte des régions en passant sur les noms des régions*/
    #ejs_texte{   
      position: absolute;
      top: 140px;
      left: 35px;
      font-size : 20pt;
      color : #d1f412;
      font-weight : bold;
      font-family : Brush Script MT, Brush Script Std, cursive;   
    }  
       
    /* Bouton la liste des régions*/
    #masquer_liste:hover {
      font-size: 17px;
      color: #1af508;
    }  
    #masquer_liste{  /* Afficher ou Masquer la liste*/
      position: absolute;
      top: 70px;
      left: 800px;
      color:#f2f210; 
      outline: 0;/*Supprimer l'encadrement bleu lors du clic*/
    }     
    /* Fin Bouton la liste des régions*/
    .bloc{
      display:block; 
      float:left; 
      width:205px;
      width:205px;
    }  
    .list_ul{ 
      display:block; 
      width:100px;
    } 
    #tadiv{
      position: absolute;
      top: 110px;
      left: 800px;
      display: block;
      height: 690px;
      width: 250px;
      overflow-y:auto;
    }      
    /* Fin Afficher le texte des régions en passant sur les noms des régions*/    
    .img_info{
        position: absolute;
        top: 530px;
        left: 650px;
        
    } 
    #fleche_rouge {
        fill-rule: evenodd;
        clip-rule: evenodd;
        fill: #0404fc;
        stroke: #f80a13;
        stroke-miterlimit: 22.9256;
        stroke-width: 1px;
 }
    
</style>
</head>
<body>
  <!--   Afficher ou maquer le texte sur la Carte   -->
  <table class="bt_afficher">
    <tr>
      <td> <span class="bt_texte" id="bouton_texte">Masquer le texte</span></td>
    </tr>
  </table>
 
   	<div class="map" id="map">
		<div class="map__image"> 
 
 
 
  <!-- Fin Afficher et masquer nom sur la carte -->
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="160 50 660 660" class="map__image">
 
    <g data-description="Balsac<br>15,57 km²<br>617 habitants">
      <a id="region-01" xlink:href="Aveyron/balsac.html" target="myframe" data-img="img1" data-txt=" Balsac">
        <path id="path-01" d="M438.5,540.8 346.2,567.5 322.1,535.6 312.6,507.4 351.8,437.5 348.7,427.9 375.1,438.1 389.3,432.3 413.9,474.4 443.9,504 455.7,518.3 " />
        <text transform="matrix(1 0 0 1 356 508)">
          <tspan x="0" y="0" class="texte">Balsac</tspan>
        </text>
      </a>
    </g>
    <g data-description="Clairvaux D'Aveyron">
      <a id="region-02" xlink:href="Aveyron/clairvaux_d_aveyron.html" target="myframe" data-img="img2" data-txt=" Clairvaux D'Aveyron">
        <path id="path-02" d="M268.5,594.3 251.3,613.7 237.2,601.2 227.5,603.7 224.6,574.8 243.5,508 202,495.7 175.2,452.7 157.2,464.3 149.8,455.7 261.4,417.6 285.7,386.2 348.7,427.9 351.8,437.5 312.6,507.4 322.1,535.6 302,541.4 271.2,566.5 " />
        <text transform="matrix(1 0 0 1 196 464)">
          <tspan x="0" y="0" class="texte">Clairvaux D'Aveyron</tspan>
        </text>
      </a>
    </g>
    <g data-description="Druelle">
      <a id="region-03" xlink:href="Aveyron/druelle.html" target="myframe" data-img="img3" data-txt=" Druelle">
        <path id="path-03" d="M472.3,707 437.3,696.3 435.5,686.3 394,672.4 386.6,643.8 363.8,644.9 328.8,621.5 307.9,629.6 268.5,594.3 271.2,566.5 302,541.4 322.1,535.6 346.2,567.5 438.5,540.8 418.3,563.9 418,583.7 428.1,588.4 450.3,584.1 493.7,593.8 549.6,559.6 565.9,570.6 561.1,590.6 575.6,618.1 553.5,618.4 538.9,633.5 536.2,691.8 528.8,698.2 498.7,692.3 " />
        <text transform="matrix(1 0 0 1 383 610)">
          <tspan x="0" y="0" class="texte">Druelle</tspan>
        </text>
      </a>
    </g>
    <g data-description="Marcillac Vallon">
      <a id="region-04" xlink:href="Aveyron/marcillac_vallon.html" target="myframe" data-img="img4" data-txt=" Marcillac Vallon">
        <path id="path-04" d="M395.8,335.6 354.2,308.7 332.3,307.8 311.6,273.6 319.6,266.8 359.3,246 393.1,239.5 407,223.4 425.8,232.4 446.5,226.4 455.3,232 461.6,278.3 468.3,297.2 439.9,328.6 " />
        <text transform="matrix(1 0 0 1 343 284)">
          <tspan x="0" y="0" class="texte">Marcillac Vallon</tspan>
        </text>
      </a>
    </g>
    <g data-description="Mouret">
      <a id="region-05" xlink:href="Aveyron/mouret.html" target="myframe" data-img="img5" data-txt=" Mouret">
        <path id="path-05" d="M461.6,278.3 455.3,232 446.5,226.4 425.8,232.4 407,223.4 392.1,198.8 402.3,163.3 444.5,173.9 475.2,162 497.7,165.9 526.6,135 541.9,87.9 552.4,89.5 584.7,66.5 616.3,62.6 631,89.1 624.6,128 640.3,153.5 648.3,160.1 621.5,190.4 590.2,193.2 585.1,221.5 562.4,217.3 542.2,239.4 " />
        <text transform="matrix(1 0 0 1 496 199)">
          <tspan x="0" y="0" class="texte">Mouret</tspan>
        </text>
      </a>
    </g>
    <g data-description="Muret Le Chateau">
      <a id="region-06" xlink:href="Aveyron/muret_le_chateau.html" target="myframe" data-img="img6" data-txt=" Muret Le Chateau">
        <path id="path-06" d="M698.8,307.6 665.5,303.8 610,273.3 605,244.4 585.1,221.5 590.2,193.2 621.5,190.4 648.3,160.1 640.3,153.5 662.6,151.8 693.2,163.7 714,157.4 686.2,211.3 681.2,241 " />
        <text transform="matrix(1 0 0 1 611 221)">
          <tspan x="0" y="0" class="texte">Muret Le Chateau</tspan>
        </text>
      </a>
    </g>
    <g data-description="Nauviale">
      <a id="region-07" xlink:href="Aveyron/nauviale.html" target="myframe" data-img="img7" data-txt=" Nauviale">
        <path id="path-07" d="M319.6,266.8 314.8,247.5 237.2,192.7 232.4,164.7 253.8,142.8 271.9,98 360.6,109.4 381,118.6 392.8,157.6 402.3,163.3 392.1,198.8 407,223.4 393.1,239.5 359.3,246 " />
        <text transform="matrix(1 0 0 1 302 182)">
          <tspan x="0" y="0" class="texte">Nauviale</tspan>
        </text>
      </a>
    </g>
    <g data-description="Pruines">
      <a id="region-08" xlink:href="Aveyron/pruines.html" target="myframe" data-img="img8" data-txt=" Pruines">
        <path id="path-08" d="M541.9,87.9 526.6,135 497.7,165.9 475.2,162 444.5,173.9 402.3,163.3 392.8,157.6 381,118.6 360.6,109.4 393.5,60.4 401.3,59.8 531.2,75.5 541.9,78.1 " />
        <text transform="matrix(1 0 0 1 434 123)">
          <tspan x="0" y="0" class="texte">Pruines</tspan>
        </text>
      </a>
    </g>
    <g data-description="Saint Christophe Vallon">
      <a id="region-09" xlink:href="Aveyron/saint_christophe_vallon.html" target="myframe" data-img="img9" data-txt=" Saint Christophe Vallon">
        <path id="path-09" d="M276,361.7 223.5,345.4 199,325 176.8,328.1 196.2,303.7 193.1,283.8 128.5,227.9 127.2,209.8 135.7,204.2 159.6,222.3 184.5,206 221.7,214.8 237.2,192.7 314.8,247.5 319.6,266.8 311.6,273.6 332.3,307.8 291.3,311.2 297,339.7 " />
        <text transform="matrix(1 0 0 1 150 276)">
          <tspan x="0" y="0" class="texte">Saint Christophe Vallon</tspan>
        </text>
      </a>
    </g>
    <g data-description="Salles La Source">
      <a id="region-10" xlink:href="Aveyron/salles_la_source.html" target="myframe" data-img="img10" data-txt=" Salles La Source">
        <path id="path-10" d="M628.8,478.1 586.6,511.6 505.6,510.3 463.6,493 443.9,504 413.9,474.4 389.3,432.3 410.6,360.4 395.8,335.6 439.9,328.6 468.3,297.2 461.6,278.3 542.2,239.4 562.4,217.3 585.1,221.5 605,244.4 610,273.3 665.5,303.8 698.8,307.6 711.5,333.6 690.6,397 672.4,388.5 610.2,425.5 628.3,458.7 " />
        <text transform="matrix(1 0 0 1 501 359)">
          <tspan x="0" y="0" class="texte">Salles La Source</tspan>
        </text>
      </a>
    </g>
    <g data-description="Valady<br>15,51 km²<br>1 509 habitants">
      <a id="region-11" xlink:href="Aveyron/valady.html" target="myframe" data-img="img11" data-txt="Valady">
        <path id="path-11" d="M389.3,432.3 375.1,438.1 348.7,427.9 285.7,386.2 276,361.7 297,339.7 291.3,311.2 332.3,307.8 354.2,308.7 395.8,335.6 410.6,360.4 " />
        <text transform="matrix(1 0 0 1 326 367)">
          <tspan x="0" y="0" class="texte">Valady</tspan>
        </text>
      </a>
    </g>
 
<!-- ////////////////////FLECHE ROUGE////////////////////////////     -->
      <line id="fleche_rouge" class="texte" x1="690.5" y1="443.5" x2="550.5" y2="364.5"/>
<!-- ////////////////////////////////////////////////////////////     -->
 
  </svg>
        </div>
 
   <!-- Afficher ou Masquer texte La liste des Régions-->
		<details close="close">
			<summary id="masquer_liste" style="cursor:pointer;">La liste des Régions</summary>
			<!-- Fin Afficher ou Masquer texte La liste des Régions-->
			<!-- Liste -->
			<div class="map__list" id="tadiv">
				<ul class="scrollbar3" id="style-3">
					<ul class="list_ul">
<li class="bloc"><a href="../Ariège*/balsa.html" target="myframe" data-img="img1"data-txt="Balsa" id="list-01">Balsa </a></li>
<li class="bloc"><a href="../Ariège*/clairvaux_d_aveyro.html" target="myframe" data-img="img2"data-txt="Clairvaux D'Aveyro" id="list-02">Clairvaux D'Aveyro </a></li>
<li class="bloc"><a href="../Ariège*/druell.html" target="myframe" data-img="img3"data-txt="Druell" id="list-03">Druell </a></li>
<li class="bloc"><a href="../Ariège*/marcillac_vallo.html" target="myframe" data-img="img4"data-txt="Marcillac Vallo" id="list-04">Marcillac Vallo </a></li>
<li class="bloc"><a href="../Ariège*/moure.html" target="myframe" data-img="img5"data-txt="Moure" id="list-05">Moure </a></li>
<li class="bloc"><a href="../Ariège*/muret_le_chatea.html" target="myframe" data-img="img6"data-txt="Muret Le Chatea" id="list-06">Muret Le Chatea </a></li>
<li class="bloc"><a href="../Ariège*/nauvial.html" target="myframe" data-img="img7"data-txt="Nauvial" id="list-07">Nauvial </a></li>
<li class="bloc"><a href="../Ariège*/pruine.html" target="myframe" data-img="img8"data-txt="Pruine" id="list-08">Pruine </a></li>
<li class="bloc"><a href="../Ariège*/saint_christophe_vallo.html" target="myframe" data-img="img9"data-txt="Saint Christophe Vallo" id="list-09">Saint Christophe Vallo </a></li>
<li class="bloc"><a href="../Ariège*/salles_la_sourc.html" target="myframe" data-img="img10"data-txt="Salles La Sourc" id="list-10">Salles La Sourc </a></li>
<li class="bloc"><a href="../Ariège*/valad.html" target="myframe" data-img="img11"data-txt="Valad" id="list-11">Valad </a></li>
 
					</ul>
				</ul>
			</div>
		</details>
		<div id="ejs_texte"></div>
		<!-- Fin Liste --> 
		<!-- Photos aux passage zone des cartes -->
<img class="img_info" src="photos/Balsa.jpg" class="img_ville" width="300" height="200" id="img1" style="display:none;">
<img class="img_info" src="photos/Clairvaux D'Aveyro.jpg" class="img_ville" width="300" height="200" id="img2" style="display:none;">
<img class="img_info" src="photos/Druell.jpg" class="img_ville" width="300" height="200" id="img3" style="display:none;">
<img class="img_info" src="photos/Marcillac Vallo.jpg" class="img_ville" width="300" height="200" id="img4" style="display:none;">
<img class="img_info" src="photos/Moure.jpg" class="img_ville" width="300" height="200" id="img5" style="display:none;">
<img class="img_info" src="photos/Muret Le Chatea.jpg" class="img_ville" width="300" height="200" id="img6" style="display:none;">
<img class="img_info" src="photos/Nauvial.jpg" class="img_ville" width="300" height="200" id="img7" style="display:none;">
<img class="img_info" src="photos/Pruine.jpg" class="img_ville" width="300" height="200" id="img8" style="display:none;">
<img class="img_info" src="photos/Saint Christophe Vallo.jpg" class="img_ville" width="300" height="200" id="img9" style="display:none;">
<img class="img_info" src="photos/Salles La Sourc.jpg" class="img_ville" width="300" height="200" id="img10" style="display:none;">
<img class="img_info" src="photos/Valad.jpg" class="img_ville" width="300" height="200" id="img11" style="display:none;">
 
</div>		<!-- Fin Photos aux passage zone des cartes -->    
 
 
<script>
/**
 * Script bouton afficher/masquer texte sur la carte
 */
var oTexts = $("g text");
$("#bouton_texte").on("click",function(){
  var obj = $(this);
  if( obj.text() === "Masquer le texte"){
    obj.text("Afficher le texte");
    oTexts.hide();
  }
  else {
    obj.text("Masquer le texte");
    oTexts.show();
  }
});
 
function afficheImage(id) {
  $("#" + id).show();
}
function cacheImage(id) {
  $("#" + id).hide();
}
function changeMessage(message, id, classe) {
  $("#" + id).html(message).addClass(classe);
}
 
var oGroupes = $('g[data-description]');
/**
 *  tooltip sur la carte
 */
function svgTip() {
  // style à appliquer si l'on ne passe pas par la classe
  var opts = {
    "display": "none",
    "position": "absolute",
    "top": 0,
    "left": 0,
    "padding": "1em",
    "border": "1px solid red",
    "font-size": "1em",
    "color": "#000",
    "background-color": "rgba(255,255,255,.8)",
    "pointer-events": "none"
  };
  oGroupes.each(function(id, obj) {
    var tt = $(this).data("description");
    var that = $("<div class='svgtip'>" + tt + "</div>");
    // action sur mouseover/out
    $(this).hover(function(event) {
      that.css({
        'left': event.clientX,
        'top': event.clientY + $(window).scrollTop()
      });
      that.addClass("active");
      that.slideDown(150);
    }, function() {
      that.slideUp(150);
      that.removeClass("active");
    });
    $(this).on("mousemove", function(event) {
      if (that.hasClass("active")) {
        that.css({
          'left': event.clientX,
          'top': event.clientY + $(window).scrollTop() - that.height()
        });
      }
    });
    $('body').append(that);
  });
};
new svgTip();
/**
 * Eléments <g> de la carte
 * Affichage
 * - mise en surbrillance lien de la liste
 * - surbrillance <path> (géré via CSS:hover)
 * - affichage de l'image
 * - affichage du texte
 */
oGroupes.each(function(ind, elem) {
  // récupération du <a> contenu
  var oLien = elem.firstElementChild;
  // récupération du numéro ID pour la liste
  var index = oLien.id.replace("region-", "");
  // récupération des ID pour image et texte
  var idImage = $(oLien).data("img");
  var idTexte = $(oLien).data("txt");
  // action sur mouseover/out
  $(this).hover(function() {
    // ajout classe sur lien de la liste
    $("#list-" + index).addClass("is-active");
    // affiche image et texte
    afficheImage(idImage);
    changeMessage(idTexte, "ejs_texte");
  }, function() {
    // supprime classe sur lien de la liste
    $("#list-" + index).removeClass("is-active");
    // masque image et texte
    cacheImage(idImage);
    changeMessage("", "ejs_texte");
  });
});
 
/**
  * Liens de la liste
  * Affichage des différents éléments au survol des liens de la liste
  * - mise en surbrillance lien survolé
  * - surbrillance <path>
  * - affichage de l'image
  * - affichage du texte
  */
$("a[id^='list-']").each(function(ind, elem) {
    // récupération du numéro ID
    var index = elem.id.replace("list-", "");
    // récupération des ID pour image et texte
    var idImage = $(this).data("img");
    var idTexte = $(this).data("txt");
    // action sur mouseover/out
    $(this).hover(function() {
        $("#list-" + index).addClass("is-active");
        $("#region-" + index).addClass("is-active");
        // affiche image et texte
        afficheImage(idImage);
        changeMessage(idTexte, "ejs_texte");
    }, function() {
        $("#list-" + index).removeClass("is-active");
        $("#region-" + index).removeClass("is-active");
        // masque image et texte
        cacheImage(idImage);
        changeMessage("", "ejs_texte");
    });
});
    </script>
</body>
</html>

Je te remercie d'avance

Max

[NoSmoking]

Pour commencer il te faut mieux structurer ton document, à savoir cette ligne

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<line id="fleche_rouge" class="texte" x1="690.5" y1="443.5" x2="550.5" y2="364.5"/>

DOIT appartenir au groupe, <g>, correspondant ce qui donnerait dans ton cas

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<g data-description="Salles La Source">
  <a id="region-10" xlink:href="Aveyron/salles_la_source.html" target="myframe" data-img="img10" data-txt=" Salles La Source">
    <path id="path-10" d="M628.8,478.1 586.6,511.6 505.6,510.3 463.6,493 443.9,504 413.9,474.4 389.3,432.3 410.6,360.4 395.8,335.6 439.9,328.6 468.3,297.2 461.6,278.3 542.2,239.4 562.4,217.3 585.1,221.5 605,244.4 610,273.3 665.5,303.8 698.8,307.6 711.5,333.6 690.6,397 672.4,388.5 610.2,425.5 628.3,458.7 " />
    <text transform="matrix(1 0 0 1 501 359)">
      <tspan x="0" y="0" class="texte">Salles La Source</tspan>
    </text>
    <line id="fleche_rouge" class="texte" x1="690.5" y1="443.5" x2="550.5" y2="364.5"/>        
  </a>
</g>

Pour faire disparaître/apparaître il ne te suffiras que de modifier le sélecteur oTexts comme suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var oTexts = $("g text, g line");

et il n'y a rien à changer dans la fonction.

Pour résumer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * Script bouton afficher/masquer texte et fléche sur la carte
 */
var oTexts = $("g text, g line");
$("#bouton_texte").on("click",function(){
  var obj = $(this);
  if( obj.text() === "Masquer le texte"){
    obj.text("Afficher le texte");
    oTexts.hide();
  }
  else {
    obj.text("Masquer le texte");
    oTexts.show();
  }
});

[apdf1]

Salut NoSmoking

J'ai fait ceci:

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title> svg over </title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
body{
  background:#000;
}
svg.map__image {
  position: absolute;
    top: 90px;
    left: 20px;
  border    : 1px solid red;/*Cadre*/
  width     : 940px;
  height    : 640px;
  margin    : 0px;
}
svg.map__image path {
  fill          : #19191f;
  stroke        : #cc4646;
  stroke-width  : 0.5;
  transition    : fill 0.1s;
}
svg.map__image g:hover path {
  fill   : #0000FF;
  stroke : #cc4646;
}
svg.map__image text {
  fill      : #e8e809;
  font-size : 12px;/*taille sans hover*/
}
svg.map__image g:hover text {
  fill        : #fdfefe;
  font-weight : bold;
  font-size   : 15px;  /*taille avec hover*/
  font-style  : italic;
}
/*Pas de nom sur la carte*/
.texte {
  /*visibility: hidden;/* SUPPRIME */
}
/* Fin de Carte */
 
/* Bouton afficher/masquer le texte sur la carte*/
.bt_afficher {
  margin-top: 55px;
  margin-left: 10px;
  padding-left: -100px;
}
.bt_texte:hover {
  font-size: 18px;
  color: #1af508;
}
.bt_texte {
  margin-left: 10px;
  color: #e8e809;
  cursor: pointer;
}
/* Fin Bouton afficher/masquer le texte sur la carte*/
 
/*=======================*/
/* style pour la tooltip */
/*=======================*/
.svgtip {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1em;
  border: 1px solid red;
  font-size: 1em;
  color: #000;
  background-color: rgba(255,255,255,.8);
  pointer-events: none;
}
    
   /* Liste des régions*/      
    .map__image .is-active path {
      fill: #0000FF;
    }
    .map__image path:hover {
      fill: #0000FF;
      stroke: #0000FF;
    }
    .map__list {
      position: absolute;
      top: 820px;
      left: 210px; /* border-style: double;*/
      height: 90px; 
      width: 930px;
      list-style: none;  /*overflow-y: scroll;*/
    }
    .map__list ul, .map__list li{
      margin: 0;
      padding: 0;
      list-style: none;
      color: #f5eded;
    }
    .map__list a{ 
      font-size: 18px;   
      text-decoration: none;
      transition: 0.1s;
    }
    .map__list a.is-active {
      color: #c5f20b;
      background-color: #050505;font-weight: bold;
    }
    .map__list a {
      color: #09d7f2;
      text-decoration: none;
    }
    /* Fin Liste */
 
    /* Afficher le texte des régions en passant sur les noms des régions*/
    #ejs_texte{   
      position: absolute;
      top: 140px;
      left: 35px;
      font-size : 20pt;
      color : #d1f412;
      font-weight : bold;
      font-family : Brush Script MT, Brush Script Std, cursive;   
    }  
       
    /* Bouton la liste des régions*/
    #masquer_liste:hover {
      font-size: 17px;
      color: #1af508;
    }  
    #masquer_liste{  /* Afficher ou Masquer la liste*/
      position: absolute;
      top: 70px;
      left: 800px;
      color:#f2f210; 
      outline: 0;/*Supprimer l'encadrement bleu lors du clic*/
    }     
    /* Fin Bouton la liste des régions*/
    .bloc{
      display:block; 
      float:left; 
      width:205px;
      width:205px;
    }  
    .list_ul{ 
      display:block; 
      width:100px;
    } 
    #tadiv{
      position: absolute;
      top: 110px;
      left: 800px;
      display: block;
      height: 690px;
      width: 250px;
      overflow-y:auto;
    }      
    /* Fin Afficher le texte des régions en passant sur les noms des régions*/    
    .img_info{
        position: absolute;
        top: 530px;
        left: 650px;
        
    } 
    #fleche_rouge {
        fill-rule: evenodd;
        clip-rule: evenodd;
        fill: #0404fc;
        stroke: #f80a13;
        stroke-miterlimit: 22.9256;
        stroke-width: 1px;
 }
    
</style>
</head>
<body>
  <!--   Afficher ou maquer le texte sur la Carte   -->
  <table class="bt_afficher">
    <tr>
      <td> <span class="bt_texte" id="bouton_texte">Masquer le texte</span></td>
    </tr>
  </table>
 
   	<div class="map" id="map">
		<div class="map__image"> 
 
 
 
  <!-- Fin Afficher et masquer nom sur la carte -->
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="160 50 660 660" class="map__image">
 
    <g data-description="Balsac<br>15,57 km²<br>617 habitants">
      <a id="region-01" xlink:href="Aveyron/balsac.html" target="myframe" data-img="img1" data-txt=" Balsac">
        <path id="path-01" d="M438.5,540.8 346.2,567.5 322.1,535.6 312.6,507.4 351.8,437.5 348.7,427.9 375.1,438.1 389.3,432.3 413.9,474.4 443.9,504 455.7,518.3 " />
        <text transform="matrix(1 0 0 1 356 508)">
          <tspan x="0" y="0" class="texte">Balsac</tspan>
        </text>
      </a>
    </g>
    <g data-description="Clairvaux D'Aveyron">
      <a id="region-02" xlink:href="Aveyron/clairvaux_d_aveyron.html" target="myframe" data-img="img2" data-txt=" Clairvaux D'Aveyron">
        <path id="path-02" d="M268.5,594.3 251.3,613.7 237.2,601.2 227.5,603.7 224.6,574.8 243.5,508 202,495.7 175.2,452.7 157.2,464.3 149.8,455.7 261.4,417.6 285.7,386.2 348.7,427.9 351.8,437.5 312.6,507.4 322.1,535.6 302,541.4 271.2,566.5 " />
        <text transform="matrix(1 0 0 1 196 464)">
          <tspan x="0" y="0" class="texte">Clairvaux D'Aveyron</tspan>
        </text>
      </a>
    </g>
    <g data-description="Druelle">
      <a id="region-03" xlink:href="Aveyron/druelle.html" target="myframe" data-img="img3" data-txt=" Druelle">
        <path id="path-03" d="M472.3,707 437.3,696.3 435.5,686.3 394,672.4 386.6,643.8 363.8,644.9 328.8,621.5 307.9,629.6 268.5,594.3 271.2,566.5 302,541.4 322.1,535.6 346.2,567.5 438.5,540.8 418.3,563.9 418,583.7 428.1,588.4 450.3,584.1 493.7,593.8 549.6,559.6 565.9,570.6 561.1,590.6 575.6,618.1 553.5,618.4 538.9,633.5 536.2,691.8 528.8,698.2 498.7,692.3 " />
        <text transform="matrix(1 0 0 1 383 610)">
          <tspan x="0" y="0" class="texte">Druelle</tspan>
        </text>
      </a>
    </g>
    <g data-description="Marcillac Vallon">
      <a id="region-04" xlink:href="Aveyron/marcillac_vallon.html" target="myframe" data-img="img4" data-txt=" Marcillac Vallon">
        <path id="path-04" d="M395.8,335.6 354.2,308.7 332.3,307.8 311.6,273.6 319.6,266.8 359.3,246 393.1,239.5 407,223.4 425.8,232.4 446.5,226.4 455.3,232 461.6,278.3 468.3,297.2 439.9,328.6 " />
        <text transform="matrix(1 0 0 1 343 284)">
          <tspan x="0" y="0" class="texte">Marcillac Vallon</tspan>
        </text>
      </a>
    </g>
    <g data-description="Mouret">
      <a id="region-05" xlink:href="Aveyron/mouret.html" target="myframe" data-img="img5" data-txt=" Mouret">
        <path id="path-05" d="M461.6,278.3 455.3,232 446.5,226.4 425.8,232.4 407,223.4 392.1,198.8 402.3,163.3 444.5,173.9 475.2,162 497.7,165.9 526.6,135 541.9,87.9 552.4,89.5 584.7,66.5 616.3,62.6 631,89.1 624.6,128 640.3,153.5 648.3,160.1 621.5,190.4 590.2,193.2 585.1,221.5 562.4,217.3 542.2,239.4 " />
        <text transform="matrix(1 0 0 1 496 199)">
          <tspan x="0" y="0" class="texte">Mouret</tspan>
        </text>
      </a>
    </g>
    <g data-description="Muret Le Chateau">
      <a id="region-06" xlink:href="Aveyron/muret_le_chateau.html" target="myframe" data-img="img6" data-txt=" Muret Le Chateau">
        <path id="path-06" d="M698.8,307.6 665.5,303.8 610,273.3 605,244.4 585.1,221.5 590.2,193.2 621.5,190.4 648.3,160.1 640.3,153.5 662.6,151.8 693.2,163.7 714,157.4 686.2,211.3 681.2,241 " />
        <text transform="matrix(1 0 0 1 611 221)">
          <tspan x="0" y="0" class="texte">Muret Le Chateau</tspan>
        </text>
      </a>
    </g>
    <g data-description="Nauviale">
      <a id="region-07" xlink:href="Aveyron/nauviale.html" target="myframe" data-img="img7" data-txt=" Nauviale">
        <path id="path-07" d="M319.6,266.8 314.8,247.5 237.2,192.7 232.4,164.7 253.8,142.8 271.9,98 360.6,109.4 381,118.6 392.8,157.6 402.3,163.3 392.1,198.8 407,223.4 393.1,239.5 359.3,246 " />
        <text transform="matrix(1 0 0 1 302 182)">
          <tspan x="0" y="0" class="texte">Nauviale</tspan>
        </text>
      </a>
    </g>
    <g data-description="Pruines">
      <a id="region-08" xlink:href="Aveyron/pruines.html" target="myframe" data-img="img8" data-txt=" Pruines">
        <path id="path-08" d="M541.9,87.9 526.6,135 497.7,165.9 475.2,162 444.5,173.9 402.3,163.3 392.8,157.6 381,118.6 360.6,109.4 393.5,60.4 401.3,59.8 531.2,75.5 541.9,78.1 " />
        <text transform="matrix(1 0 0 1 434 123)">
          <tspan x="0" y="0" class="texte">Pruines</tspan>
        </text>
      </a>
    </g>
    <g data-description="Saint Christophe Vallon">
      <a id="region-09" xlink:href="Aveyron/saint_christophe_vallon.html" target="myframe" data-img="img9" data-txt=" Saint Christophe Vallon">
        <path id="path-09" d="M276,361.7 223.5,345.4 199,325 176.8,328.1 196.2,303.7 193.1,283.8 128.5,227.9 127.2,209.8 135.7,204.2 159.6,222.3 184.5,206 221.7,214.8 237.2,192.7 314.8,247.5 319.6,266.8 311.6,273.6 332.3,307.8 291.3,311.2 297,339.7 " />
        <text transform="matrix(1 0 0 1 150 276)">
          <tspan x="0" y="0" class="texte">Saint Christophe Vallon</tspan>
        </text>
      </a>
    </g>
<g data-description="Salles La Source">
  <a id="region-10" xlink:href="Aveyron/salles_la_source.html" target="myframe" data-img="img10" data-txt=" Salles La Source">
    <path id="path-10" d="M628.8,478.1 586.6,511.6 505.6,510.3 463.6,493 443.9,504 413.9,474.4 389.3,432.3 410.6,360.4 395.8,335.6 439.9,328.6 468.3,297.2 461.6,278.3 542.2,239.4 562.4,217.3 585.1,221.5 605,244.4 610,273.3 665.5,303.8 698.8,307.6 711.5,333.6 690.6,397 672.4,388.5 610.2,425.5 628.3,458.7 " />
    <text transform="matrix(1 0 0 1 501 359)">
      <tspan x="0" y="0" class="texte">Salles La Source</tspan>
    </text>
    <line id="fleche_rouge" class="texte" x1="690.5" y1="443.5" x2="550.5" y2="364.5"/>        
  </a>
</g>
    <g data-description="Valady<br>15,51 km²<br>1 509 habitants">
      <a id="region-11" xlink:href="Aveyron/valady.html" target="myframe" data-img="img11" data-txt="Valady">
        <path id="path-11" d="M389.3,432.3 375.1,438.1 348.7,427.9 285.7,386.2 276,361.7 297,339.7 291.3,311.2 332.3,307.8 354.2,308.7 395.8,335.6 410.6,360.4 " />
        <text transform="matrix(1 0 0 1 326 367)">
          <tspan x="0" y="0" class="texte">Valady</tspan>
        </text>
      </a>
    </g>
 
<!-- ////////////////////FLECHE ROUGE////////////////////////////     -->
<!--      <line id="fleche_rouge" class="texte" x1="690.5" y1="443.5" x2="550.5" y2="364.5"/>-->
<!-- ////////////////////////////////////////////////////////////     -->
 
  </svg>
        </div>
 
   <!-- Afficher ou Masquer texte La liste des Régions-->
		<details close="close">
			<summary id="masquer_liste" style="cursor:pointer;">La liste des Régions</summary>
			<!-- Fin Afficher ou Masquer texte La liste des Régions-->
			<!-- Liste -->
			<div class="map__list" id="tadiv">
				<ul class="scrollbar3" id="style-3">
					<ul class="list_ul">
<li class="bloc"><a href="../Ariège*/balsa.html" target="myframe" data-img="img1"data-txt="Balsa" id="list-01">Balsa </a></li>
<li class="bloc"><a href="../Ariège*/clairvaux_d_aveyro.html" target="myframe" data-img="img2"data-txt="Clairvaux D'Aveyro" id="list-02">Clairvaux D'Aveyro </a></li>
<li class="bloc"><a href="../Ariège*/druell.html" target="myframe" data-img="img3"data-txt="Druell" id="list-03">Druell </a></li>
<li class="bloc"><a href="../Ariège*/marcillac_vallo.html" target="myframe" data-img="img4"data-txt="Marcillac Vallo" id="list-04">Marcillac Vallo </a></li>
<li class="bloc"><a href="../Ariège*/moure.html" target="myframe" data-img="img5"data-txt="Moure" id="list-05">Moure </a></li>
<li class="bloc"><a href="../Ariège*/muret_le_chatea.html" target="myframe" data-img="img6"data-txt="Muret Le Chatea" id="list-06">Muret Le Chatea </a></li>
<li class="bloc"><a href="../Ariège*/nauvial.html" target="myframe" data-img="img7"data-txt="Nauvial" id="list-07">Nauvial </a></li>
<li class="bloc"><a href="../Ariège*/pruine.html" target="myframe" data-img="img8"data-txt="Pruine" id="list-08">Pruine </a></li>
<li class="bloc"><a href="../Ariège*/saint_christophe_vallo.html" target="myframe" data-img="img9"data-txt="Saint Christophe Vallo" id="list-09">Saint Christophe Vallo </a></li>
<li class="bloc"><a href="../Ariège*/salles_la_sourc.html" target="myframe" data-img="img10"data-txt="Salles La Sourc" id="list-10">Salles La Sourc </a></li>
<li class="bloc"><a href="../Ariège*/valad.html" target="myframe" data-img="img11"data-txt="Valad" id="list-11">Valad </a></li>
 
					</ul>
				</ul>
			</div>
		</details>
		<div id="ejs_texte"></div>
		<!-- Fin Liste --> 
		<!-- Photos aux passage zone des cartes -->
<img class="img_info" src="photos/Balsa.jpg" class="img_ville" width="300" height="200" id="img1" style="display:none;">
<img class="img_info" src="photos/Clairvaux D'Aveyro.jpg" class="img_ville" width="300" height="200" id="img2" style="display:none;">
<img class="img_info" src="photos/Druell.jpg" class="img_ville" width="300" height="200" id="img3" style="display:none;">
<img class="img_info" src="photos/Marcillac Vallo.jpg" class="img_ville" width="300" height="200" id="img4" style="display:none;">
<img class="img_info" src="photos/Moure.jpg" class="img_ville" width="300" height="200" id="img5" style="display:none;">
<img class="img_info" src="photos/Muret Le Chatea.jpg" class="img_ville" width="300" height="200" id="img6" style="display:none;">
<img class="img_info" src="photos/Nauvial.jpg" class="img_ville" width="300" height="200" id="img7" style="display:none;">
<img class="img_info" src="photos/Pruine.jpg" class="img_ville" width="300" height="200" id="img8" style="display:none;">
<img class="img_info" src="photos/Saint Christophe Vallo.jpg" class="img_ville" width="300" height="200" id="img9" style="display:none;">
<img class="img_info" src="photos/Salles La Sourc.jpg" class="img_ville" width="300" height="200" id="img10" style="display:none;">
<img class="img_info" src="photos/Valad.jpg" class="img_ville" width="300" height="200" id="img11" style="display:none;">
 
</div>		<!-- Fin Photos aux passage zone des cartes -->    
 
 
 
 
<script>
   /**
 * Script bouton afficher/masquer texte sur la carte
 */
var oTexts = $("g text, g line");S
$("#bouton_texte").on("click",function(){
  var obj = $(this);
  if( obj.text() === "Masquer le texte"){
    obj.text("Afficher le texte");
    oTexts.hide();
  }
  else {
    obj.text("Masquer le texte");
    oTexts.show();
  }
});
 
function afficheImage(id) {
  $("#" + id).show();
}
function cacheImage(id) {
  $("#" + id).hide();
}
function changeMessage(message, id, classe) {
  $("#" + id).html(message).addClass(classe);
}
 
var oGroupes = $('g[data-description]');
/**
 *  tooltip sur la carte
 */
function svgTip() {
  // style à appliquer si l'on ne passe pas par la classe
  var opts = {
    "display": "none",
    "position": "absolute",
    "top": 0,
    "left": 0,
    "padding": "1em",
    "border": "1px solid red",
    "font-size": "1em",
    "color": "#000",
    "background-color": "rgba(255,255,255,.8)",
    "pointer-events": "none"
  };
  oGroupes.each(function(id, obj) {
    var tt = $(this).data("description");
    var that = $("<div class='svgtip'>" + tt + "</div>");
    // action sur mouseover/out
    $(this).hover(function(event) {
      that.css({
        'left': event.clientX,
        'top': event.clientY + $(window).scrollTop()
      });
      that.addClass("active");
      that.slideDown(150);
    }, function() {
      that.slideUp(150);
      that.removeClass("active");
    });
    $(this).on("mousemove", function(event) {
      if (that.hasClass("active")) {
        that.css({
          'left': event.clientX,
          'top': event.clientY + $(window).scrollTop() - that.height()
        });
      }
    });
    $('body').append(that);
  });
};
new svgTip();
/**
 * Eléments <g> de la carte
 * Affichage
 * - mise en surbrillance lien de la liste
 * - surbrillance <path> (géré via CSS:hover)
 * - affichage de l'image
 * - affichage du texte
 */
oGroupes.each(function(ind, elem) {
  // récupération du <a> contenu
  var oLien = elem.firstElementChild;
  // récupération du numéro ID pour la liste
  var index = oLien.id.replace("region-", "");
  // récupération des ID pour image et texte
  var idImage = $(oLien).data("img");
  var idTexte = $(oLien).data("txt");
  // action sur mouseover/out
  $(this).hover(function() {
    // ajout classe sur lien de la liste
    $("#list-" + index).addClass("is-active");
    // affiche image et texte
    afficheImage(idImage);
    changeMessage(idTexte, "ejs_texte");
  }, function() {
    // supprime classe sur lien de la liste
    $("#list-" + index).removeClass("is-active");
    // masque image et texte
    cacheImage(idImage);
    changeMessage("", "ejs_texte");
  });
});
 
/**
  * Liens de la liste
  * Affichage des différents éléments au survol des liens de la liste
  * - mise en surbrillance lien survolé
  * - surbrillance <path>
  * - affichage de l'image
  * - affichage du texte
  */
$("a[id^='list-']").each(function(ind, elem) {
    // récupération du numéro ID
    var index = elem.id.replace("list-", "");
    // récupération des ID pour image et texte
    var idImage = $(this).data("img");
    var idTexte = $(this).data("txt");
    // action sur mouseover/out
    $(this).hover(function() {
        $("#list-" + index).addClass("is-active");
        $("#region-" + index).addClass("is-active");
        // affiche image et texte
        afficheImage(idImage);
        changeMessage(idTexte, "ejs_texte");
    }, function() {
        $("#list-" + index).removeClass("is-active");
        $("#region-" + index).removeClass("is-active");
        // masque image et texte
        cacheImage(idImage);
        changeMessage("", "ejs_texte");
    });
});
    </script>
</body>
</html>

est sa ne marche mas?????

Pourtant j'ai suivie les consigne ou alors j'ai un problème?

Max

[apdf1]

Re,

J'ai trouvé j'ai mis $ en plus!

Sa fonctionne nickel je te remercie et te souhaite un bon Noël

Max

[apdf1]

Bonjour NoSmoking

Suite au code qui fonctionne très bien, j'ai juste une question au sujet des lignes sur la carte.
Quand ma ligne passe sur deux path comme le code ci-dessous, je suis obligé de mettre cette ligne de code

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<line id="ligne_rouge" class="texte"  x1="435" y1="382" x2="515" y2="162"/>

sur les deux path 1 et 2 pour que la ligne soit entière sinon elle passe dessous le path 2

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
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="170 25 790 790" class="map__image">
	<g data-description="1ère Circonscription  <br>136 532 habitants"><a id="region-01" xlink:href="1ere_Circonscription.html" data-img="img1" data-txt=" Valérie Thomas, députés LREM de la 1<sup>ère</sup> Circonscription du Puy-de-Dôme">
      <path title=" 1<sup>ére</sup> Circonscription" d="M453.3,430.9l-5,1.9l-5.5-9.3l-8.4-1.3l2.6,3l-8.9,0l0.4-7.6l0.6-8.2l-4.7,0l-1.8,1.2l-4.9,0.4l-2.1,2.9l-2.4-2.8l-5.4-0.7l13.9-15.9l-2-1l-4.2-11.3l-11.2,1.4l-5-12.3l-15.9-1.6l-2.5-7.8l5.1-5.9l13.4-0.8l2.1,7.9l0.6,2.5l5,0.5l11.5-3l6.5,2.4l30.3-5.4l0.5-0.2l9.4-1.1l4.8,2.4l14.4,15.4l5,1.1l1.6-2l5.2,5.5l0.6,5l-3.1,13.7l-2.2,1.8l-8.5-0.6l-1.3,7.3l-12.5,8.5l0.5,5.4l4.7,6.5l8.8,6.7l8.4-0.6l9.2-5.9l4.6,4.7l-4.3,1.9l2.3,10.1l-3.9,6.9l-4,6.5l-4,3.4l-8.7-6l-5.4,5.3l-3.5,0.7l-5.8-7l-4.2-8.6l-0.5-12.2L453.3,430.9z"/>
        <text transform="matrix(1.0009 0 0 1 505.5571 152)"      class="texte"><tspan x="0" y="0">1</tspan><tspan x="10" y="0"  dy="-1ex">ére</tspan><tspan x="40" y="0">Circonscription</tspan></text>
         <line id="ligne_rouge" class="texte"  x1="435" y1="382" x2="515" y2="162"/>
          </a>
	</g>
	<g data-description="2ème Circonscription  <br>113 719 habitants"><a id="region-02" xlink:href="2eme_Circonscription.html" data-img="img2" data-txt=" Christine Pires Beaune, députés SOC de la  2<sup>ème</sup> Circonscription du Puy-de-Dôme">
      <path title=" 2<sup>éme</sup> Circonscription" d="M514.5,186l-5.3-1l-0.3-4.6l-4.9-0.3l-1.1,2.2l-4.1-6.2l-4.8,1.9l-15-0.7l-0.1,5.6l-10.9,0.1l-18.2-4.1l-5.4-5.8l-3-2.3l-6.9-0.7l-0.8-10.8l-4.8-13.1l-2.8-0.5l-9.4,6.3l-10.8,3.2l-6.3-5.5l-7.3,3.7l-5.2,0.4l-4.5-9.8l-8.3-7.1l-8-1.1l-4.7,2.3l-4.1-6l-5.1-15.6l-1.8-18.8l-4.9,2.2l-15.7-4.5l-2.8-3.7l4.7-3.1l0.5-5.8l-4.1-13.5l1.8-5.5l4.5-3.5l7.1-3.1l1.5-2.3l-3.8-7l7.7-7.6l-5.2-1.2l-6.1-5.1l-11.4,0.5l-10.9-3.6l-11.5,1.7l-3.5-4.5l-22.9,12.1l-0.8,7.9l3.2,9.9l-2.4,1.3l-0.9,10.9l-3.9,7.2l-13.3-2l-9.6-9.9l-5.6,0.6l-7.6-8l-7.8-2.9l-5.9,9.4l4.5,12.8l-4.2,6.7l0.3,5.4l-11.5,0.4l-10,4.3l-4.8,2.9l-0.8,11.1l-3.5,4.3l-2.8,10.5l-1.2,2.2l-4.3,10.2l-4.3,3.7l-5.4,1.1l-7.6-2.8l-12.3-6.6l-5.9,3.4l-9.5-10.7l-5.2-2.5l-1.5,3.6l-2-0.1l-1.6,12.3l-3.3,3.7l0.2,15.7l0.9,5l-1.1,5.7l2.4,8.4l10.5,23.7l16.6,11.4l-2.5,14.3l-2.9,15.6l2.1,7.6l7.1,8.6l-1.4,7.8l-21.5,6.9l-1.6,2.2l1.4,5.4l-9.4,5.8l0.1,5.4l-4.3,3.6l-1.1,8.3l1,2.6l7.9,3l-2.6,1.3l-23.3,19.8l-5.6,0.7l-0.2,8.4l-5.3,9.5l-5.3-0.4l-4.9-5.4l-5.1-0.1l-2.3,3.5l-10,0.2l0,7.9l3.5,3.9l-1,5.2l-7.3,0.6l-1.2,4.9l-3.6,3.8L40.3,369l-7.9,7.9l24.2,31.4l1.8,15.2l6.5,8.8l5.1-1.8l6.9,4.4l2.4,5.1l7.9,2.1l3.9,7.4l16.6,21.3l-0.9,10.6l3.9,2.7l-1.3,5.3l2.3,5l-5.9,3.8l-2.1,4.3l0,5.1l6.6,8.2l-4.1,6.9l1.1,4.3l-3.9,1.9l-15.6-1.1l-2.4,4.5l-2,22l-7.3,5.5l-1.1,5.1l6.1,12.6l7.9,8.1l4.6,9.8l11.1,2.4l7.7-16l2.7-4.2l8.4-5.2l15.3-16.5l13.5-3.5l6.6-5.2l7.3-2.1l2.9-4.2l10.2-0.9l1.1-2.4l-3.9-3.5l15.7-3.4l1.3-2.5l-2.5-4.9l9.5-5l16,8.8l4.8-2.5l0.5-2.7l0-16.3l-4.8-6.6l2.8-7.5l2.8-0.1l9-5.2l3.3-7.1l-25.4-4.4l-3.8-4.3l-2.1-8.4l5.8-9.5l6.6-4.9l1.6-5.3l6.6-11.5l1-12.6l8.7-14.3l8,2.1l8.7-6.5l10.3-0.4l5-5.2l2.3,4.2l-3.2,18.8l18.1,7.6l11.4-6.7l-1.8-16.9l13-4.8l1.6-8l13.5,3.6l9.1,6.5l8.2,1.9l8.2-6.9l5.7-5.4l7.6-2.1l-5.2-14.5l11.5-6.3l12.4,5.8l5.2-1.2l-2.5-7.8l5.1-5.9l13.4-0.8l2.1,7.9l0.6,2.5l5,0.5l11.5-3l6.5,2.4l30.3-5.4l0.5-0.2l9.4-1.1l0.7-16.3l7.5-0.1l2.9-6.8l5.1-0.1l-4-19.6l-4.4-4.1l-1.2-2.5l3.5-10.7l2.4-1.5l-5.9-7l4.3-10.1l2.6,0.1l3-4.2l7.1,1.5l0.9-5.1l1,0.7l3.3,3.9l10.5-0.5l4.8,1.9l6.7-2.8l2.5-0.9l3.7,3.7l15.5-3.8l-0.1,15.4l13.8-0.4l10.9-1.2l2.4-13.8l0.8-2l11.1-2.5l2.2-8.2l12-7.1l0.6-2.8l6.3,1.6l1.3-4.4l18.9,1.9l8.4-10.2l20.3-6.7l-2.2-6.2l-5.1,2.1l1.8-16l-2.4-7.8l4.9-2.2l-6.3-8.3l-1.8-7.2l-2.1-3.6l-5,2.9l-5.6-0.4l-6.4-5.8l-2.2-5.3l-9.6,6.2l-11.2,1.8l-7.8,8.2l-20.9,8.4l0.4-7.7l-8.9-4.5l-8.7-2.9l0.4-2.5l-5.1,2.1l-5-2.3l-4.8,2.5l-10.8-2.3L514.5,186z"/>
        <text transform="matrix(1.0009 0 0 1 228.0542 256.8862)" class="texte"><tspan x="0" y="0">2</tspan><tspan x="10" y="0"  dy="-1ex">éme</tspan><tspan x="40" y="0" >Circonscription</tspan></text>
          <line id="ligne_rouge" class="texte"  x1="435" y1="382" x2="515" y2="162"/>
          </a>
	</g>
	<g data-description="3ème Circonscription  <br>124 045 habitants"><a id="region-03" xlink:href="3eme_Circonscription.html" data-img="img3" data-txt=" Laurence Vichnievsky, députés MODEM de la  3<sup>ème</sup> Circonscription du Puy-de-Dôme">
      <path title=" 3<sup>éme</sup> Circonscription" d="M376.4,806.4l-16.8-10.2l-10.9-1.8l-9.3-16.7l-4.3-13.2l0.1-2.9l-2.4-9.7l1.3-4.8l-5.2,1.3l-4.8-2.4l-6.9-7.8l-7-3.1l-4,6.2l-7.1-4l-4.8-9.6l-13.7,1.3l-7.2-7.8L259,729l-2.6,4.8l-2.6-0.9l-10.4-0.7l-6.8-3.8l-4.9-1.3l-7.3,2.6l-7.8,6.7l-5.6-6l-2.8-7.6l-10-8.5l-1-10.9l5.7-7.3l-0.9-4.7l-8.1-0.4l-7.7,2.7l-5.1-6.4l-7.4-2.4l-7.7,1.5l-2.5-18.8l-8.1,11l-5.1,1.9l-8-1.2l-9.5-9.8l-10.3,1.8l-6.8,4.2l4.6-17.3l-12.8-2.7l-7.3,3.1l3.1-11.5l-2.8-5.9l0.3-5.3l5-9.7l-2-4.8l1.7-5l-1.7-8l1.8-2.1l-1.3-8.3l7.7-16l2.7-4.2l8.4-5.2l15.3-16.5l13.5-3.5l6.6-5.2l7.3-2.1l2.9-4.2l10.2-0.9l1.1-2.4l-3.9-3.5l15.7-3.4l1.3-2.5l-2.5-5l9.5-5l16,8.8l4.8-2.5l0.5-2.7l0-16.3l-4.8-6.6l2.8-7.5l2.8-0.1l9-5.2l3.3-7.1l-25.4-4.4l-3.8-4.3l-2.1-8.4l5.8-9.5l6.6-4.9l1.6-5.3l6.6-11.5l1-12.6l8.8-14.3l8,2.1l8.7-6.5l10.3-0.4l5-5.2l2.3,4.2l-3.2,18.8l18.1,7.6l11.4-6.7l-1.8-16.9l13-4.8l1.6-8l13.5,3.6l9.1,6.5l8.2,1.9l8.2-6.9l5.7-5.5l7.6-2l-5.2-14.5l11.5-6.3l12.4,5.8l5.2-1.2l15.9,1.6l5,12.3l11.2-1.4l4.2,11.3l2,1l-13.9,15.9l5.4,0.7l2.4,2.8l2.1-2.9l4.9-0.4l1.8-1.2l4.7,0l-1,15.9l0.5,7.5l4.7,1.4l1.7-1.9l0,9.7l1.9,1.5l-8.9,1.9l-0.7,2.3l-9,16.2l-16.4,2.4l-5.7,4.1l7.2,3.7l4.8-1.9l5.3,6.1l13.5,2.7l7.6-3.3l-0.4-8.2l1-2.6l2.7-0.2l5.6,6.1l0.7,8.3l-3.1,3.9l-0.1,8.2l4.2,6.7l2.5,14.8l4.9,13.6l-3.3,7.9l-4.6,3.2l6,16.1l10.1,6.5l18.9-12.3l7.5,10.9l-0.2,0.7l-0.9,5.5l3.4,16.4l-4.3,0.4l-4.6,0l-3,4.1l-5.7-4.7l-3.4,6.1l1.4,7l-0.6,4.9h-4.9l-2.2,7.7l4.9,7.9l0.1,0.4l-8.6,6.2l-2.4,5.1l-12.4,6.5l-10.1,9.2l-2.8-0.3l-2,1.1l1.2,4.3l4.5-2.4l6.7,3.4l9.9-0.3l3.6,3.7l4.6,1.9l0.4,2.5l-1.1,4.7l-2.5,0.2l-0.2,2.7l2.5,0.9l4.7-2.6l10.6-0.4l3.6,2.7l-6.8,8.8l-1.1,10.8l6.8,4.7l7.9-2.3l4.8,2.3l2.4,7.3l-4.5,2.7l4.6,9.1l-1.9,10.4l-6.1,8.8l14.1,12l2.1,4.9l-2.5,2.3l-4.1-3l-11.8,6.1l-3.5,4.2l2.2,4.7l-16.9,1l-6.9-2.7l-4.6,2.5l-15.4-2.4l-4,1.9l-4.6,9.9l-10.4,2.8l-3.9,3.9l1.5,10.9l-5,6.3l1.4,2.4l-12.8,6.9l-7.3,2.1L388,812l-10.8-2.9L376.4,806.4z"/>
        <text transform="matrix(1.0009 0 0 1 203.6133 597.6577)" class="texte"><tspan x="0" y="0">3</tspan><tspan x="10" y="0"  dy="-1ex">éme</tspan><tspan x="40" y="0" >Circonscription</tspan></text>
          </a>
	</g>
	<g data-description="4ème Circonscription  <br>135 362 habitants"><a id="region-04" xlink:href="4eme_Circonscription.html" data-img="img4" data-txt=" Michel Fanget, députés MODEM de la  4<sup>ème</sup> Circonscription du Puy-de-Dôme">
      <path title=" 4<sup>éme</sup> Circonscription" d="M491.6,462.4l-8.7-6l-5.4,5.3l-3.5,0.7l-5.8-7l-4.2-8.6l-0.5-12.2l-10.2-3.7l-5,1.8l-5.5-9.3l-8.4-1.3l2.6,3l-8.9,0l0.5,7.5l4.7,1.4l1.7-1.9l0.1,9.8l1.9,1.5l-8.9,1.9l-0.7,2.3l-9,16.2l-16.4,2.4l-5.7,4.1l7.2,3.7l4.8-1.9l5.3,6.1l13.5,2.7l7.6-3.3l-0.4-8.2l1-2.6l2.7-0.2l5.6,6.1l0.7,8.3l-3.1,3.9l-0.1,8.2l4.2,6.7l2.5,14.8l4.9,13.6l-3.3,7.9l-4.6,3.2l6,16.1l10.1,6.5l18.9-12.3l7.5,10.9l-0.2,0.7l-0.8,5.5l3.4,16.4l-4.3,0.4l-4.6,0l-3,4.1l-5.8-4.8l-3.3,6.1l1.4,7l-0.6,4.9h-4.9l-2.2,7.7l4.9,7.9l0.1,0.4l-8.6,6.2l-2.4,5.1l-12.4,6.5l-10.1,9.2l-2.8-0.3l-2,1.1l1.2,4.3l4.5-2.4l6.7,3.4l9.9-0.3l3.6,3.7l4.7,1.9l0.4,2.5l-1.1,4.7l-2.5,0.2l-0.2,2.7l2.5,0.9l4.7-2.6l10.6-0.4l3.6,2.7l-6.8,8.8l-1,10.8l6.8,4.7l7.9-2.3l4.8,2.3l2.3,7.3l-4.5,2.7l4.6,9.1l-1.9,10.4l-6.1,8.8l14.1,12l2.1,4.9l1.6,0.4l2.4-10.2l7.5-10l6.1,4.1l7.5-1l15.4-7.1l2.4-4l2.3-11.1l2.3-1.5l5.2,1.5l5.8,5.6l6.2,11.4l6.2-14.1l-0.2-5.3l4.5,1.4l4-2.5l6.4,9l7.1,8.3l5.2-1.6l4.9,2.3l4.8-2.4l7.7,4.9l4.1-3.6l16,1.1l2.7-0.7l1.7-5.1l9-10.2l12.3-5.9l-0.4-1.9l4.8-10.2l-0.9-1.9l-2.4,3.2l-18.6-1.1l-9.6-4l3.4-6l11.3-7l7.4,3.5l1.4-4.8l13.1-2l0.8-2.6l-7.1-11l1.8-1.5l-0.7-5.4l4.3-3.3l-6.8-8.5l0-10.5l-4.8-5.7l2.7-7.2l-1.2-2.4l-10,3l-20.1-7.3l-1.5-6.4l1.5-9.8l-0.5-7.9l1.9-7.9l-10.9-7.9l-0.7-2.7l4.6-6.8l-1.7-7.7l-5.5-5.8l-7.9-2.4l-2.5-18.3l-2.6-4.8l1.1-8.1l-8.6-10.6l-10.6,0.8l-3.1,4.3l-4.7,0.9l-1.9,5l-0.3,1.3l-10.2-0.6l-6.1-5.1l-16.1-0.6l-5.8-10l-2.7-14.3l3.6-10.7l0.1-8.5l-0.1-0.2l-0.7-2.5l9-9l4.7,1.8l8.2-7.2l2.7,0.3l6.6,5l2.7-0.3l4.9,5.6l10.4-15.1l-2.3-7l6.9-8.2l13.8,1.5l4-4l1.2-25.1l-5.3-2l-8.4,1.3l-2.9,7.6l-4.2,3.7l-6.1-3.9l-13.5,3.3l-4.7-2.5l-8.1,2.2l-2.1-5.2l3.4-9.9l-1.3-7.6l-5.5-8.6L551,366l-2.4-1.4l-11.1,16.3l-4.8,3l-0.1,2.9l7.4,16.6l-2.9,3.9l-13.1,3.2l0.5,8l-2.9,7.6l-16.1,7.4l-4.3,1.9l2.3,10.1l-3.9,6.9l-4,6.5L491.6,462.4z"/>
        <text transform="matrix(1.0009 0 0 1 476 636.9238)"      class="texte"><tspan x="0" y="0">4</tspan><tspan x="10" y="0"  dy="-1ex">éme</tspan><tspan x="40" y="0" >Circonscription</tspan></text>
          </a>
	</g>
	<g data-description="5ème Circonscription  <br>131 341 habitants"><a id="region-05" xlink:href="5eme_Circonscription.html" data-img="img5" data-txt=" André Chassaigne, députés GDR de la  5<sup>ème</sup> Circonscription du Puy-de-Dôme">
      <path title=" 5<sup>éme</sup> Circonscription" d="M826.1,501.3l-9.6-13.8l-1-7.8l3.7-9.3l-3-6.4l2.2-4.1l-7.3-3.2l-6.9-14.5l-2.7-0.2l-2.9,4.6L788,435l1.9-3.9l1.5-1.3l2.7-4.7l-5.4-6.6l-15.9-6.1l-3.9-4.1l1-4.9l9.9-5.3l8.1-23.4l-4.4-16l0.9-0.9l3.6-4.1l0.8-5.3l-4.7,0.8l-2.7-7.2l10.5-0.5l5.5-5.6l1-4.9l4.9-1.5l-8-17.6l-6.3-5.2l-4.3-7l-15.4-6.5l-0.1-0.2l-6.4-7.8l-2.6-12.5l-6.4-4.2l-15.5-3.5l-4,3.5l-3.5-18.4l-7-11.2l-7-14.2l-7.2-7.5l-6,5.2l-13.1-0.5l-0.9,2.6l-2.4-0.5l-4.4,0.2l-1.5-4.7L679,219l-7.5,1.5l-0.2,4.8l-19,0.1l-7.6,2.9l2.2,6.2l-20.3,6.7l-8.4,10.2l-18.9-1.9l-1.3,4.4l-6.3-1.6l-0.6,2.8l-12,7.1l-2.2,8.2l-11.1,2.5l-0.8,2l-2.4,13.8l-10.9,1.2l-13.8,0.4l0.1-15.4l-15.5,3.8l-3.7-3.7l-2.5,0.9l-6.7,2.8l-4.8-1.9l-10.5,0.5l-3.3-3.9l-1-0.7l-0.9,5.1l-7.1-1.5l-3,4.2l-2.6-0.1l-4.3,10.1l5.9,7l-2.4,1.5l-3.5,10.7l1.3,2.5l4.4,4.1l4,19.6l-5.1,0.2l-2.9,6.8l-7.6,0.1l-0.7,16.3l4.8,2.4l14.4,15.4l5,1.1l1.6-2l5.3,5.5l0.6,5l-3.1,13.7l-2.2,1.8l-8.5-0.6l-1.3,7.3l-12.5,8.5l0.5,5.4l4.7,6.5l8.8,6.7l8.4-0.6l9.2-5.9l4.6,4.7l16-7.4l2.9-7.6l-0.5-8l13.1-3.2l2.9-3.9l-7.4-16.6l0.1-2.9l4.8-3l11.1-16.3l2.4,1.4l0.6,7.9l5.5,8.6l1.4,7.6L555,400l2.1,5.2l8.1-2.2l4.7,2.5l13.5-3.3l6.1,3.9l4.2-3.7l2.9-7.6l8.4-1.3l5.3,2l-1.2,25.1l-4,4l-13.8-1.5l-6.9,8.2l2.3,7l-10.4,15.1l-4.9-5.6l-2.7,0.3l-6.6-5l-2.7-0.3l-8.2,7.2l-4.7-1.8l-9,9l0.7,2.5l0.1,0.2l-0.1,8.5l-3.6,10.7l2.7,14.3l5.8,10l16.1,0.6l6.1,5.1l10.2,0.6l0.3-1.3l1.9-5l4.7-0.9l3.1-4.3l10.6-0.8l8.6,10.6l-1.1,8.1l2.6,4.8l2.5,18.3l7.9,2.4l5.5,5.8l1.7,7.7l-4.6,6.8l0.7,2.7l10.9,7.9l-1.9,7.9l0.5,7.9l-1.5,9.8l1.5,6.4l20.1,7.3l10-3l1.2,2.4l-2.7,7.2l4.8,5.7l0,10.5l6.7,8.5l-4.3,3.3l0.7,5.4l-1.8,1.5l7,11l-0.8,2.5l-13.1,2l-1.4,4.8l-7.4-3.5l-11.3,7l-3.4,6l9.6,4l18.6,1.1l2.4-3.2l0.8,1.9l-4.8,10.2l0.4,1.9l3.2,13.3l8.4,7.2l14.9,3.3l4.3,3.3l4.9-2l2.7-4.8l6.7,15.7l3.9,7.1l-1.8,4.5l3.3,9l15.3,15.2l5.4-0.6l7.6-7.7l2.5-7.6l10.1-4.1l2.4-10.9l3-4.2l5.2-0.6l1.7,2l5.7,5.5l5.1,1.4l-3,7.2l4.4,1.5l6.9-0.2l7.6,1.2l5.7,5.1l7.8-0.7l1.7-1.7l9.9,5.2l2.2-1.7l5.1-5.5l-1.2-10.6l2.4-10.4l8.2-5.5l6.8,4.4l2.7,4.7l7.6-2.2l0.6,13.5l4.5-2.8l4.3,6.6l12.3,4.9l12.9-1.3l-3-10.2l1.3-11.2l-2.3-7.9l4.6-13l4.8-2.5l3.9-7.5l2.6,0.7l10.6-7l14.7-5.2l0-0.9l-1.8-4.8l8.4-3.9l-3.4-4.1l2.3-4.9l-3.2-9.8l10.2-11.7l-0.9-7.2l-6.4-4.1l-4-0.3l-0.5-2.1l-3.6-8.5l-6.8-23.8l4.5-10l-5.6-5.6l-2.9-7.3l-4.1-6.1l-13.6-14l-14.9-5.7l-7.3-7.7l-4.4-1.8l-2.3-7.6l-11.1-1.6l-7.5-4.1l-1.8-4.3l-1.7-7.5l-6.9-7.5L826.1,501.3z"/>
        <text transform="matrix(1.0009 0 0 1 523.7324 341.707)"  class="texte"><tspan x="0" y="0">5</tspan><tspan x="10" y="0"  dy="-1ex">éme</tspan><tspan x="40" y="0" >Circonscription</tspan></text>
          </a>
	</g>
</svg>

Je voulais savoir s'il y avait une possibilité de faire autrement?

Je te remercie

Max

[NoSmoking]

Pour moi cette discussion a été résolue déjà 3 fois et elle devient confuse.

Quand ma ligne passe sur deux path comme le code ci-dessous, je suis obligé de mettre cette ligne de code ...

ce n'est plus un problème de JavaScript mais un problème de SVG, même si une solution JavaScript existe mais lourde à mettre en place.

Je t'engage donc à ouvrir une nouvelle discussion sur le forum Balisage (X)HTML et validation W3C, pour ma part je ne répondrais plus dans cette discussion.