Passage de la souris sur un Path SVG

Version imprimable

Bonjour

Voila lorsque je passe sur mon path tous fonctionne mais si je passe sur le texte du path sa ne fonctionne pas, est-il possible en Css ou en Javascript de remédier à se problème?

mon

Code:

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
   .map__image {
    	position: absolute;
    	top: 90px;
    	left: -90px;
    	right: 0px;
    	bottom: 0;
    	/*cadre rouge autour de la carte*/
    	border: 1px solid red;
    	width: 940px;
    	height: 640px;
    	margin-left: 100px;
    }
    .map__image path {
    	fill: #19191f;
    	stroke: #cc4646;
    	stroke-width: 0.5px;
    	transition: fill 0.1s;
    }
    .map__image path:hover {
    	fill: #0000FF;
    	stroke: #cc4646;
    }
    .map__image svg {
    	height: 1000px;
    	width: 1020px;
    }
    .map {
    	overflow: hidden;
    }
    path~text {
    	fill: #e8e809;
    	font-size: 14px;
    }
    path:hover~text {
    	fill: #fdfefe;
    	font-weight: bold;
    	font-size: 14px;
    }
    /*Pas de nom sur la carte*/
    .texte {
    	visibility: hidden;
    }

mon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	<div class="map" id="map">
		<div class="map__image">
			<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1200 1200">
				<g>
					<a id="region-01" xlink: href="Aveyron/alpuech.html" target="myframe" data-img="img1" data-txt=" Alpuech">
						<path id="01" title="Alpuech" class="st0" d="M697.3,432.9 659.8,421.1 639.3,400.7 623.8,396.5 575.5,354.1 530.1,342.3 518.8,333 521.5,326.9 534.2,323.5 537.5,311.5 558.8,316.9 581.6,314 617,372.8 664.2,376.6 684.6,403.7 " />
						<text transform="matrix(1 0 0 1 537 338)">
							<tspan x="0" y="0" class="texte">Alpuech</tspan>
						</text>
					</a>
				</g>
				<g>
					<a id="region-02" xlink: href="Aveyron/brommat.html" target="myframe" data-img="img2" data-txt=" Brommat">
						<path id="02" title="Brommat" class="st0" d="M285.5,345.6 279,342.4 280.6,312.5 291.9,295.4 284.6,283.8 286.4,271 283.9,264.8 255.3,253 252.2,202.6 257.3,207.6 270.6,200.7 272.7,175.5 316.9,149.2 332.8,149.2 350.3,136.2 373.3,131 392.5,142.1 405.3,178.6 392.4,185.9 379.2,216.9 351.3,225.6 325.6,300.7 299.5,333.4 285.4,339.1 " />
						<text transform="matrix(1 0 0 1 298 212)">
							<tspan x="-5" y="0" class="texte">Brommat</tspan>
						</text>
					</a>
				</g>

Je vous remercie d'avance.
Max

16/12/2018, 13h33
Beginner.

Salut,

En JS c'est un problème du même genre que celui que j'avais signalé ici : #32... Cela peut être adapté...

En CSS je ne sais pas si on peut appliquer un style au path lorsque un de ses enfants (text) est survolé...
Attendons les pro du CSS...
16/12/2018, 14h10
apdf1

Salut Beginner

Oui je me rappelle. Attendons les pros ils font souvent des miracle.....

Bonne journée

Max
16/12/2018, 16h47
Beginner.

J'ai cherché à savoir si il existait un sélecteur CSS permettant de cibler le parent d'un élément eh bien apparemment il n'y en a pas encore...

Bien sûr en JS c'est faisable...
16/12/2018, 17h28
apdf1

Re,

Bon est bien je vais attendre pacifiquement les pros du JS.

Merci
16/12/2018, 19h17
Beginner.

Ah ben en JS pas besoin d'être pro...

Mais il faudrait savoir si c'est un code indépendant ou bien si tu vas l'ajouter au code de NoSmokink ?

En fait je n'ai pas compris pourquoi tu n'utilises pas le code posté au : #32 ou celui d’après qui est mieux, qu'est-ce qui te manque ?
16/12/2018, 19h58
Beginner.

