Passage de la souris sur un Path SVG

**apdf1** · 16/12/2018, 06h16

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
   .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 HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	<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

**Beginner.** · 16/12/2018, 13h33

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

**apdf1** · 16/12/2018, 14h10

Salut Beginner

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

Bonne journée

Max

**Beginner.** · 16/12/2018, 16h47

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

**apdf1** · 16/12/2018, 17h28

Re,

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

Merci

**Beginner.** · 16/12/2018, 19h17

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 ?

**Beginner.** · 16/12/2018, 19h58

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

**psychadelic** · 17/12/2018, 02h46

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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>

**apdf1** · 17/12/2018, 06h36

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!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

**psychadelic** · 17/12/2018, 14h47

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!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 )

**apdf1** · 17/12/2018, 15h39

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 :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
  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

**psychadelic** · 17/12/2018, 16h15

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

**apdf1** · 17/12/2018, 16h24

Re,

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?

**psychadelic** · 17/12/2018, 16h40

et ou est passée la classe css svgtip ?

**apdf1** · 17/12/2018, 16h42

je ne sais pas?

**NoSmoking** · 17/12/2018, 16h54

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

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

Code :

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

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

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

Code :

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

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.

**psychadelic** · 17/12/2018, 16h57

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 ?

**apdf1** · 17/12/2018, 17h02

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!

**psychadelic** · 17/12/2018, 17h40

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

**apdf1** · 17/12/2018, 17h56

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

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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

Passage de la souris sur un Path SVG

JavaScript

Discussions similaires

Partager

Partager