Est-ce cela que tu veux : https://jsbin.com/lodahuhogu/edit?css,output ?
Car je ne suis plus sûr de savoir...

Si oui alors il y a juste du CSS, pas de JS...

hum..
en JavaScript pour atteindre le parent c'est par la => https://developer.mozilla.org/fr/doc.../parentElement

mais c'est inutile dans ce cas la, ça marche tout seul en css, faut juste coder proprement le SVG et le CSS
( pas mettre de div inutiles, l'élément SVG fait partie du DOM , et l'overflows sur un élément svg se gère avec sa viewBox, ainsi que le zoom )

Code:

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title> svg over </title>
  <style>
    svg.map__image {
      border    : 1px solid red;
      width     : 600px;
      height    : 400px;
      margin    : 20px;
      font-size : 14px;
    }
    svg.map__image path {
      fill          : #19191f;
      stroke        : #cc4646;
      stroke-width  : 0.5;
      transition    : fill 0.1s;
    }
    svg.map__image text {
      fill   : #e8e809;
    }
    svg.map__image g:hover path {
      fill   : #0000FF;
      stroke : #cc4646;
    }
    svg.map__image g:hover text {
      fill        : #fdfefe;
      font-weight : bold;
    }
  </style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="200 100 600 400" class="map__image">
    <g>
      <a id="region-01" xlink: href="Aveyron/alpuech.html" target="myframe" data-img="img1" data-txt=" Alpuech">
        <path id="01" title="Alpuech" class="st0" d="M697.3,432.9 659.8,421.1 639.3,400.7 623.8,396.5 575.5,354.1 530.1,342.3 518.8,333 521.5,326.9 534.2,323.5 537.5,311.5 558.8,316.9 581.6,314 617,372.8 664.2,376.6 684.6,403.7 " />
        <text transform="matrix(1 0 0 1 537 338)">
          <tspan x="-9" y="0" class="texte">Alpuech</tspan>
        </text>
      </a>
    </g>
    <g>
      <a id="region-02" xlink: href="Aveyron/brommat.html" target="myframe" data-img="img2" data-txt=" Brommat">
        <path id="02" title="Brommat" class="st0" d="M285.5,345.6 279,342.4 280.6,312.5 291.9,295.4 284.6,283.8 286.4,271 283.9,264.8 255.3,253 252.2,202.6 257.3,207.6 270.6,200.7 272.7,175.5 316.9,149.2 332.8,149.2 350.3,136.2 373.3,131 392.5,142.1 405.3,178.6 392.4,185.9 379.2,216.9 351.3,225.6 325.6,300.7 299.5,333.4 285.4,339.1 " />
        <text transform="matrix(1 0 0 1 298 212)">
          <tspan x="-5" y="0" class="texte">Brommat</tspan>
        </text>
      </a>
    </g>
  </svg>
</body>
</html>

Bonjour psychadelic,

Sa fonctionne Nickel c'est plus court et plus propre que mon code.
J'ai ajouté deux trois morceau de code pour finaliser mon programme et je me suis aperçu que le tooltip ne fonctionne pas sur le texte?
Mon code avec jquery:

Code:

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title> svg over </title>
 
 
	<!--  tooltip sur la carte-->
    <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;
    }
    /* 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>
</head>
<body>
 
    	<!--   Afficher ou maquer le texte sur la Carte   -->
	<table class="bt_afficher" border="0" width="10%">
		<tr>
			<td> <span class="bt_texte" id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher 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>
					<a id="region-01" xlink: href="Aveyron/balsac.html" target="myframe" data-img="img1" data-txt=" Balsac">
						<path id="01" title="Balsac" 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>
					<a id="region-02" xlink: href="Aveyron/clairvaux_d_aveyron.html" target="myframe" data-img="img2" data-txt=" Clairvaux D'Aveyron">
						<path id="02" title="Clairvaux D'Aveyron" 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>
					<a id="region-03" xlink: href="Aveyron/druelle.html" target="myframe" data-img="img3" data-txt=" Druelle">
						<path id="03" title="Druelle" 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>
					<a id="region-04" xlink: href="Aveyron/marcillac_vallon.html" target="myframe" data-img="img4" data-txt=" Marcillac Vallon">
						<path id="04" title="Marcillac Vallon" 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>
					<a id="region-05" xlink: href="Aveyron/mouret.html" target="myframe" data-img="img5" data-txt=" Mouret">
						<path id="05" title="Mouret" 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>
					<a id="region-06" xlink: href="Aveyron/muret_le_chateau.html" target="myframe" data-img="img6" data-txt=" Muret Le Chateau">
						<path id="06" title="Muret Le Chateau" 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>
					<a id="region-07" xlink: href="Aveyron/nauviale.html" target="myframe" data-img="img7" data-txt=" Nauviale">
						<path id="07" title="Nauviale" 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>
					<a id="region-08" xlink: href="Aveyron/pruines.html" target="myframe" data-img="img8" data-txt=" Pruines">
						<path id="08" title="Pruines" 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>
					<a id="region-09" xlink: href="Aveyron/saint_christophe_vallon.html" target="myframe" data-img="img9" data-txt=" Saint Christophe Vallon">
						<path id="09" title="Saint Christophe Vallon" 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>
					<a id="region-10" xlink: href="Aveyron/salles_la_source.html" target="myframe" data-img="img10" data-txt=" Salles La Source">
						<path id="10" title="Salles La Source" 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>
					<a id="region-11" xlink: href="Aveyron/valady.html" target="myframe" data-img="img11" data-txt=" Valady">
						<path id="11" title="Valady" 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 le texte sur la carte /////////////////-->
    <script>
        function afficher_cacher(e) {
  document.getElementById('bouton_texte').innerHTML = (document.getElementById('bouton_texte').innerHTML == "Masquer le texte")? "Afficher le texte":"Masquer le texte"; 
  var elts = document.getElementsByClassName(e);
  var nbre_elts = elts.length;
 
  for( var i=0; i<nbre_elts; i++) {
    elts[i].style.visibility = (elts[i].style.visibility === "hidden" || elts[i].style.visibility === "" ) ? "visible":"hidden";
  }
}
     </script>
 
    	<!-- /////////////////////////// tooltip sur la carte//////////////////////////////-->
 
    <script>
    function svgTip(opts) {
  opts = opts || {};
  opts.fontsize = opts.fontsize || "24px";
  opts.padding  = opts.padding || "2px";
//  opts.bgcolor  = opts.bgcolor  || "#000";
  opts.color    = opts.color  || "#fff";
//  opts.opacity  = opts.opacity || 0.6;
  
  $.each( $('[title]', 'svg'), function(id, obj) {
    var tt     = $(this).attr("title"),
        that   = $("<div class='svgtip'>" + tt + "</div>");
    
    that.css({'position': "absolute", 
              'top': 0, 
              'left': 0,
              'display': "none",
              'background-color': opts.bgcolor,
              'color': opts.color,
              'padding': opts.padding,
              'font-size': opts.fontsize,
              'opacity': opts.opacity,
              'pointer-events' : 'none'
             });
    
    $(this).hover(function(event) {
      that.css({'left': event.clientX, 'top': event.clientY + $(window).scrollTop()});
      that.addClass("active");
      that.slideDown(100);
    }, function() {
      that.slideUp(100);
      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({fontsize: "20px", padding:"30px"});
 
function lll (msg) { $('#debug').append(msg + "<br/>");}
    </script>
 
</body>
</html>

Je te remercie

Max

et d'ou sort ce tooltip ?
créa perso inspiré de quelque chose ?
on peut savoir quoi ?

Pour moi il fonctionne, même si c'est du jQuery et que visiblement il manque 2 ou 3 trucs dedans pour qu'il puisse utiliser tout ce pour quoi il est programmé; mais si tu imagines que je peux deviner ce qu'il est censé faire, alors on va pas être copains.

sinon tu dois avoir un message dans le debugger (touche F12)

Code:

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
<!DOCTYPE html>
<html lang="fr">
 
<head>
  <meta charset="UTF-8" />
  <title> svg over </title>
 
  <!--  tooltip sur la carte -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.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*/
    svg.textes_VisuOff tspan {
      visibility: hidden;
    }
 
    /* Fin de Carte */
 
    #bt-afficher {
      display      : block;
      margin-top   : 55px;
      margin-left  : 10px;
      padding-left : -100px;
      border       : 0;
      margin-left  : 10px;
      color        : #e8e809;
      cursor      : pointer;
    }
    #bt-afficher:hover {
      font-size: 18px;
      color: #1af508;
    }
  </style>
</head>
 
<body>
 
  <bouton id="bt-afficher">Afficher le texte</bouton>
 
  <svg  viewBox="0 50 660 660" preserveAspectRatio="none"  class="map__image textes_VisuOff">
    <g>
      <a id="region-01" xlink: href="Aveyron/balsac.html" target="myframe" data-img="img1" data-txt=" Balsac">
        <path id="01" title="Balsac" 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">Balsac</tspan>
        </text>
      </a>
    </g>
    <g>
      <a id="region-02" xlink: href="Aveyron/clairvaux_d_aveyron.html" target="myframe" data-img="img2" data-txt=" Clairvaux D'Aveyron">
        <path id="02" title="Clairvaux D'Aveyron" 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">Clairvaux D'Aveyron</tspan>
        </text>
      </a>
    </g>
    <g>
      <a id="region-03" xlink: href="Aveyron/druelle.html" target="myframe" data-img="img3" data-txt=" Druelle">
        <path id="03" title="Druelle" 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">Druelle</tspan>
        </text>
      </a>
    </g>
    <g>
      <a id="region-04" xlink: href="Aveyron/marcillac_vallon.html" target="myframe" data-img="img4" data-txt=" Marcillac Vallon">
        <path id="04" title="Marcillac Vallon" 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">Marcillac Vallon</tspan>
        </text>
      </a>
    </g>
    <g>
      <a id="region-05" xlink: href="Aveyron/mouret.html" target="myframe" data-img="img5" data-txt=" Mouret">
        <path id="05" title="Mouret" 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">Mouret</tspan>
        </text>
      </a>
    </g>
    <g>
      <a id="region-06" xlink: href="Aveyron/muret_le_chateau.html" target="myframe" data-img="img6" data-txt=" Muret Le Chateau">
        <path id="06" title="Muret Le Chateau" 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">Muret Le Chateau</tspan>
        </text>
      </a>
    </g>
    <g>
      <a id="region-07" xlink: href="Aveyron/nauviale.html" target="myframe" data-img="img7" data-txt=" Nauviale">
        <path id="07" title="Nauviale" 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">Nauviale</tspan>
        </text>
      </a>
    </g>
    <g>
      <a id="region-08" xlink: href="Aveyron/pruines.html" target="myframe" data-img="img8" data-txt=" Pruines">
        <path id="08" title="Pruines" 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">Pruines</tspan>
        </text>
      </a>
    </g>
    <g>
      <a id="region-09" xlink: href="Aveyron/saint_christophe_vallon.html" target="myframe" data-img="img9" data-txt=" Saint Christophe Vallon">
        <path id="09" title="Saint Christophe Vallon" 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">Saint Christophe Vallon</tspan>
        </text>
      </a>
    </g>
    <g>
      <a id="region-10" xlink: href="Aveyron/salles_la_source.html" target="myframe" data-img="img10" data-txt=" Salles La Source">
        <path id="10" title="Salles La Source" 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">Salles La Source</tspan>
        </text>
      </a>
    </g>
    <g>
      <a id="region-11" xlink: href="Aveyron/valady.html" target="myframe" data-img="img11" data-txt=" Valady">
        <path id="11" title="Valady" 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">Valady</tspan>
        </text>
      </a>
    </g>
  </svg>
 
  <script>
////////////////// Script  Bouton afficher/masquer le texte sur la carte /////////////////
    const
      lib_Affichage = ['Afficher le texte','Masquer le texte']
      ;
    let
      bt_afficher   = document.querySelector('#bt-afficher'),
      SVG_MAP       = document.querySelector('svg')
      ;
 
 
    bt_afficher.onclick = function(e)
    {
      let ref_affichage = (SVG_MAP.classList.toggle('textes_VisuOff')) ? 0 : 1; 
      bt_afficher.textContent = lib_Affichage[ ref_affichage ];
    }
 
/////////////////////////// tooltip sur la carte//////////////////////////////-->
 
    function svgTip(opts) {
      opts = opts || {};
      opts.fontsize = opts.fontsize || "24px";
      opts.padding = opts.padding || "2px";
      //  opts.bgcolor  = opts.bgcolor  || "#000";
      opts.color = opts.color || "#fff";
      //  opts.opacity  = opts.opacity || 0.6;
 
      $.each($('[title]', 'svg'), function (id, obj) {
        var tt = $(this).attr("title"),
          that = $("<div class='svgtip'>" + tt + " le 'tooltip'  fonctionne bien " + "</div>");
 
        that.css({
          'position': "absolute",
          'top': 0,
          'left': 0,
          'display': "none",
          'background-color': opts.bgcolor,
          'color': opts.color,
          'padding': opts.padding,
          'font-size': opts.fontsize,
          'opacity': opts.opacity,
          'pointer-events': 'none'
        });
 
        $(this).hover(function (event) {
          that.css({
            'left': event.clientX,
            'top': event.clientY + $(window).scrollTop()
          });
          that.addClass("active");
          that.slideDown(100);
        }, function () {
          that.slideUp(100);
          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({
      fontsize: "20px",
      padding: "30px"
    });
 
    function lll(msg) {
      $('#debug').append(msg + "<br/>");
    }
  </script>
</body>
</html>

ps : j'ai un peu corrigé ton code, mais j'ai laissé ton erreur avec viewBox qui n'est pas en phase avec la partie css.
width: 940px; => 660
height: 640px; => 660
les proportions ne sont pas cohérentes. ( j'ai mis le preserveAspectRatio="none" pour que tu t'en rende compte )

Salut psychadelic,

Non je pense que l'on ne c'est pas compris. Tous fonctionne bien mais quand j'ai ajouté le tooltip sa fonctionne, mais si je passe sur le texte sa ne fonctionne pas. le code du Tooltip est celui ci en dehors du jQuery.

Code:

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
  function svgTip(opts) {
      opts = opts || {};
      opts.fontsize = opts.fontsize || "24px";
      opts.padding = opts.padding || "2px";
      //  opts.bgcolor  = opts.bgcolor  || "#000";
      opts.color = opts.color || "#fff";
      //  opts.opacity  = opts.opacity || 0.6;
 
      $.each($('[title]', 'svg'), function (id, obj) {
        var tt = $(this).attr("title"),
          that = $("<div class='svgtip'>" + tt + " le 'tooltip'  fonctionne bien " + "</div>");
 
        that.css({
          'position': "absolute",
          'top': 0,
          'left': 0,
          'display': "none",
          'background-color': opts.bgcolor,
          'color': opts.color,
          'padding': opts.padding,
          'font-size': opts.fontsize,
          'opacity': opts.opacity,
          'pointer-events': 'none'
        });
 
        $(this).hover(function (event) {
          that.css({
            'left': event.clientX,
            'top': event.clientY + $(window).scrollTop()
          });
          that.addClass("active");
          that.slideDown(100);
        }, function () {
          that.slideUp(100);
          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({
      fontsize: "20px",
      padding: "30px"
    });
 
    function lll(msg) {
      $('#debug').append(msg + "<br/>");
    }

je voudrai savoir pourquoi? à tu une idée?

Je n'arrive pas être cohérent entre le viewBox et le CSS pourquoi je ne s'est pas???

Max

17/12/2018, 16h15
psychadelic

merci, je sais reconnaître la partie de code du ton toolTip, mais je peux pas deviner ce qu'il est censé faire de manière correcte, surtout si tu n'explique pas ce qu'il est censé faire, ou me montrer un exemple de son fonctionnement correct car amha tu l'a recopié de quelque part, mais de manière incomplète.

pour le viewBox, la doc n'est pas tres compliquée à comprendre => https://developer.mozilla.org/fr/doc...ribute/viewBox
17/12/2018, 16h24
apdf1

Re,

Citation:

merci, je sais reconnaître la partie de code du ton toolTip

Oui je sais bien.

Si tu prend le code et que tu passe sur un path d'une région le tooltip fonctionne mais si tu passe sur le texte il ne fonctionne pas?
17/12/2018, 16h40
psychadelic

et ou est passée la classe css svgtip ?
17/12/2018, 16h42
apdf1

je ne sais pas?
17/12/2018, 16h54
NoSmoking

Bonjour,
encore une de tes discussions qui va durer avec plein de non dits :aie:

Je ne ferais donc que ce commentaire : revoir la façon de récupérer les éléments avec $, cela concerne cette ligne :

Code:

$.each($('[title]', 'svg'), function (id, obj) {

Pour info, la récupération ce fait suivant la syntaxe suivante

Code:

var group = $("selecterur1, selecteur2, selecteur3")

et pas autrement !

Pour le reste il a beaucoup de choses qui t'ont déjà été dites et que tu ne veux pas prend pas en compte.
17/12/2018, 16h57
psychadelic

Citation:

Envoyé par apdf1

Si tu prend le code et que tu passe sur un path d'une région le tooltip fonctionne mais si tu passe sur le texte il ne fonctionne pas?

tel que ce code est écrit, cela correspond à son mode de fonctionnement.
Je ne suis pas madame Irma, et je ne peux pas deviner que tu appelles cela un mauvais fonctionnement.

pourquoi tu ne réponds pas à ma question sur l'origine de ce code? c'est un secret militaire ?
17/12/2018, 17h02
apdf1

Il y a aucun secret militaire c'est un code que j'ai récupérer sur le net et que j'essaye de mettre a mon code voila!
17/12/2018, 17h40
psychadelic

et ben t'a pas tout bien récupéré, parce que ton code est incomplet.

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

Code:

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
function svgTip(opts) {
  opts = opts || {};
  opts.fontsize = opts.fontsize || "12px";
  opts.padding  = opts.padding || "2px";
  opts.bgcolor  = opts.bgcolor  || "#000";
  opts.color    = opts.color  || "#fff";
  opts.opacity  = opts.opacity || 0.6;
 
  $.each( $('[title]', 'svg'), function(id, obj) {
    var tt     = $(this).attr("title"),
        that   = $("<div class='svgtip'>" + tt + "</div>");
 
    that.css({'position': "absolute", 
              'top': 0, 
              'left': 0,
              'display': "none",
              'background-color': opts.bgcolor,
              'color': opts.color,
              'padding': opts.padding,
              'font-size': opts.fontsize,
              'opacity': opts.opacity,
              'pointer-events' : 'none'
             });
 
    $(this).hover(function(event) {
      that.css({'left': event.clientX, 'top': event.clientY + $(window).scrollTop()});
      that.addClass("active");
      that.slideDown(100);
    }, function() {
      that.slideUp(100);
      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({fontsize: "11px", padding:"10px"});
 
 
function lll (msg) { $('#debug').append(msg + "<br/>");}

Avec 2.1.3_jquery.min.js

Voila

Citation:

Envoyé par psychadelic

... parce que ton code est incomplet.

Non il est bel et bien complet !

Citation:

Envoyé par apdf1

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:

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:

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.

17/12/2018, 19h27
psychadelic
Citation:
Envoyé par apdf1

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

Code:

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.

Citation:

Envoyé par NoSmoking

Non il est bel et bien complet !

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

Citation:

Envoyé par psychadelic

et ou est passée la classe css svgtip ?
17/12/2018, 21h17
NoSmoking

Citation:

Envoyé par psychadelic

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 ...)
17/12/2018, 22h03
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" ? :roll:
18/12/2018, 05h05
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

Citation:

Envoyé par apdf1

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:

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:

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:

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 ;)

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 !:ptdr:
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 :

Citation:

• 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:

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

Citation:

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 :mrgreen:

Citation:

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:

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:

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:

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:

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:

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à.

19/12/2018, 13h41
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
19/12/2018, 15h19
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 !
19/12/2018, 16h04
apdf1

Re,

EXCUSE MOI.....

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

Un grand Merci

Max

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:

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

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

Code:

<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:

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:

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

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

Pour résumer :

Code:

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();
  }
});

Salut NoSmoking

J'ai fait ceci:

Code:

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

24/12/2018, 13h21
apdf1

Re,

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

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

Max

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:

<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:

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

30/12/2018, 08h50
NoSmoking

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

Citation:

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.