Discussion :

[apdf1]

Bonjour

Dans mon code lorsque je passe sur une forme un texte s'affiche et une photo la représentante, avec ce code:

Code html :

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

 <g><a id="region-01"  xlink:href="europe/france/1ére_circonscription_circonscription.html" target="myFrame" onmouseover="afficher_image('img1');" onmouseout="cacher_image('img1');">

J'ai une liste de nom des forme lorsque je passe sur le texte s'affiche la forme mais pas l'image avec ce code

Code html :

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

<li class="bloc"><a href="2éme_Circonscription.html" target="myFrame" onMouseOver="ChangeMessage('2éme Circonscription','ejs_texte','2éme Circonscription')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-02">2éme Circonscription</a></li>

Je voudrais associer les deux code pour qu'il puisse afficher la forme et l'image

Mon code au complet;

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
            <g><a id="region-01"  xlink:href="europe/france/1ére_circonscription_circonscription.html" target="myFrame" onmouseover="afficher_image('img1');" onmouseout="cacher_image('img1');">                  
            <path id="01" title="1ére Circonscription" d="M398.5,337.7l-8.4-0.6l-13.1-6.2l-5.4,1.3l-2.2,5.1l-2.8,0.4l-9.2-6l0.7-5.8l-2.3-5.4l-15.1-9l-0.4-0.2l-6.6-9.6l-17.1-11l-9.4-14l5.7,1.2l19.4-6l7.2-4.9l8.3,1.4l3.3-4.7l-1.6-8l-8.1-14l24.1-15.5l1-10.8l5.1-2.7l-14.6-22l-7.3-4.1l-0.4-11.7l-2.5-0.6l-1.1,2.3l-4.8-6.7l-19.9-10.8l-1.6-5.4l1.4-5.5l-6.9-5l7.3-3.9l-3.4-13l1.4-5.2l7.9,2.3l7.1-17.5l-12.9-8l-0.6-13.2l17.7-15.3l2.9-7.9l10.7-4.7l6.9-4.8l-0.9-5.5l4.5-3.5l8.1-2.6l5.1,1.7l7.3,0.4l4.3-9.4l11.5,0.4l9.6,5.4l11.3-2.4l6.6,5.4l2.6-1.3l3.2,18.5l7,12.6L459,88.4l12.2,3.8l14.1,4.8l10.3,14.5l1.3,1.7l10.5,14.4l21.4,10.2l6.8-3.7l6.2-5.7l1.5-5.4l2.7-0.8l14.8-8.6l5.1-6.9l8.3,0.8l0.2-0.1l8.5-0.6l3.7,10.9l7.8,12l17.3,3l5.1-3l5.5-1.9l6.2-9.7l2-8.4l5.4-2.1l14.2,3.2l11.3-0.9L659,118l1.1,5.5l10.1,4.2l2.4,4.9l0,8.5l-4.1,4l0.1,5.5l-2.6,1.2l5.2,2.7l2.4,5.3l16.1,0.6l2-1.8l0.1-5.6l19.4-20.6l8-1.9l4.9,6.7l2.9,0l3.7-4.3l3.2-4.5l-6.3-13l-0.7-14.1l12.2,5.4l4.7-5.9l2.2,4.9l8.7-7.1l-10.3-20.2l8.5-11.3l5.5,9.3L770,75l4.3,3.7l-3.8,7.2l8.6,14l0,14l7.8,2.7l2.5,13.8l10,4.6l-1.5,8.3l14.9,9.2l2,5.5l0.1,2.5l2.9,5.6l2.6,8l4.1,3.8l4.3,3.9l-0.3,2.9l-5.7,10.1l3.5,4.4l8.6,1.4l2.6,16.6l0.8,6.6l0.3,13.1l-3.9,4.9l-0.9,5.5l5.3,6.8l8.1,2.8l8.3-2.4l4.3,3.5l1.7,5.3l7.9,0.8l4.8,6.4l5.2-0.8l14.6-9.2l5.4,6.3l-3.6,4.6l2.8,4.5l0.4,0.1l5.4-2l5,2.2l-2,14.3l2.8,4.9l15.7,7.3l3.6-3.8l2.4-5.2l7.8-3.7l10.3,4.3l13.8,0.3l-3.4,9.8l7.4,0.7l-8.2,11.5l0.8,8.5l-7.5,8.1l2.4,5.2l-4.8,1.5l-5.6,5.8l-7.9,2.1l-4.4-16.4l-9.8-10l-4.5,3.5l-2.2,8.1l-5.4-1.3l-3.3,7.8l3.5,7.4l-0.5,5.5l-6.2,8l-15.1,7.4l-2.9,0.2l-2.5-5.2l-5.8-8.9l-10.1,3.8l-3.4-9.8l-5.2-2l-6.3,5.5l-10.5-4.3l-9.6,5.3l-3.3-7.7l-10.6,2.9l-5-2.8l2.6-10.8l-4.6-2.9l0.8-2.8l-2.9,0.6l-2.8,5.1l-8.6,1.5l-12.9,6.9l-2.4,5.3l2.2,4.9l-2.2,1.7l-11.5-7.7l-2.6,0.8l-1.5,5.3l-8.4-1.2l-5.7-9.8l-8.2,1.6l-8.2-11.1l-10.6,8.4l-2.1,7.8l-5,1.3l4.8,13.4l-2.8,16.5l-5,2.1l-8.5-1.5l-5.3,2.5l-13-6l0.1,2.4l-8,4.8l-3.6,7.3l0.9,5.4l3.7,4l2.3-1.5l13.4,16.6l7.5,4.9l7.3,4l-0.3,14.3l4.2,7.6l10.3,15.1l2.6,0.6l2.8,0.4l-3.3,7.7l1.8,2.2l-6.2,8.8l-7.6,3.3l-1.2,8.3l-7.8,1.5l-0.1,14l5.3-1.2l4.4,3l4.7,15.3l-2.2,1.9l-11.7,6.6l-5.6,0.2l-7.3,4.4l-6.2,5.4l-10.5,0.5l-6.5-4.3l-2.5,0.9l-10,9.5l-3.9,3.9l-7.9,2.5l-0.4-5.5l3.6-7.3l-1-13.7l2.5-4.7l-18.6,1.7l-4.6-2.7l-8.1-30.8l-17.6-9.2l-2.8-0.1l-4.2,5.5l-8.4-0.9l-1.3-2.6l-6.1,9.4l2.2,7.7l-3.4,4.4l-12.8,2.4l-7-3.2l4.4,19.7l-3.7,7.6l-10.2,8.4l-3,10l-4.4,4.8l-10.4,3.1l-12.9-6l-5,2.1l-8.1,11.1l-10.1-9.8l-5.6-0.4l-0.1-7.4l-4.1-2.1l-9.3-4.9l-3.1-5.3l-2.5,1.4l-8.5-7.1l3.9-16.1l-7.6-11.4l-9.8-4.5l1.4-7.6l-4.2-6.8l-4.9,6.4l-2.8,0.2l-6-5.6l-6.6-11.9l-2.2-1.5l-7.6,2.4l-4.6-2.6l-0.9-5.8l3.9-14.1l11-11.8l3.4-10.1l-5.5-6.1l2.1-5l-5.2-6.6l-4.8-3.2l-0.3-5.8l-2.2-1.9l-11.5-0.2l-7.8-3.7l2-13.7l2.8-4.8l-1-5.4l-0.4-5l-6.5-11.9l4.1-15.8l5.4-1.3L398.5,337.7z"/>
               <text transform="matrix(1.0064 0 0 1 567.1992 288.5073)" ><tspan x="-40" y="0" class="texte">1</tspan><tspan x="-30" y="0" class="texte" dy="-1ex">ére</tspan><tspan x="0" y="0" class="texte">Circonscription</tspan></text>
                </a></g>
            <g><a id="region-02"  xlink:href="europe/france/2éme_circonscription_circonscription.html" target="myFrame" onmouseover="afficher_image('img2');" onmouseout="cacher_image('img2');">                  
            <path id="02" title="2éme Circonscription" d="M223.9,111l7.1-8.6l8.4-0.9l1-14.1l14.9-7.5l2.2,1.5l5.4,13.1l6.5,5.5l2,5.2l4.7-2.9l4.7,1.8l4.6-2.9l6.2-9.3l19.7-1.5l5.3,6l5.2,1.3l12.9,8l-7.1,17.5l-7.9-2.3l-1.4,5.2l3.4,13l-7.3,3.9l6.9,5l-1.4,5.5l1.6,5.4l19.9,10.8l4.8,6.7l1.1-2.3l2.5,0.6l0.4,11.7l7.3,4.1l14.6,22l-5.1,2.7l-1,10.8l-24.1,15.5l8.1,14l1.6,8l-3.3,4.7l-8.3-1.4l-7.2,4.9l-19.4,6l-5.7-1.2l9.3,14l17.1,11l6.6,9.6l0.4,0.2l15.1,9l2.3,5.4l-0.7,5.8l9.2,6l2.8-0.4l2.2-5.1l5.4-1.3l13.1,6.2l8.4,0.6l4,4.3l-5.4,1.3L393,359l6.5,11.9l0.4,5l1,5.4l-2.8,4.8l-2.1,13.7l7.8,3.7l11.5,0.2l2.2,1.9l0.3,5.8l4.8,3.2l5.2,6.6l-2.1,5l5.5,6.1l-3.4,10.1l-11,11.8l-3.9,14.1l0.9,5.8l4.6,2.6l7.6-2.4l2.2,1.5l6.6,11.9l6,5.6l2.8-0.2l4.9-6.4l4.2,6.8l-1.4,7.6l9.8,4.5l7.6,11.4l-3.9,16.1l8.5,7.1l2.5-1.4l3.1,5.3l9.3,4.9l4.1,2.1l0.1,7.4l-2.6-0.2l-11.9,10.1l3.6,4.3l-6.3,9.7l3.8,13.5l-3.3,4.7l1.3,0.8l-1.2,4.6l5,1.5l-3.1,4.6l2.5,7.6l-6.5,4.3l2.3,10.8l-7-0.7l-0.8-11l-4.9-13.3l-2.8-0.5l-9.6,6.4l-11,3.2l-6.5-5.6l-7.5,3.8l-5.3,0.4l-4.6-10l-8.5-7.2l-8.2-1.1l-4.8,2.3l-4.2-6.1l-5.2-15.8l-1.9-19.2l-5,2.2l-16-4.5l-2.8-3.8l4.8-3.1l0.5-5.9l-4.2-13.7l1.8-5.6l4.6-3.6l7.2-3.2l1.5-2.4l-3.9-7.2l7.9-7.7l-5.3-1.2l-6.3-5.2l-11.7,0.6l-11.2-3.7l-11.7,1.7l-3.6-4.6l-23.4,12.3l-0.9,8l3.3,10.1l-2.5,1.3l-1,11.1l-4,7.3l-13.6-2l-9.9-10l-5.7,0.6l-7.8-8.2l-8-2.9l-6,9.5l4.6,13l-4.3,6.8l0.3,5.4l-11.8,0.4l-10.2,4.4l-4.9,2.9l-0.8,11.3l-3.5,4.4l-2.8,10.7l-1.3,2.2l-4.4,10.3l-4.4,3.7l-5.6,1.1l-7.8-2.8l-12.6-6.7l-6.1,3.4l-9.7-10.9l-5.3-2.6l-3.6-26l-10-1.6l-7.7-7.2l-0.1-7.7l-3.8-7.1l-3.8-29.7l0.6-0.7l-15.8-8.8l-6.4-15.6l1-5.5l0.4-2.9l-5.8-6.2l-15.7-7.2l-5.5,1.4l-4.3,7.3l-2.7-0.7l-3.3-10.5l2.9-10.1l-18.8-17.8l-1.2-0.3l-8.9,16l-2.5,1.3L40,434.1l-13.7-1.5L15,424.7l-1.7-5.3l-5.5-1.2l3.3-4.4l1-7.4l7.9-7.6l8,0l-0.4-2.7l-2.9-7.8l-10.9,2l-6.7-4.8l-8.1-1.2l-1.2-2.5l-3.7-18.6l2.1-1.8l-1.9-5.4l1.3-2.6l-1.5-5.7l3.6-20.1l12-20.1l6.7,5.8l6-4.1l1.3-7l-2.7-4.9l5.3-9.8l9.9-10.1l9.8-5.6l9.1,0.1l17.6-2.1l7.6-4.3l5.8,0.6l4.7,3.5l14-4.6l7.2-5.2l7.9,1.3l0,5.6l2.1,1.9l5.5-1.1l3.4-4.5l5.5-0.5l6.7,8.1l23-15.7l19.9-10.8l1.3-2.5l-4.4-7.3l1.5-8.1l-5.7-18.7l-8.4,0.6l-3.8-10.1l-5.2-2.2l11.7-6.3l-2.3-7.9l6.8-8.7l-1.9-8.2l-15.1-4.9l2.1-5.7l20.6-8.4l0.5,5.6l9.8,5l4.4-10.2l0.2-2.8l-5.9-5.9l1.1-8.4l2.7-0.8l11.5,1.1l4.7-7l12.5-6.1L223.9,111z"/>
               <text transform="matrix(1.0064 0 0 1 188.2813 362.7324)" ><tspan x="-40" y="0" class="texte">2</tspan><tspan x="-30" y="0" class="texte" dy="-1ex">éme</tspan><tspan x="10" y="0" class="texte">Circonscription</tspan></text>            
                </a></g>
            <g><a id="region-03"  xlink:href="europe/france/3éme_circonscription_circonscription.html" target="myFrame" onmouseover="afficher_image('img3');" onmouseout="cacher_image('img3');">                  
            <path id="03" title="3éme Circonscription" d="M690.7,544.3l-10.5,0.5l-6.5-4.3l-2.5,0.9l-10,9.5l-3.9,3.9l-7.9,2.5l-0.4-5.5l3.6-7.3l-1-13.7l2.5-4.7l-18.6,1.7l-4.6-2.7l-8.1-30.8l-17.6-9.2l-2.8-0.1l-4.3,5.5l-8.4-0.9l-1.3-2.6l-6.1,9.4l2.2,7.7l-3.4,4.4l-12.8,2.4l-7-3.2l4.4,19.7l-3.7,7.6l-10.2,8.4l-3,10l-4.4,4.8l-10.4,3.1l-12.9-6l-5,2.2l-8.1,11.1l-10.1-9.8l-5.6-0.4l-2.6-0.2l-11.9,10.1l3.6,4.3l-6.3,9.7l3.8,13.5l-3.3,4.7l1.3,0.8l-1.2,4.6l5,1.5l-3.1,4.6l2.5,7.6l-6.5,4.3l2.3,10.8l3,2.4l5.5,5.9l18.6,4.2l11.1-0.1l0.1-5.7l15.4,0.7l4.9-1.9l4.2,6.3l1.2-2.3l5,0.3l0.3,4.7l5.4,1l8.2-2.4l11.1,2.4l5-2.5l5.1,2.3l5.2-2.1l-0.4,2.5l8.9,3l9.1,4.6l-0.4,7.8L624,657l7.9-8.3l11.4-1.8l9.9-6.3l2.3,5.4l6.5,5.9l5.7,0.4l5.1-2.9l2.1,3.6l1.9,7.4l6.5,8.5l-5,2.3l2.5,7.9l-1.9,16.3l5.2-2.1l7.8-3l19.5-0.1l0.2-4.9l7.7-1.5l2.5,0.7l1.5,4.7l4.5-0.2l2.5,0.5l0.9-2.6l13.4,0.4l6.1-5.2l7.4,7.6l7.1,14.4l7.2,11.4l3.5,18.7l4.1-3.6l15.9,3.5l6.6,4.3l2.6,12.7l6.6,7.9l0.2-14.2l6-6.1l-1.6-8.4l4.5-6.9l18.8,6.2l5-2.8l2.6-8.1l2.8-0.7l12.5,6.5l5.2-2.1l5.5-6.5l5.5-1.2l7.8-2.9l0.7-5.5l4.2-3.8l0.2-0.2l-2.7-0.4l-1.5-5.3l-5.1-10.3l-1.3-14.5l-4.7-13.6l9.1-30.8l-10.7-16.5l-5.4-1.7l4.5-15.9l-4.5-10l-1-10.8l9.4-4.1l-10-20l-1.1-11.4l3.1-7.5l-5.3-10.1l-6.7-5.4l-2.4-11l5.2-2.2l14.1,3.8l2.9-15.5l24.8-4.1l10.6-1.3l5.1-9.9l5.4,1.5l7.3-1.8l-4-7.4l5.4-6.9l17.1-2.5l9.4-6.2v-1.6l0.7-11.4l11.6-1.1l8.4,2.3l12-7.9l-5.9-0.1l-5-0.9l1-18.3l2.4-16.3l-5.6-12.3l-2.5-10.6l6-8.1l-1.9-7.3l-0.3-2.7l6.5-4.5l-3.5-9.9l7.7-2.9l0.9-2.7l-3.9-7.4l2.3-5.2l-1.6-5.1l-11.3-7.6l-2.7-4.7l-5.3,1.3l-8.2,11.5l0.8,8.5l-7.5,8.1l2.4,5.2l-4.8,1.5l-5.6,5.8l-7.9,2.1l-4.4-16.4l-9.8-10l-4.5,3.5l-2.2,8.2l-5.4-1.3l-3.3,7.8l3.5,7.4l-0.5,5.5l-6.2,8l-15.1,7.4l-2.9,0.2l-2.5-5.2l-5.8-8.9l-10.1,3.8l-3.4-9.8l-5.2-2l-6.3,5.4l-10.5-4.3l-9.6,5.3l-3.3-7.7l-10.6,2.9l-5-2.8l2.6-10.8l-4.6-2.8l0.8-2.8l-2.9,0.6l-2.8,5.2l-8.6,1.5l-12.9,6.9l-2.4,5.3l2.2,4.9l-2.2,1.7l-11.5-7.7l-2.6,0.8l-1.5,5.3l-8.4-1.2l-5.7-9.8l-8.2,1.6l-8.2-11.1l-10.5,8.4l-2.1,7.8l-4.9,1.3l4.8,13.4l-2.8,16.5l-5,2.1l-8.5-1.5l-5.3,2.5l-13-6l0.1,2.4l-7.9,4.8l-3.6,7.3l0.9,5.4l3.7,4l2.3-1.5l13.4,16.6l7.5,4.9l7.3,4l-0.3,14.3l4.2,7.6l10.3,15.1l2.7,0.6l2.8,0.4l-3.3,7.7l1.7,2.2l-6.2,8.8l-7.6,3.3l-1.2,8.3l-7.8,1.5l-0.1,14l5.3-1.2l4.5,2.9l4.7,15.3l-2.2,1.9l-11.7,6.6l-5.6,0.1l-7.3,4.4L690.7,544.3z"/>
               <text transform="matrix(1.0064 0 0 1 767.5684 510.2725)" ><tspan x="-40" y="0" class="texte">3</tspan><tspan x="-30" y="0" class="texte" dy="-1ex">éme</tspan><tspan x="10" y="0" class="texte">Circonscription</tspan></text>
                </a></g>
 
 
 
         <text font-size="100" x="-30" y="80" display="none" style="font-size:30px;font-weight:bold;fill: #bbef0d;font-family:Brush Script MT, Brush Script Std, cursive">
 Jean-Paul Dufrègne, député GDR de la 1ère circonscription de l'Allier 
       <animate fill="freeze" dur="0.1s" begin="01.mouseover" from="none" to="block" attributeName="display"></animate>
       <animate fill="freeze" dur="0.1s" begin="01.mouseout" from="block" to="none" attributeName="display"></animate>
           </text>
         <text font-size="100" x="-30" y="80" display="none" style="font-size:30px;font-weight:bold;fill: #bbef0d;font-family:Brush Script MT, Brush Script Std, cursive">
 Laurence Vanceunebrock-Mialon, députée LREM de la 2ème circonscription de l'Allier 
       <animate fill="freeze" dur="0.1s" begin="02.mouseover" from="none" to="block" attributeName="display"></animate>
       <animate fill="freeze" dur="0.1s" begin="02.mouseout" from="block" to="none" attributeName="display"></animate>
           </text>
         <text font-size="100" x="-30" y="80" display="none" style="font-size:30px;font-weight:bold;fill: #bbef0d;font-family:Brush Script MT, Brush Script Std, cursive">
 Bénédicte Peyrol, députée LREM de la 3ème circonscription de l'Allier 
       <animate fill="freeze" dur="0.1s" begin="03.mouseover" from="none" to="block" attributeName="display"></animate>
       <animate fill="freeze" dur="0.1s" begin="03.mouseout" from="block" to="none" attributeName="display"></animate>
           </text>
 
                                                            </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="1ére_Circonscription.html" target="myFrame" onMouseOver="ChangeMessage('1ére Circonscription','ejs_texte','1ére Circonscription')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-01">
    <a id="region-01" onmouseover="afficher_image('img1');" onmouseout="cacher_image('img1');">1ére Circonscription</a></a></li>
	<li class="bloc"><a href="2éme_Circonscription.html" target="myFrame" onMouseOver="ChangeMessage('2éme Circonscription','ejs_texte','2éme Circonscription')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-02">2éme Circonscription</a></li>
	<li class="bloc"><a href="3éme_Circonscription.html" target="myFrame" onMouseOver="ChangeMessage('3éme Circonscription','ejs_texte','3éme Circonscription')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-03">3éme Circonscription</a></li>
</ul>
 
</ul>
                                                             </div> 
                                                            </details> 
                                                      <div id="ejs_texte"></div>
                                                        <!-- Fin Liste -->
 
                                          <!-- Photos aux passage zone des cartes -->
 
<img class="img_info" src="../../deputes/Jean-Paul Dufrègne.png" class="img_ville" width="140" height="140" id="img1"  style="display:none;">
<img class="img_info" src="../../deputes/Laurence Vanceunebrock-Mialon.png" class="img_ville" width="140" height="140" id="img2"  style="display:none;">
<img class="img_info" src="../../deputes/Bénédicte Peyrol.png" class="img_ville" width="140" height="140" id="img3"  style="display:none;">

Je vous remercie

Max

[psychadelic]

https://developer.mozilla.org/fr/doc...dEventListener

[Invité]

Bonjour,

1- en ligne de code (mauvaise solution)

Code :

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

<g><a .... onmouseover="afficher_image('img1'); ChangeMessage('bla bla bla','ejs_texte');" onmouseout="cacher_image('img1'); ChangeMessage('','ejs_texte');">...</a></g>

2- La solution proposée par psychadelic permet de simplifier le code HTML, en écrivant l'essentiel du code dans un script JS (meilleure solution)

L'astuce consiste à mettre des attributs data-* dans le HTML :

Code html :

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

1
2
<g><a .... data-img="img1" data-txt="bla bla bla 1">...</a></g>
<g><a .... data-img="img2" data-txt="bla bla bla 2">...</a></g>

Puis en JS :

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
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');
  })
});

[apdf1]

Bonjour,

La proposition que tu me donne est pour remplacer la ligne

Code html :

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

<g><a id="region-01"  xlink:href="europe/france/Orne.html" target="myFrame" onmouseover="afficher_image('img1');" onmouseout="cacher_image('img1');">

Avec le code JS Ok sa fonctionne

Pour la liste lorsque je passe la souris dessus le texte sa affiche bien la forme mais pas l'image?

Code html :

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

1
2
3
4
5
6
<ul class="list_ul">	
	<li class="bloc"><a href="Orne.html" onMouseOver="ChangeMessage('Orne','ejs_texte','Orne')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-01" >Orne</a></li>
	<li class="bloc"><a href="Manche.html" onMouseOver="ChangeMessage('Manche','ejs_texte','Manche')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-02">Manche</a></li>
	<li class="bloc"><a href="Seine-Maritime.html" onMouseOver="ChangeMessage('Seine-Maritime','ejs_texte','Seine-Maritime')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-03">Seine-Maritime</a></li>
	<li class="bloc"><a href="Calvados.html" onMouseOver="ChangeMessage('Calvados','ejs_texte','Calvados')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-04">Calvados</a></li>
</ul>

[Invité]

Code html :

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

1
2
3
4
5
6
<ul class="list_ul">	
	<li class="bloc"><a href="Orne.html" data-img="img1" data-txt="Orne" id="list-01" >Orne</a></li>
	<li class="bloc"><a href="Manche.html" data-img="img2" data-txt="Manche" id="list-02">Manche</a></li>
	<li class="bloc"><a href="Seine-Maritime.html" data-img="img3" data-txt="Seine-Maritime" id="list-03">Seine-Maritime</a></li>
	<li class="bloc"><a href="Calvados.html" data-img="img4" data-txt="Calvados" id="list-04">Calvados</a></li>
</ul>

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
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');
  })
});

[NoSmoking]

Bonjour,

• je trouve ton SVG mal construit, je m'explique.
Si l'on considère ces 2 groupes liés

Code html :

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

1
2
3
4
5
6
7
8
9
10
<g>
  <a id="region-01" xlink:href="europe/france/1ére_circonscription_circonscription.html" target="myFrame" onmouseover="afficher_image('img1');" onmouseout="cacher_image('img1');">
    <path id="01" title="1ére Circonscription" d="M398.5,337.7(...).7z" />
    <text transform="matrix(1.0064 0 0 1 567.1992 288.5073)">
      <tspan x="-40" y="0" class="texte">1</tspan>
      <tspan x="-30" y="0" class="texte" dy="-1ex">ére</tspan>
      <tspan x="0" y="0" class="texte">Circonscription</tspan>
    </text>
  </a>
</g>

et plus loin

Code html :

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

1
2
3
4
5
<text font-size="100" x="-30" y="80" display="none" style="font-size:30px;font-weight:bold;fill: #bbef0d;font-family:Brush Script MT, Brush Script Std, cursive">
  Jean-Paul Dufrègne, député GDR de la 1ère circonscription de l'Allier
  <animate fill="freeze" dur="0.1s" begin="01.mouseover" from="none" to="block" attributeName="display"></animate>
  <animate fill="freeze" dur="0.1s" begin="01.mouseout" from="block" to="none" attributeName="display"></animate>
</text>

je ne vois pas pourquoi tu utilises les événements mouseover/out sur le lien alors que l'affichage pourrait ce faire directement dans un 2éme groupe avec l'<animate>.

Cela pourrait donner par exemple, les valeurs sont bien sûr à reprendre mais le principe est là

Code html :

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

1
2
3
4
5
6
7
8
9
10
<g width="400" height="200" style=";opacity:0;">
  <image xlink:href="le lien vers ton image" width="200" height="100"/>
 
  <text>
    Jean-Paul Dufrègne, député GDR de la 1ère circonscription de l'Allier
  </text>  
 
  <animate fill="freeze" dur="0.1s" begin="path_01.mouseover" from="0" to="1" attributeName="opacity" attributeType="CSS"></animate>
  <animate fill="freeze" dur="0.1s" begin="path_01.mouseout" from="1" to="0" attributeName="opacity"  attributeType="CSS"></animate>
</g>

• Concernant ce que tu veux afficher au survol il serait intéressant que tu précises où sont situés, dans ton code si déjà présents, les images et/ou les textes.

Nota : sur la liste je pense qu'il est plus judicieux d'utiliser la délégation d'événements.

[apdf1]

Salut NoSmoking

Je viens de prendre tes commentaires que je trouve très pertinents.
Je vais essayer de t'expliquer ma façon peut être quelle n'est pas bonne?

En premier je charge les path comme ceci.

Code HTML :

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

1
2
3
4
            <g><a id="region-04"  xlink:href="europe/france/4_éme_circonscription.html" target="myFrame" onmouseover="afficher_image('img4');" onmouseout="cacher_image('img4');">                  
            <path id="04" title="4éme Circonscription" d="M156.3,334.3l-11.1,3.8l-5.7-9.6l-8.9,1.7l-8-3.5l2,10.9l5.8,15.4l-6.9,23.7l-0.6,0.6l-1.3,1.8l11.9,0.3l7.7,3.8l4.2-7.8l4.5,6.9l-2.1,11.2l4.5,7.2l2.4-1.6l2,2.1l13.3-2.3l3.7-4.8l8.9-1.9l7.5-9.5l2.7-17l-3.3-5l2.9-6.7l3.9-10.8l2.5-1.4l-0.1-5.7l6.2-2.1l12.9-2.9l1.4,2.2l0.1,11l11.9-4.9l3.6,8.2v9.1l3.8-4.2l6.7,8.5l6.5,4.2l4.6,17.1l2.8,0.5l19.1-8.2l3.3,4l7.1,8.9l13.7-9.9l6-11.6l21.2-10l-1.1-2l14.1-6.1l8.5-8.3l-1.5-2.6l7.2-5.5l11.3-6.1l7.6-4.2l8.7-0.1l10.5,3.7l7.9-2.4l4.6-11.9l10.5,8.7l-6.6,9l6.8,4.1l15-0.8l17.5,4.5l5,3.5l5.5-1.5l7-13.4l6.5-9.7l2.3-9l-23.7-19.1l1.4-5.9l-3.5-5l-1.7,0l-12.7-12.3l4-4.5l-2.3-2.5l-10.5-10.8l-2-18.4l-17.1,7.1l-12.2-1.6l-1.6,2.7l-8.9-1.3l-8.7,2.1l1.2-17.5l-2.1-1.1l-8.6-4.4l-1,5.6l-7.7,3.4l-2.5,5.2l-3.9-7.1l1.2-16.9l2.2-10.7l-7.8-0.8l-3.4-4.2l0.6-8l-7.7-2.1l0.2-5.4l-17.7-4.9l-1.9,5.4l-5.2,3.2l-14.3-10.5l-0.3,22.8l-0.5,2.8l-2.8,0.5l-0.7-8.1l-11.8,1.7l-13.6-7.2l-3,0.9l-4.9,7.8l-4.8,12.4l-1.5,8.8l-8.3,15.8l-1.2,11.6l-8.2,8.3l-3.6-1.2l-11.1-6.1l-3.3-0.2l1.2,5.8l-3.3,8.3l-2.8,1.1l-0.6,18.1l-5.5-1L197.8,297l-5.1-2.5l-11.1-23.3l-1.8,4.6l-4.5,1.8l1.3,12.1l-3.8,4.8l-8.4,1.2l4.4,14.1l-2.8,8.1l-7.4,4.8L156.3,334.3z"/>
              <text transform="matrix(1.011 0 0 1 291.1865 298.0591)" ><tspan x="0" y="0" class="texte">4éme Circonscription</tspan></text>          
                </a></g>

avec à l'intérieur le

Code HTML :

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

<text transform="matrix(1.011 0 0 1 291.1865 298.0591)" ><tspan x="0" y="0" class="texte">4éme Circonscription</tspan></text>

qui me marque les nom des régions.

Après je met ceci pour que lorsque je passe sur la région le nom s'affiche.

Code HTML :

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

1
2
3
4
5
         <text font-size="100" x="-30" y="80" display="none" style="font-size:30px;font-weight:bold;fill: #bbef0d;font-family:Brush Script MT, Brush Script Std, cursive">
 Typhanie Degois, députée LREM de la 1ère circonscription de Savoie 
       <animate fill="freeze" dur="0.1s" begin="01.mouseover" from="none" to="block" attributeName="display"></animate>
       <animate fill="freeze" dur="0.1s" begin="01.mouseout" from="block" to="none" attributeName="display"></animate>
           </text>

en suite j'ai une liste que lorsque je passe sur les noms les régions s'affiche

Code HTML :

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

1
2
3
4
5
6
<ul class="list_ul">	
	<li class="bloc"><a href="1_Ére_Circonscription_circonscription.html" target="myFrame" onMouseOver="ChangeMessage('1_Ére_Circonscription','ejs_texte','1_Ére_Circonscription')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-01">1ére Circonscription</a></li>
	<li class="bloc"><a href="2_Éme_Circonscription_circonscription.html" target="myFrame" onMouseOver="ChangeMessage('2_Éme_Circonscription','ejs_texte','2_Éme_Circonscription')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-02">2éme Circonscription</a></li>
	<li class="bloc"><a href="3_Éme_Circonscription_circonscription.html" target="myFrame" onMouseOver="ChangeMessage('3_Éme_Circonscription','ejs_texte','3_Éme_Circonscription')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-03">3éme Circonscription</a></li>
	<li class="bloc"><a href="4_Éme_Circonscription_circonscription.html" target="myFrame" onMouseOver="ChangeMessage('4_Éme_Circonscription','ejs_texte','4_Éme_Circonscription')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-04">4éme Circonscription</a></li>
</ul>

Et pour terminer je mes ce code pour afficher les images au passage de la souris sur les régions

Code HTML :

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

1
2
3
4
<img class="img_info" src="../../deputes/Typhanie%20Degois.png" class="img_ville" width="150" height="140" id="img1"  style="display:none;">
<img class="img_info" src="../../deputes/Vincent Rolland.png" class="img_ville"   width="150" height="140" id="img2"  style="display:none;">
<img class="img_info" src="../../deputes/Émilie Bonnivard.png" class="img_ville"  width="150" height="140" id="img3"  style="display:none;">
<img class="img_info" src="../../deputes/Patrick Mignola.png" class="img_ville"   width="150" height="140" id="img4"  style="display:none;">

Voila la construction de mon code

Je joint aussi mon code au complet sa seras peut être plus clair

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
<!DOCTYPE html>
<html lang="fr">
 
<head>
                   <meta charset="UTF-8">
 
                                           <title>Savoie</title>
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui"/>
                                                  <!-- Carte-->
 
                            <script LANGUAGE="JavaScript" src="../../js/Ephemeride.js"></script>
                                <script  src="../../js/jquery-3.3.1.min.js"></script>      
                                   <script  src="../../js/liste_deroulante.js"></script>
 
                           <link rel="stylesheet" href="../../css/menu_list_derolante.css">
 
   <style>
    
    
    
    body {
      background: #050505;
    }
      /* Titre de la carte */ 
    #titre {
      position: absolute;
      top: 10px;
      left: 400px;
      color: #363434;
      font-weight:bold;
      font-weight:bold;
      font-style: italic;
      text-shadow: 1px 2px 0 rgba(0,0,0,0.4),-1px -2px 0 rgba(255,255,255,1);
      font-size: 89px;
      border: solid 0px #fff;
      width: 850px; 
      height: 110px;
      padding-left: 20px;
    }
     
    sup {
      font-size: 20px;
      text-shadow: none; 
      color: #fff; }  
      /* Fin Titre de la carte*/
 
      /* Carte*/
    .map__image {
      position: absolute;
      top: 90px;
      left: -90px;
      right: 0px;
      bottom: 0;
     /*cadre rouge autour de la carte*/
      border: 1px solid red; 
      width: 1260px;
      height: 730px;
      margin-left: 100px;
    }
    .map__image path {
      fill: #0e0e14;
      stroke: #4a4747;
      stroke-width: 0.5px;
      transition: fill 0.1s;
    }
    .map__image path:hover {
      fill: #0000FF;
      stroke: #0000FF;
    }
    .map__image svg {
      height: 900px;
      width: 1000px;
    }
    .map {
      overflow: hidden;
    }
       
    /*texte couleur blanc au passage de la souris*/
    path~text {
      fill: #e8e809;
      font-size: 18px;
    }
    path:hover~text {
      fill: #fdfefe;
      font-weight: bold;
      font-size: 18px;
    }
    /*Fin texte couleur blanc au passage de la souris*/
       
    /*Pas de nom sur la carte*/
    .texte {
      visibility: hidden;
    }   
    /* Ligne rouge sur carte */
    #ligne_rouge {
      fill-rule: evenodd;
      clip-rule: evenodd;
      fill: #D41216;
      stroke: #D41216;
      stroke-miterlimit: 22.9256;
    } 
       
    /* Bouton afficher/masquer le texte sur la carte*/     
    .bt_afficher {
      margin-top: 60px;
      margin-left: 10px;
      padding-left: -100px;
    }
    .bt_texte:hover {
      font-size: 22px;
      color: #1af508;
    }
    .bt_texte {
      margin-left: 10px;
      color: #eb1a1a;
      cursor: pointer;
    }
    /* Fin Bouton afficher/masquer le texte sur la carte*/
 
    /* 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: 1000px;
      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: 1000px;
      display: block;
      height: 690px;
      width: 250px;
      overflow-y:auto;
    }      
    /* Fin Afficher le texte des régions en passant sur les noms des régions*/  
 
    /*Position du tableau de droite*/
    .tabl_info{ 
      position: absolute;
      left: 1290px;
      top: 0px; 
      width: 260px; 
      color: #fff;
      border: 1px solid #ff00f5;
    } 
       
    /* Lien de la liste deroulante*/
    li a:link {
      color:#09d7f2; font-size: 16px;
      text-decoration:none;
    }                         
    li a:visited { /*visited link */
      color:#09d7f2;
    }  
    li a:hover {  /*mouse over link*/ 
      color:#000;
      font-weight: bold;
    }  
    li a:active { /*selected link */
      color:#fff;  
    } 
       
    /*Photos aux passage zone des cartes */       
    .img_info{
      position: absolute; 
      top: 615px; 
      left: 965px;
    }
           /* Lien vers la carte france région*/
    #message{
      position: absolute; 
      top: 65px; 
      left: 190px;
      color: #fff;
      cursor:pointer;}
       
    #message a:link {
      color:#09d7f2; 
      text-decoration:none;
    }                         
    #message a:visited { /*visited link */
      color:#fff;
    }  
    #message a:hover {  /*mouse over link*/ 
      color:#0ef85f;
      font-weight: bold;
    }  
    #message a:active { /*selected link */
      color:#fff;  
    } 
       /* Fin Lien vers la carte france région*/
    sub{
      color: #fa0808;}
       
                             /* =============scrollbar liste des Régions===================*/       
    .scrollbar3{
          margin-left: 30px;
          float: left;
          height: 500px;
          width: 225px;
          background: #050505;
          overflow-y: scroll;
          margin-bottom: 25px;
}   
    #style-3::-webkit-scrollbar-track{
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
          border-radius: 10px;
          background-color: #050505;
}
    #style-3::-webkit-scrollbar{
          width: 12px; /*largeur de la scroll*/
          background-color: #050505;
}
    #style-3::-webkit-scrollbar-thumb{
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
          background-color: #D62929;
}   
                              /* =============fin scrollbar des Régions===============*/
    
                              /* =============scrollbar liste deroulante===================*/ 
    .scrollbar {
      margin-left: 10px;
      float: left;
      height: 120px;  /*hauteur du menu*/
      width: 220px;  /*deplacement de la scroll vers la droite  110*/
      overflow-y: scroll;
      margin-bottom: 2px;
    }
    .style-2::-webkit-scrollbar {
      width: 10px;
      background-color: #000;
    }              
    .style-2::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      background-color: #D62929;
    } 
                             /* =============fin scrollbar liste deroulante===============*/  
    
    
    </style> 
 
                    </head>
<body>
 
                                                    <!-- Titre du Pays -->
                   <div id="titre"><span>Savoie&nbsp;&nbsp;</span><sup class="distrit"> (Circonscription) </sup>  </div> 
                                                  <!-- Fin Titre du Pays -->
 
 
                                                <!-- Fêter les saints du jour-->
                                     <table class="tabl_info" border="1" cellpadding="10">
 
                                                <tr><td align="center" colspan=2>
                                               <span class="text">Aujourd'hui le:                                                
 
                                                  <script LANGUAGE="JavaScript">
                                                      var adate, date, amois;
                                                        adate = new Date();
 
                                                     // Affichage date
                                    document.write('<B class="madate">'+adate.toLocaleDateString());
 
                                                    //Affichage ephéméride
                                                   date = adate.getDate()-1;
                                                   amois = adate.getMonth();
                           document.write('<BR></B>'+"C'est la saint : " +'<B class="monprenom">'+getFonc(amois,date));
                                                         </script>
                                                          </span>  
                                             <!-- Fin Fêter les saints du jour-->
 
                                                          </td></tr>
                                                       <!-- Heure Gmt -->
                                                            <tr>
                                                   <td align="center" colspan=2>
                                                       <div id="tabl_Gmt">
                                Heure local de Greenwich </div><sup class="Fuseau"> (UTC/GMT) </sup><br>
                                 <img src="../../drapeaux/France.gif" width="32" height="26" alt="Drapeau"><br>
                                                         <p data-gmt="+2">
                                                       <b>France</b> :&nbsp; 
                                                     <span class="heure"></span>
                                                     <span class="date"></span>
                                                               </p>                                           
                                                            </td></tr>
                                                        <!--Fin Heure Gmt-->
 
                                                  <!--Tableau Pays et régions-->
            <tr><td align="center" class="text_drap"><sub>***&nbsp; </sub> Drapeau du pays  <sub>&nbsp; ***</sub><br> Auvergne-Rhône-Alpes</td></tr>
            <tr><td align="center"><img src="../../drapeaux/Auvergne.gif" width="160" height="100" alt="Drapeau"></td></tr>
            <tr><td align="center"class="text_drap">Armoirie Représentant<br><sub>**&nbsp;</sub> Savoie<sub>&nbsp;**</sub></td></tr>
            <tr><td align="center"><img src="../../Blason/73-Savoie.jpg" width="120" height="150" alt="Armoirie" ></td></tr>
                                                 <!--Fin tableau Pays et régions-->
 
                                               <!--Tableau régions et départements-->
 
<!--
        <tr><td align="center" class="text_drap" colspan=2><sub>***&nbsp; </sub> Drapeau de la Régions  <sub>&nbsp; ***</sub><br> Auvergne-Rhône-Alpes</td></tr>
        <tr><td align="center" colspan=2><img src="../../drapeaux/Auvergne.gif" width="160" height="100" alt="Drapeau">   </td></tr>              
        <tr><td align="center"class="text_drap"  colspan=2><sub>***&nbsp; </sub>Armoirie dde la Régions<sub>&nbsp; ***</sub><br> </td></tr>
        <tr><td align="center" class="text_drap">Région</td><td align="center" class="text_drap">Département</td></tr>
        <tr><td align="center"><img src="../../armoiries/Auvergne-Rh%C3%B4ne-Alpes.png" width="140" height="30" alt="Armoirie" ></td><td align="center"><img src="../../Blason/as.jpg" width="110" height="130" alt="Armoirie" ></td></tr>                  
 
-->
                                             <!-- Fin Tableau régions et départements-->
 
                                                    <!-- Liste déroulante  -->
 
                                            <tr><td class="www" align="center"colspan=2>
 
                                                            <form>
                                               <fieldset id="fs" class="oflow" >
                                                    <div class="select" >
                 <input type="text" id="foo" value="" placeholder="Recherche !" /><span id="triangle"> ▼</span>
                                                          </div>
 
                                    <ul class="options scrollbar style-2" id="menu " >
 
                                            <li><a href="Bourgogne_Franche_Comte.html">Bourgogne-Franche-Comté</a></li>
                                            <li><a href="Cote_D_Or_departement.html">Côte-D'Or"</a></li>
                                            <li><a href="Doubs_departement.html">Doubs"</a></li>
                                            <li><a href="Haute_Saone_departement.html">Haute-Saône"</a></li>
                                            <li><a href="Jura_departement.html">Jura"</a></li>
                                            <li><a href="Nievre_departement.html">Nièvre"</a></li>
                                            <li><a href="Saone_Et_Loire_departement.html">Saône-Et-Loire"</a></li>
                                            <li><a href="Territoire_De_Belfort_departement.html">Territoire De Belfort"</a></li>
                                            <li><a href="Yonne_departement.html">Yonne"</a></li>
 
 
                                                           </ul>
                                                        </fieldset>
                                                          </form> 
                                                        </td></tr>
                                                <!-- Fin Liste déroulante  -->
                                                          </table>
 
                                      <!--   Afficher ou maquer le texte sur la Carte   -->
 
                                       <table class="bt_afficher" border="0" width="20%">
                                                        <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 -->
 
                                                         <!--Carte-->
 
                                                    <div class="map" id="map">
                                                    <div class="map__image"> 
 
                          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
 
 
 
 
            <g><a id="region-01"  xlink:href="europe/france/1_ére_circonscription.html" target="myFrame" onmouseover="afficher_image('img1');" onmouseout="cacher_image('img1');">                  
            <path id="01" title="1ére Circonscription" d="M182.5,129.9l-5.7-6.8l-0.5-12.1l-12-0.7l-2.6-1.5l0.7-2.9l-4.8-3.7l-0.1-3l3.2-19l-1.5-2.4l-5.7-31l-0.7-4.7l-1.9-11l2-2l-2.3-11.8l-16.4-0.4l-2.7-5l-5.6,7.2l4.5,14.3l-1.9,9l-6.9,23.3l-4.7,14.5l-4,13l-3.3,14l-5.5,5.8l-1.4,22.8l-2,14.4l1,7.3l-2.2,9l2.6,14.9l-2,2l-6.6,1.8l4.1,11.3l-8.1,8.3l-3.9,8.1l-5,3.3l-10.9-4.1l-2.2,0.8l-16.8-0.6l1.9,10.3l3.4,11.6L41.3,250l-0.9,6l2.3,5.7l0,8.5l-7.1,5.2L21,276.5l-2.8,8.1l-6.1,3.8l-1.3,4.9l-2.6,5.2L3,297l0.2,8.6l8.4,12l5.1,5.8l0.6,5.2l15,13.7l0,5.8l2.5,1.7l-1.6,5.1l4.9,2.2l0.4,2.7l-4.8-1.8l-1.2,5.9l3.6,5l8.6,2.7l0.1,5.3l2.7,1.6l3.3,2l8,17.6l3.6,12.3l10.4,10.1l-2.7,16.7l4.8,13.2l10.9,2.3l1.9-1.3l1.7-2.5l11.8-1.7l8.6,2.7l9.3,11l14.4,4.5l0.4,0l11.8,3.8l3.3,5.2l12.2,2.6l7,6.1l0.2,9.2l2.1,1.1l10.2-5.4l7.8-16.4l-10.6,2.6l-2.4-5.4l1.5-12.1l-0.3-2l5.4-2.8l4.6-7.7l2.9-17.9l-6.1-10.1l-13.3-17.6l-13.3,2.3l-2-2.1l-2.4,1.6l-4.5-7.3l2.1-11.2l-4.5-6.9l-4.2,7.8l-7.7-3.8l-11.9-0.3l1.3-1.8l0.6-0.6l6.9-23.7l-5.8-15.4l-2-10.9l8,3.5l8.9-1.7l5.7,9.6l11-3.8l2.2-11.7l7.4-4.8l2.8-8.1l-4.4-14.1l8.4-1.2l3.8-4.8l-1.3-12.1l4.5-1.8l1.8-4.6l11.1,23.3l5.1,2.5l11.1-28.3l5.5,1l0.6-18.1l2.8-1.1l3.2-8.3l-1.2-5.8l3.3,0.2l11.1,6.1l3.6,1.2l8.2-8.3l1.2-11.7l8.3-15.8l1.5-8.8l4.9-12.4l-21.5-10l-8.5,2.6l0.3-13.6l-12.5-4.8l0.1-5.6l4.9-7.1l-1-11.4l-13.9,1.1l2.9-15.6l-9.2,1.9l-8.6-3.6l-1.5,5.7L182.5,129.9z"/>
               <text transform="matrix(1.011 0 0 1 115.3838 252.6616)" ><tspan x="0" y="0" class="texte">1ére Circonscription</tspan></text>
                </a></g>
            <g><a id="region-02"  xlink:href="europe/france/2_éme_circonscription.html" target="myFrame" onmouseover="afficher_image('img2');" onmouseout="cacher_image('img2');">                  
            <path id="02" title="2éme Circonscription" d="M438.6,256.5l-10.5-10.8l-2-18.4l12,0l11.6-27l3-4.9l0-0.2l1.1-2.5l-3.3-4.3l14.1-13.8l2.6-8.6l-7-4.5l18.5-14.9l16.6-15.2l2.7-1.4l4.7-14.5l7.4-9.7l3.4-7.2l-2.9-4.6l5.6-9.3l-2.1-5.2l5.3-3.1l7.7-17.1l14.5-5.9l9.7-15.8l3.1,5.2l10.4,5.4l14.7,3.3l1.5,5.7l7.2,5.4l1.4,2.7l-3.9,4.4l1,8.9l-20.3,0.4l5.5,11l5.3,20.3l7.9,9.3l2.2-1.9l5.3,1.9l4.4,13.3l8.9,7.2l1.5-2.4l14.1-0.8l7.8-3.5l13.8-0.1l2.2,5.9l15.7,19.4l-0.8,15.2l7.1,9.2l-5.5,13.4L676,201l17.6-20.6l1.5-5.9l9.1-12.3l14.8-2.7l12.9-7.1l2.9,27.1l5.4,7.4l-4,11.4l11.2,18.1l9.7,7l1.8,5.8l16,9l18.1,1l2.5,1.8l0.6,6.1l-2.6,5.5l7.9,2.5l-0.1,8l11.4,4.5l20.7-6.3l6.2,6.7l13.8,7l-1.1,5.9l-7.5,9.8l-3.9,27.6l9.2,12.1l0.7,3l0,3.1l-2.7,5.6l2.8,15.2l-1.9,9.1l7.9,13.1l-3,12l13.4,6.9l18.2,0.5l3.1,4.9l-6.1,10l2.1,5.6l17.8-0.5l14.5,4.1l-1.4,8.8l0.8,2.9l8.6,12.3l-0.8,5.9l-18.2,1.8l-8.1,4.4l-17.5-4.7l-2.6,1.6l-5.1,11.1l-7.5,5.2l-5.4,10.6l-1,14.9l-6,13.8l-6.2-0.4l-11.6-9.6l-15-2l-5.2-3.2l-6.1,0.6l-5.1-2.8l-0.9-26.7l-8.9-7l-7.8,2.5l-3.5,5.2l-10.9,6l-24.6,4.2l-3.8,4.8l-8.8,2.4l-6.9,6.1L726,498l3.8,8.2l-3.3,5.2l-8.9,8.5l-6,1.2l-12.3,8.9l0.7,11.9l-5.6,7.1l0.5,6.1l-6.9,17l-8,4.2l-6.1-0.7l-14.3,4.4l-2.6,8.5l2.4,8.5l-13-0.3l-5.8-1.5l-6.2-6.3l-2.7,1.3l-5.9,0.8l-4-4.5l-5.1,3.1l-3.7,11.1l-26.6-0.4l-20.5,11.5l-7.6-5.2l-8.6-12.4l-2.4-11.9l-33.2-9.6l-2-13.9l-8.9-6.9l-2.9,0.2l-3.5-14.3l-4.3-4.2l-4.8-0.4l-5.7-6.3l-1.5-0.5l3.5-17.2l-6.8-12.6l-1.4-5.7l2.5-5.2l11.3-20.2l0.6-5.7l-3.8-0.8l-13.9-4.1l-17.5-10.3l6.8-18l7.1-19.2l-1.9-5.7l1.5-2.6l3.8-11l7.5-8.6l6-16.2l-1-4.9l-6.3-4.6l-8.9-10.7l-8.6-4.8l7-13.5l6.5-9.7l2.3-9l-23.7-19.1l1.4-5.9l-3.5-5l-1.7,0l-12.7-12.3l4-4.5L438.6,256.5z"/>
               <text transform="matrix(1.011 0 0 1 615.0469 354.7378)" ><tspan x="0" y="0" class="texte">2éme Circonscription</tspan></text>
                </a></g>
            <g><a id="region-03"  xlink:href="europe/france/3_éme_circonscription.html" target="myFrame" onmouseover="afficher_image('img3');" onmouseout="cacher_image('img3');">                  
            <path id="03" title="3éme Circonscription" d="M368.1,325.5l-11.3,6.1l-7.2,5.5l1.5,2.6l-8.5,8.3l-14.1,6.1l1.1,2l-21.2,10l-6,11.6l-13.7,9.9l-7.1-8.9l-3.3-4l-19.1,8.2l-2.8-0.5l-4.6-17.1l-6.5-4.2l-6.7-8.5l-3.8,4.2l0-9l-3.6-8.2l-11.9,4.9l-0.1-11l-1.4-2.2L205,334l-6.2,2.1l0.1,5.7l-2.5,1.4l-3.9,10.8l-2.9,6.7l3.3,5l-2.7,17l-7.5,9.5l-8.9,1.9l-3.7,4.8l13.3,17.6l0.3-0.1l34.1-12.9l5.2,3.1l6.6,10.1l11.7,3.7l1.4,11.5l-2.2,4.1l25.6,14.2l3.2-2.6l5-2.8l8.6,0.7l8.5-0.7l2.6,1.5l0.1,9l5-1.4l11.6-4l5.5,2.8l9.8,18.9l18.2,16.7l9.2,22.7l-6.4,6.6l-6.2,0.7l4.1,3.8l11.2,2.6l-2.1,11l-2.2,5.7l-2.1,13.1l-16.5,4.9l-3,7.6l-7.2,4.2l0.7,2.9l-7.2,9.4l5.3,22.8l-8.5,12.2l1.9,12l6.8,6.2l-0.1,8.9l12,9.3l1.8,12.1l-11.2,29.4l10.8,3l4.9-2.6l7.4-9.3l16.6,7.1l8.8,12.2l14.1-5.3l5.8,0.8l6.4,6.5l-2.5,11.5l10.1,10.3l10.2,5.5l14.7-2.8l9.8-6.7l0.8-2.9l19.1,18.2l5.9,17.1l-6,10.5l19.8,7.1l5.7-1.9l8.8,2.6l9-1.5l11.3,9.2l21-3.5l1-11.9l-4.3-17.5l17.7-16.1l9.5,7.3l5.8,1.4l14.3-4.9l3.5-8l7.8-8l8.3,3.4l14.6-1.5l10.2,10.1l3.2-5.2l9.2-0.4l13-7.9l4.8-11.1l20.2-6.2l17,6.3l5.2-2.9l13.8-16.1l16.9,5.5l29.2,16.1l3.2,5.2l3.1-0.2l25.4-10l-5.7-14l4.2-8.1l30-4.4l2.3-2.1l-1.4-2.7l5.2-3.1l1.6-8.7l6.8-6l0.9-8.5l14.7-3.7l6.9-5.8l14.9,0.5l9.9-6.7l6-0.7l9.4,12.1l5.9-0.7l4.7-10.9l17.2-17.3l9.1-1.3l5.6-7.3l-2.6-15.1l2.7-8.6l-8.2-13l-2.6-12l-3.7-4.9l-0.6-9l13.6-3.6l1.8-15l15-10.2l0.3-12.1l3.8-8.4l6.9-6.1l4.1-11.6l-1.1-2.9l-11.1-5.5L947,463l-22.7-9.7l-18.2,1.8l-8.1,4.4l-17.5-4.7l-2.6,1.6l-5.1,11.1l-7.5,5.2l-5.4,10.6l-1,14.9l-6,13.8l-6.2-0.4l-11.6-9.6l-15-2L815,497l-6.1,0.6l-5.1-2.8l-0.9-26.7l-8.9-7l-7.8,2.5l-3.5,5.2l-10.9,6l-24.6,4.2l-3.8,4.8l-8.9,2.4l-6.9,6.1l-1.7,5.7l3.8,8.2l-3.3,5.2l-8.9,8.5l-6,1.2l-12.3,8.9l0.8,11.9l-5.6,7.1l0.5,6.1l-6.9,17l-8,4.2l-6.1-0.7l-14.3,4.4l-2.6,8.5l2.4,8.5l-13-0.3l-5.8-1.5l-6.2-6.3l-2.7,1.3l-5.9,0.8l-4-4.5l-5.1,3.1l-3.7,11.1l-26.6-0.4l-20.5,11.5l-7.6-5.2l-8.6-12.4l-2.4-11.9l-33.2-9.7l-2-13.8l-8.9-6.9l-2.9,0.2l-3.5-14.3l-4.3-4.2l-4.8-0.4l-5.7-6.3l-1.5-0.5l3.5-17.2l-6.8-12.6l-1.4-5.7l2.5-5.2l11.3-20.2l0.6-5.7l-3.8-0.8l-13.9-4.1l-17.5-10.3l6.8-18L469,407l-1.9-5.7l1.5-2.6l3.8-11l7.5-8.6l6-16.2l-1-4.9l-6.3-4.6l-8.9-10.7l-8.6-4.8l-5.5,1.5l-5-3.5l-17.5-4.5l-15,0.8l-6.8-4.1l6.6-9l-10.5-8.7l-4.6,11.9l-7.9,2.4l-10.5-3.7l-8.7,0.1L368.1,325.5z"/>
               <text transform="matrix(1.011 0 0 1 530.667 661.1729)"  ><tspan x="0" y="0" class="texte">3éme Circonscription</tspan></text>
                </a></g>
            <g><a id="region-04"  xlink:href="europe/france/4_éme_circonscription.html" target="myFrame" onmouseover="afficher_image('img4');" onmouseout="cacher_image('img4');">                  
            <path id="04" title="4éme Circonscription" d="M156.3,334.3l-11.1,3.8l-5.7-9.6l-8.9,1.7l-8-3.5l2,10.9l5.8,15.4l-6.9,23.7l-0.6,0.6l-1.3,1.8l11.9,0.3l7.7,3.8l4.2-7.8l4.5,6.9l-2.1,11.2l4.5,7.2l2.4-1.6l2,2.1l13.3-2.3l3.7-4.8l8.9-1.9l7.5-9.5l2.7-17l-3.3-5l2.9-6.7l3.9-10.8l2.5-1.4l-0.1-5.7l6.2-2.1l12.9-2.9l1.4,2.2l0.1,11l11.9-4.9l3.6,8.2v9.1l3.8-4.2l6.7,8.5l6.5,4.2l4.6,17.1l2.8,0.5l19.1-8.2l3.3,4l7.1,8.9l13.7-9.9l6-11.6l21.2-10l-1.1-2l14.1-6.1l8.5-8.3l-1.5-2.6l7.2-5.5l11.3-6.1l7.6-4.2l8.7-0.1l10.5,3.7l7.9-2.4l4.6-11.9l10.5,8.7l-6.6,9l6.8,4.1l15-0.8l17.5,4.5l5,3.5l5.5-1.5l7-13.4l6.5-9.7l2.3-9l-23.7-19.1l1.4-5.9l-3.5-5l-1.7,0l-12.7-12.3l4-4.5l-2.3-2.5l-10.5-10.8l-2-18.4l-17.1,7.1l-12.2-1.6l-1.6,2.7l-8.9-1.3l-8.7,2.1l1.2-17.5l-2.1-1.1l-8.6-4.4l-1,5.6l-7.7,3.4l-2.5,5.2l-3.9-7.1l1.2-16.9l2.2-10.7l-7.8-0.8l-3.4-4.2l0.6-8l-7.7-2.1l0.2-5.4l-17.7-4.9l-1.9,5.4l-5.2,3.2l-14.3-10.5l-0.3,22.8l-0.5,2.8l-2.8,0.5l-0.7-8.1l-11.8,1.7l-13.6-7.2l-3,0.9l-4.9,7.8l-4.8,12.4l-1.5,8.8l-8.3,15.8l-1.2,11.6l-8.2,8.3l-3.6-1.2l-11.1-6.1l-3.3-0.2l1.2,5.8l-3.3,8.3l-2.8,1.1l-0.6,18.1l-5.5-1L197.8,297l-5.1-2.5l-11.1-23.3l-1.8,4.6l-4.5,1.8l1.3,12.1l-3.8,4.8l-8.4,1.2l4.4,14.1l-2.8,8.1l-7.4,4.8L156.3,334.3z"/>
              <text transform="matrix(1.011 0 0 1 291.1865 298.0591)" ><tspan x="0" y="0" class="texte">4éme Circonscription</tspan></text>          
                </a></g>
 
 
 
         <text font-size="100" x="-30" y="80" display="none" style="font-size:30px;font-weight:bold;fill: #bbef0d;font-family:Brush Script MT, Brush Script Std, cursive">
 Typhanie Degois, députée LREM de la 1ère circonscription de Savoie 
       <animate fill="freeze" dur="0.1s" begin="01.mouseover" from="none" to="block" attributeName="display"></animate>
       <animate fill="freeze" dur="0.1s" begin="01.mouseout" from="block" to="none" attributeName="display"></animate>
           </text>
         <text font-size="100" x="-30" y="80" display="none" style="font-size:30px;font-weight:bold;fill: #bbef0d;font-family:Brush Script MT, Brush Script Std, cursive">
 Vincent Rolland, député LR de la 2ème circonscription de Savoie 
       <animate fill="freeze" dur="0.1s" begin="02.mouseover" from="none" to="block" attributeName="display"></animate>
       <animate fill="freeze" dur="0.1s" begin="02.mouseout" from="block" to="none" attributeName="display"></animate>
           </text>
         <text font-size="100" x="-30" y="80" display="none" style="font-size:30px;font-weight:bold;fill: #bbef0d;font-family:Brush Script MT, Brush Script Std, cursive">
 Émilie Bonnivard, députée LR de la 3ème circonscription de Savoie 
       <animate fill="freeze" dur="0.1s" begin="03.mouseover" from="none" to="block" attributeName="display"></animate>
       <animate fill="freeze" dur="0.1s" begin="03.mouseout" from="block" to="none" attributeName="display"></animate>
           </text>
         <text font-size="100" x="-30" y="80" display="none" style="font-size:30px;font-weight:bold;fill: #bbef0d;font-family:Brush Script MT, Brush Script Std, cursive">
 Patrick Mignola, député MODEM de la 4ème circonscription de Savoie 
       <animate fill="freeze" dur="0.1s" begin="04.mouseover" from="none" to="block" attributeName="display"></animate>
       <animate fill="freeze" dur="0.1s" begin="04.mouseout" from="block" to="none" attributeName="display"></animate>
           </text>
 
 
<g width="400" height="200" style=";opacity:0;">
  <image xlink:href="le lien vers ton image" width="200" height="100"/>
 
  <text>
    Jean-Paul Dufrègne, député GDR de la 1ère circonscription de l'Allier
  </text>  
 
  <animate fill="freeze" dur="0.1s" begin="path_01.mouseover" from="0" to="1" attributeName="opacity" attributeType="CSS"></animate>
  <animate fill="freeze" dur="0.1s" begin="path_01.mouseout" from="1" to="0" attributeName="opacity"  attributeType="CSS"></animate>
</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="1_Ére_Circonscription_circonscription.html" target="myFrame" onMouseOver="ChangeMessage('1_Ére_Circonscription','ejs_texte','1_Ére_Circonscription')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-01">1ére Circonscription</a></li>
	<li class="bloc"><a href="2_Éme_Circonscription_circonscription.html" target="myFrame" onMouseOver="ChangeMessage('2_Éme_Circonscription','ejs_texte','2_Éme_Circonscription')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-02">2éme Circonscription</a></li>
	<li class="bloc"><a href="3_Éme_Circonscription_circonscription.html" target="myFrame" onMouseOver="ChangeMessage('3_Éme_Circonscription','ejs_texte','3_Éme_Circonscription')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-03">3éme Circonscription</a></li>
	<li class="bloc"><a href="4_Éme_Circonscription_circonscription.html" target="myFrame" onMouseOver="ChangeMessage('4_Éme_Circonscription','ejs_texte','4_Éme_Circonscription')" onMouseOut="ChangeMessage('','ejs_texte')" id="list-04">4éme Circonscription</a></li>
</ul>	
 
 
 
</ul>	
 
                                                             </div> 
                                                            </details> 
                                                      <div id="ejs_texte"></div>
                                                        <!-- Fin Liste -->
 
                                          <!-- Photos aux passage zone des cartes -->
 
<img class="img_info" src="../../deputes/Typhanie%20Degois.png" class="img_ville" width="150" height="140" id="img1"  style="display:none;">
<img class="img_info" src="../../deputes/Vincent Rolland.png" class="img_ville"   width="150" height="140" id="img2"  style="display:none;">
<img class="img_info" src="../../deputes/Émilie Bonnivard.png" class="img_ville"  width="150" height="140" id="img3"  style="display:none;">
<img class="img_info" src="../../deputes/Patrick Mignola.png" class="img_ville"   width="150" height="140" id="img4"  style="display:none;">
 
 
                                          <!-- Fin Photos aux passage zone des cartes -->     
 
                                                      <!-- Fin de Carte  -->
                                                            </div>  
 
                                    <!-- Script Afficher ou Masquer texte La liste des Régions--> 
                                                 <script language="JavaScript"> 
                                          function ChangeMessage(message,champ,classe) 
                                          { 
                                              if(document.getElementById) 
                                              {
                                                  var elt = document.getElementById(champ);
                                                  elt.innerHTML = message; 
                                                  elt.className = (classe) ? classe : null;
                                              }        
                                          } 
                                                         </script>  
                                   <!-- Fin Script Afficher ou Masquer texte La liste des Régions--> 
 
 
                                          <!-- Script pour visualiser de la liste-->
                                                         <script >   
                                           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()
                                       })
                                                          </script>
 
 
                                        <!-- Photos aux passage zone des cartes -->
                                                         <script>
                                     afficher_image=function(id) {
                                             document.getElementById(id).style.display="block";
                                     };
                                     cacher_image=function(id) {
                                             document.getElementById(id).style.display="none";
                                     }
                                                         </script>
 
 
 
                                                 <!--Afficher nom tooltip-->  
                              <script LANGUAGE="JavaScript" src='../../js/2.1.3_jquery.min.js'></script>
                                                 <!--Afficher nom tooltip-->       
                                 <script LANGUAGE="JavaScript" src="../../js/index_tootip.js"></script>
                                                   <!--Afficher keure Gmt--> 
                                   <script LANGUAGE="JavaScript" src="../../js/gmt.js"></script> 
                              <!-- afficher ou masquer les noms de régions et changer de langue...-->
                                 <script LANGUAGE="JavaScript" src="../../js/nom_langue.js"></script>
                                        <script src='../../js/afficher_cacher.js'></script>
 
 
</body>
</html>

[Beginner.]

Nota : sur la liste je pense qu'il est plus judicieux d'utiliser la délégation d'événements.

+1 ! Je suis d’accord d'ailleurs c'est exactement ce que je me suis dit dans ce fil et dans l'autre récent dans lequel il est question d'une liste à laquelle on ajoute la fonction plier/déplier...

C'est moins gourmand en ressources (mémoire et autres), il n'y a qu'un seul listener pour l'ensemble ce qui est beaucoup plus pratique (on peut ajouter ou supprimer autant d'item que l'on veut le code reste le même, pas besoin d'ajouter ou supprimer à chaque fois un listener).

J’essaie autant que possible d'utiliser cette façon de faire surtout après avoir lu les problèmes que cela pouvait poser au niveau libération mémoire (par exemple une question encore en suspens pour moi : est-ce suffisant de supprimer proprement un élément du DOM pour libérer la mémoire ou bien il faut aussi supprimer l’éventuel listener lui étant associé ? Si on ajoute/supprime beaucoup d’éléments cela peut poser problème au bout d'un moment...).

[NoSmoking]

Au début j'ai cru que c’était du aux oignons que je venais d’éplucher mais la vérité est bien plus cruelle, c'est ton code qui a failli me faire perdre la vue

• Pour commencer :
Il existe des indenteurs de code, une rapide recherche avec « beautifier code » comme mots clé devrait te retourner multiples outils, j'ai rarement vu du code HTML centré autant dire qu'à lire c'est la galère compléte.

Dans ton code il est inutile voire néfaste de charger plusieurs bibliothèques surtout quand ce n'est pas la même version

• ligne #13	: <script src="../../js/jquery-3.3.1.min.js"></script>
• ligne #589	: <script LANGUAGE="JavaScript" src='../../js/2.1.3_jquery.min.js'></script>

Profite de l'occasion pour supprimer le LANGUAGE="JavaScript" attribut de la balise <script> obsolète.

Il reste une horreur avec un magnifique document.write en plein milieu de ton code il y a plus élégant à faire.

Aller on va en rester là !

• Concernant ton problème
Compte tenu de ce que tu cherches à réaliser, ce n'est pas exactement ce que j'avais entrevu à la première lecture mais pas loin, je reviens sur ce que j'ai dis avant concernant la gestion des événements lorsque je disais de laisser le SVG s'en charger.

Comme tu as différents types d'éléments à gérer, DOM et SVG, je pense que le plus prudent est de gérer cela via les événements du DOM et de ne pas mixer avec les <animate>.

Comme tu charges la bibliothèque jQuery, sans l'utiliser d'ailleurs, le code devient relativement simple à écrire, si il fallait repasser en « vanilla » cela ne sera pas plus compliqué mais plus verbeux.

Le code qui se charge donc des effets sur le mouseenter et mouseleave :

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
// récup. des éléments concernés
var oLIs = $("#liste li");
var oPaths = $("[id^='path']");
var oVignettes = $("#vignette g");
/**
 * fonction appliquée au survol in/out
 * Attention : les différents éléments doivent être dans le même ordre
 * @param {Object} event - mouse event
 */
function handleShowHide(event) {
  var action = event.type === "mouseenter" ? "addClass" : "removeClass";
  // get position élément
  var tagName = this.tagName;
  var index = $(this).index(tagName);
  // affiche la vignette correspondante
  oVignettes.eq(index)[action]("mouse-enter");
  // colorise le path correspondant
  oPaths.eq(index)[action]("mouse-enter");
}
// affectation des événements
oLIs.on("mouseenter mouseleave", handleShowHide);
oPaths.on("mouseenter mouseleave", handleShowHide);

Pour que cela fonctionne il suffit, comme mis en commentaire, que les éléments à manipuler soient dans le même ordre les uns par rapport aux autres.

Je te mets un code test qui reprend ce qui est dit ci-dessus, le code est issu de ton 1^er code et non pas du dernier fourni.

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mouseover/out sur SVG</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1911913">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font: 1em/1.5 Verdana,sans-serif;
}
main {
  display: block;
  margin: auto;
  max-width: 60em;
}
h1 {
  margin: 0;
  color: #069;
}
#liste {
  display: inline-block;
  padding: 0;
  border: 1px solid #CCC;
  list-style: none;
  cursor: pointer;
}
  #liste li {
    margin: 1px;
    line-height: 1.75;
  }
  #liste li:hover {
    background: #DDD;
  }
  #liste a {
    display: block;  
    padding: 0 .5em;    
    text-decoration: none;
  }
#carte {
  width: 800px;
  margin: auto;
  padding: .5em;
  border: 1px solid #069;
}
text {
  fill: white;
}
path {
  stroke: white;
  stroke-width: 1;
  fill: #000;
  fill-opacity:.75;
}
#vignette g {
  opacity: 0;
  transition: all .3s;
}
#vignette text {
  display: block;
  font-size: 1em;
  font-weight: bold;
  fill: #069;
}
path.mouse-enter {
  fill: #ABC;
  fill-opacity: 1;  
}
path.mouse-enter ~ text {
  fill: #00F;
}
#vignette g.mouse-enter {
  opacity: 1;
}
</style>
</head>
<body>
<main>
  <header>
    <h1>Circonscriptions de l'Allier</h1>
  </header>
  <section>
    <ul id="liste">
      <li><a href="1_circonscription.html" target="myFrame">1<sup>ére</sup> Circonscription</a></li>
      <li><a href="2_circonscription.html" target="myFrame">2<sup>éme</sup> Circonscription</a></li>
      <li><a href="3_circonscription.html" target="myFrame">3<sup>éme</sup> Circonscription</a></li>
    </ul>
  </section>
  <section id="carte">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="640" viewBox="-6 0 1000 800">
      <g>
        <a id="region-01" xlink:href="europe/france/1ére_circonscription_circonscription.html" target="myFrame">
          <path id="path_01" d="M398.5,337.7l-8.4-0.6l-13.1-6.2l-5.4,1.3l-2.2,5.1l-2.8,0.4l-9.2-6l0.7-5.8l-2.3-5.4l-15.1-9l-0.4-0.2l-6.6-9.6l-17.1-11l-9.4-14l5.7,1.2l19.4-6l7.2-4.9l8.3,1.4l3.3-4.7l-1.6-8l-8.1-14l24.1-15.5l1-10.8l5.1-2.7l-14.6-22l-7.3-4.1l-0.4-11.7l-2.5-0.6l-1.1,2.3l-4.8-6.7l-19.9-10.8l-1.6-5.4l1.4-5.5l-6.9-5l7.3-3.9l-3.4-13l1.4-5.2l7.9,2.3l7.1-17.5l-12.9-8l-0.6-13.2l17.7-15.3l2.9-7.9l10.7-4.7l6.9-4.8l-0.9-5.5l4.5-3.5l8.1-2.6l5.1,1.7l7.3,0.4l4.3-9.4l11.5,0.4l9.6,5.4l11.3-2.4l6.6,5.4l2.6-1.3l3.2,18.5l7,12.6L459,88.4l12.2,3.8l14.1,4.8l10.3,14.5l1.3,1.7l10.5,14.4l21.4,10.2l6.8-3.7l6.2-5.7l1.5-5.4l2.7-0.8l14.8-8.6l5.1-6.9l8.3,0.8l0.2-0.1l8.5-0.6l3.7,10.9l7.8,12l17.3,3l5.1-3l5.5-1.9l6.2-9.7l2-8.4l5.4-2.1l14.2,3.2l11.3-0.9L659,118l1.1,5.5l10.1,4.2l2.4,4.9l0,8.5l-4.1,4l0.1,5.5l-2.6,1.2l5.2,2.7l2.4,5.3l16.1,0.6l2-1.8l0.1-5.6l19.4-20.6l8-1.9l4.9,6.7l2.9,0l3.7-4.3l3.2-4.5l-6.3-13l-0.7-14.1l12.2,5.4l4.7-5.9l2.2,4.9l8.7-7.1l-10.3-20.2l8.5-11.3l5.5,9.3L770,75l4.3,3.7l-3.8,7.2l8.6,14l0,14l7.8,2.7l2.5,13.8l10,4.6l-1.5,8.3l14.9,9.2l2,5.5l0.1,2.5l2.9,5.6l2.6,8l4.1,3.8l4.3,3.9l-0.3,2.9l-5.7,10.1l3.5,4.4l8.6,1.4l2.6,16.6l0.8,6.6l0.3,13.1l-3.9,4.9l-0.9,5.5l5.3,6.8l8.1,2.8l8.3-2.4l4.3,3.5l1.7,5.3l7.9,0.8l4.8,6.4l5.2-0.8l14.6-9.2l5.4,6.3l-3.6,4.6l2.8,4.5l0.4,0.1l5.4-2l5,2.2l-2,14.3l2.8,4.9l15.7,7.3l3.6-3.8l2.4-5.2l7.8-3.7l10.3,4.3l13.8,0.3l-3.4,9.8l7.4,0.7l-8.2,11.5l0.8,8.5l-7.5,8.1l2.4,5.2l-4.8,1.5l-5.6,5.8l-7.9,2.1l-4.4-16.4l-9.8-10l-4.5,3.5l-2.2,8.1l-5.4-1.3l-3.3,7.8l3.5,7.4l-0.5,5.5l-6.2,8l-15.1,7.4l-2.9,0.2l-2.5-5.2l-5.8-8.9l-10.1,3.8l-3.4-9.8l-5.2-2l-6.3,5.5l-10.5-4.3l-9.6,5.3l-3.3-7.7l-10.6,2.9l-5-2.8l2.6-10.8l-4.6-2.9l0.8-2.8l-2.9,0.6l-2.8,5.1l-8.6,1.5l-12.9,6.9l-2.4,5.3l2.2,4.9l-2.2,1.7l-11.5-7.7l-2.6,0.8l-1.5,5.3l-8.4-1.2l-5.7-9.8l-8.2,1.6l-8.2-11.1l-10.6,8.4l-2.1,7.8l-5,1.3l4.8,13.4l-2.8,16.5l-5,2.1l-8.5-1.5l-5.3,2.5l-13-6l0.1,2.4l-8,4.8l-3.6,7.3l0.9,5.4l3.7,4l2.3-1.5l13.4,16.6l7.5,4.9l7.3,4l-0.3,14.3l4.2,7.6l10.3,15.1l2.6,0.6l2.8,0.4l-3.3,7.7l1.8,2.2l-6.2,8.8l-7.6,3.3l-1.2,8.3l-7.8,1.5l-0.1,14l5.3-1.2l4.4,3l4.7,15.3l-2.2,1.9l-11.7,6.6l-5.6,0.2l-7.3,4.4l-6.2,5.4l-10.5,0.5l-6.5-4.3l-2.5,0.9l-10,9.5l-3.9,3.9l-7.9,2.5l-0.4-5.5l3.6-7.3l-1-13.7l2.5-4.7l-18.6,1.7l-4.6-2.7l-8.1-30.8l-17.6-9.2l-2.8-0.1l-4.2,5.5l-8.4-0.9l-1.3-2.6l-6.1,9.4l2.2,7.7l-3.4,4.4l-12.8,2.4l-7-3.2l4.4,19.7l-3.7,7.6l-10.2,8.4l-3,10l-4.4,4.8l-10.4,3.1l-12.9-6l-5,2.1l-8.1,11.1l-10.1-9.8l-5.6-0.4l-0.1-7.4l-4.1-2.1l-9.3-4.9l-3.1-5.3l-2.5,1.4l-8.5-7.1l3.9-16.1l-7.6-11.4l-9.8-4.5l1.4-7.6l-4.2-6.8l-4.9,6.4l-2.8,0.2l-6-5.6l-6.6-11.9l-2.2-1.5l-7.6,2.4l-4.6-2.6l-0.9-5.8l3.9-14.1l11-11.8l3.4-10.1l-5.5-6.1l2.1-5l-5.2-6.6l-4.8-3.2l-0.3-5.8l-2.2-1.9l-11.5-0.2l-7.8-3.7l2-13.7l2.8-4.8l-1-5.4l-0.4-5l-6.5-11.9l4.1-15.8l5.4-1.3L398.5,337.7z" />
          <text transform="matrix(1.0064 0 0 1 567.1992 288.5073)">
            <tspan x="-40" y="0">1</tspan>
            <tspan x="-30" y="0" dy="-1ex">ére</tspan>
            <tspan x="0" y="0">Circonscription</tspan>
          </text>
        </a>
      </g>
      <g>
        <a id="region-02" xlink:href="europe/france/2éme_circonscription_circonscription.html" target="myFrame">
          <path id="path_02" d="M223.9,111l7.1-8.6l8.4-0.9l1-14.1l14.9-7.5l2.2,1.5l5.4,13.1l6.5,5.5l2,5.2l4.7-2.9l4.7,1.8l4.6-2.9l6.2-9.3l19.7-1.5l5.3,6l5.2,1.3l12.9,8l-7.1,17.5l-7.9-2.3l-1.4,5.2l3.4,13l-7.3,3.9l6.9,5l-1.4,5.5l1.6,5.4l19.9,10.8l4.8,6.7l1.1-2.3l2.5,0.6l0.4,11.7l7.3,4.1l14.6,22l-5.1,2.7l-1,10.8l-24.1,15.5l8.1,14l1.6,8l-3.3,4.7l-8.3-1.4l-7.2,4.9l-19.4,6l-5.7-1.2l9.3,14l17.1,11l6.6,9.6l0.4,0.2l15.1,9l2.3,5.4l-0.7,5.8l9.2,6l2.8-0.4l2.2-5.1l5.4-1.3l13.1,6.2l8.4,0.6l4,4.3l-5.4,1.3L393,359l6.5,11.9l0.4,5l1,5.4l-2.8,4.8l-2.1,13.7l7.8,3.7l11.5,0.2l2.2,1.9l0.3,5.8l4.8,3.2l5.2,6.6l-2.1,5l5.5,6.1l-3.4,10.1l-11,11.8l-3.9,14.1l0.9,5.8l4.6,2.6l7.6-2.4l2.2,1.5l6.6,11.9l6,5.6l2.8-0.2l4.9-6.4l4.2,6.8l-1.4,7.6l9.8,4.5l7.6,11.4l-3.9,16.1l8.5,7.1l2.5-1.4l3.1,5.3l9.3,4.9l4.1,2.1l0.1,7.4l-2.6-0.2l-11.9,10.1l3.6,4.3l-6.3,9.7l3.8,13.5l-3.3,4.7l1.3,0.8l-1.2,4.6l5,1.5l-3.1,4.6l2.5,7.6l-6.5,4.3l2.3,10.8l-7-0.7l-0.8-11l-4.9-13.3l-2.8-0.5l-9.6,6.4l-11,3.2l-6.5-5.6l-7.5,3.8l-5.3,0.4l-4.6-10l-8.5-7.2l-8.2-1.1l-4.8,2.3l-4.2-6.1l-5.2-15.8l-1.9-19.2l-5,2.2l-16-4.5l-2.8-3.8l4.8-3.1l0.5-5.9l-4.2-13.7l1.8-5.6l4.6-3.6l7.2-3.2l1.5-2.4l-3.9-7.2l7.9-7.7l-5.3-1.2l-6.3-5.2l-11.7,0.6l-11.2-3.7l-11.7,1.7l-3.6-4.6l-23.4,12.3l-0.9,8l3.3,10.1l-2.5,1.3l-1,11.1l-4,7.3l-13.6-2l-9.9-10l-5.7,0.6l-7.8-8.2l-8-2.9l-6,9.5l4.6,13l-4.3,6.8l0.3,5.4l-11.8,0.4l-10.2,4.4l-4.9,2.9l-0.8,11.3l-3.5,4.4l-2.8,10.7l-1.3,2.2l-4.4,10.3l-4.4,3.7l-5.6,1.1l-7.8-2.8l-12.6-6.7l-6.1,3.4l-9.7-10.9l-5.3-2.6l-3.6-26l-10-1.6l-7.7-7.2l-0.1-7.7l-3.8-7.1l-3.8-29.7l0.6-0.7l-15.8-8.8l-6.4-15.6l1-5.5l0.4-2.9l-5.8-6.2l-15.7-7.2l-5.5,1.4l-4.3,7.3l-2.7-0.7l-3.3-10.5l2.9-10.1l-18.8-17.8l-1.2-0.3l-8.9,16l-2.5,1.3L40,434.1l-13.7-1.5L15,424.7l-1.7-5.3l-5.5-1.2l3.3-4.4l1-7.4l7.9-7.6l8,0l-0.4-2.7l-2.9-7.8l-10.9,2l-6.7-4.8l-8.1-1.2l-1.2-2.5l-3.7-18.6l2.1-1.8l-1.9-5.4l1.3-2.6l-1.5-5.7l3.6-20.1l12-20.1l6.7,5.8l6-4.1l1.3-7l-2.7-4.9l5.3-9.8l9.9-10.1l9.8-5.6l9.1,0.1l17.6-2.1l7.6-4.3l5.8,0.6l4.7,3.5l14-4.6l7.2-5.2l7.9,1.3l0,5.6l2.1,1.9l5.5-1.1l3.4-4.5l5.5-0.5l6.7,8.1l23-15.7l19.9-10.8l1.3-2.5l-4.4-7.3l1.5-8.1l-5.7-18.7l-8.4,0.6l-3.8-10.1l-5.2-2.2l11.7-6.3l-2.3-7.9l6.8-8.7l-1.9-8.2l-15.1-4.9l2.1-5.7l20.6-8.4l0.5,5.6l9.8,5l4.4-10.2l0.2-2.8l-5.9-5.9l1.1-8.4l2.7-0.8l11.5,1.1l4.7-7l12.5-6.1L223.9,111z" />
          <text transform="matrix(1.0064 0 0 1 188.2813 362.7324)">
            <tspan x="-40" y="0">2</tspan>
            <tspan x="-30" y="0" dy="-1ex">éme</tspan>
            <tspan x="10" y="0">Circonscription</tspan>
          </text>
        </a>
      </g>
      <g>
        <a id="region-03" xlink:href="europe/france/3éme_circonscription_circonscription.html" target="myFrame">
          <path id="path_03" d="M690.7,544.3l-10.5,0.5l-6.5-4.3l-2.5,0.9l-10,9.5l-3.9,3.9l-7.9,2.5l-0.4-5.5l3.6-7.3l-1-13.7l2.5-4.7l-18.6,1.7l-4.6-2.7l-8.1-30.8l-17.6-9.2l-2.8-0.1l-4.3,5.5l-8.4-0.9l-1.3-2.6l-6.1,9.4l2.2,7.7l-3.4,4.4l-12.8,2.4l-7-3.2l4.4,19.7l-3.7,7.6l-10.2,8.4l-3,10l-4.4,4.8l-10.4,3.1l-12.9-6l-5,2.2l-8.1,11.1l-10.1-9.8l-5.6-0.4l-2.6-0.2l-11.9,10.1l3.6,4.3l-6.3,9.7l3.8,13.5l-3.3,4.7l1.3,0.8l-1.2,4.6l5,1.5l-3.1,4.6l2.5,7.6l-6.5,4.3l2.3,10.8l3,2.4l5.5,5.9l18.6,4.2l11.1-0.1l0.1-5.7l15.4,0.7l4.9-1.9l4.2,6.3l1.2-2.3l5,0.3l0.3,4.7l5.4,1l8.2-2.4l11.1,2.4l5-2.5l5.1,2.3l5.2-2.1l-0.4,2.5l8.9,3l9.1,4.6l-0.4,7.8L624,657l7.9-8.3l11.4-1.8l9.9-6.3l2.3,5.4l6.5,5.9l5.7,0.4l5.1-2.9l2.1,3.6l1.9,7.4l6.5,8.5l-5,2.3l2.5,7.9l-1.9,16.3l5.2-2.1l7.8-3l19.5-0.1l0.2-4.9l7.7-1.5l2.5,0.7l1.5,4.7l4.5-0.2l2.5,0.5l0.9-2.6l13.4,0.4l6.1-5.2l7.4,7.6l7.1,14.4l7.2,11.4l3.5,18.7l4.1-3.6l15.9,3.5l6.6,4.3l2.6,12.7l6.6,7.9l0.2-14.2l6-6.1l-1.6-8.4l4.5-6.9l18.8,6.2l5-2.8l2.6-8.1l2.8-0.7l12.5,6.5l5.2-2.1l5.5-6.5l5.5-1.2l7.8-2.9l0.7-5.5l4.2-3.8l0.2-0.2l-2.7-0.4l-1.5-5.3l-5.1-10.3l-1.3-14.5l-4.7-13.6l9.1-30.8l-10.7-16.5l-5.4-1.7l4.5-15.9l-4.5-10l-1-10.8l9.4-4.1l-10-20l-1.1-11.4l3.1-7.5l-5.3-10.1l-6.7-5.4l-2.4-11l5.2-2.2l14.1,3.8l2.9-15.5l24.8-4.1l10.6-1.3l5.1-9.9l5.4,1.5l7.3-1.8l-4-7.4l5.4-6.9l17.1-2.5l9.4-6.2v-1.6l0.7-11.4l11.6-1.1l8.4,2.3l12-7.9l-5.9-0.1l-5-0.9l1-18.3l2.4-16.3l-5.6-12.3l-2.5-10.6l6-8.1l-1.9-7.3l-0.3-2.7l6.5-4.5l-3.5-9.9l7.7-2.9l0.9-2.7l-3.9-7.4l2.3-5.2l-1.6-5.1l-11.3-7.6l-2.7-4.7l-5.3,1.3l-8.2,11.5l0.8,8.5l-7.5,8.1l2.4,5.2l-4.8,1.5l-5.6,5.8l-7.9,2.1l-4.4-16.4l-9.8-10l-4.5,3.5l-2.2,8.2l-5.4-1.3l-3.3,7.8l3.5,7.4l-0.5,5.5l-6.2,8l-15.1,7.4l-2.9,0.2l-2.5-5.2l-5.8-8.9l-10.1,3.8l-3.4-9.8l-5.2-2l-6.3,5.4l-10.5-4.3l-9.6,5.3l-3.3-7.7l-10.6,2.9l-5-2.8l2.6-10.8l-4.6-2.8l0.8-2.8l-2.9,0.6l-2.8,5.2l-8.6,1.5l-12.9,6.9l-2.4,5.3l2.2,4.9l-2.2,1.7l-11.5-7.7l-2.6,0.8l-1.5,5.3l-8.4-1.2l-5.7-9.8l-8.2,1.6l-8.2-11.1l-10.5,8.4l-2.1,7.8l-4.9,1.3l4.8,13.4l-2.8,16.5l-5,2.1l-8.5-1.5l-5.3,2.5l-13-6l0.1,2.4l-7.9,4.8l-3.6,7.3l0.9,5.4l3.7,4l2.3-1.5l13.4,16.6l7.5,4.9l7.3,4l-0.3,14.3l4.2,7.6l10.3,15.1l2.7,0.6l2.8,0.4l-3.3,7.7l1.7,2.2l-6.2,8.8l-7.6,3.3l-1.2,8.3l-7.8,1.5l-0.1,14l5.3-1.2l4.5,2.9l4.7,15.3l-2.2,1.9l-11.7,6.6l-5.6,0.1l-7.3,4.4L690.7,544.3z" />
          <text transform="matrix(1.0064 0 0 1 767.5684 510.2725)">
            <tspan x="-40" y="0">3</tspan>
            <tspan x="-30" y="0" dy="-1ex">éme</tspan>
            <tspan x="10" y="0">Circonscription</tspan>
          </text>
        </a>
      </g>
      <!-- les vignettes -->
      <g id="vignette">
        <g>
          <image xlink:href="http://www2.assemblee-nationale.fr/static/tribun/15/photos/718720.jpg" width="150" height="192" />
          <text transform="translate( 0, 750) scale(1.5)">
            <tspan x="0" y="0">Jean-Paul Dufrègne,</tspan>
            <tspan x="0" dy="2ex">député GDR de la 1ère circonscription de l'Allier</tspan>
          </text>
        </g>
        <g>
          <image xlink:href="http://www2.assemblee-nationale.fr/static/tribun/15/photos/718728.jpg" width="150" height="192" />
          <text transform="translate( 0, 750) scale(1.5)">
            <tspan x="0" y="0">Laurence Vanceunebrock-Mialon</tspan>
            <tspan x="0" dy="2ex">députée LREM de la 2ème circonscription de l'Allier</tspan>
          </text>
        </g>
        <g>
          <image xlink:href="http://www2.assemblee-nationale.fr/static/tribun/15/photos/718736.jpg" width="150" height="192" />
          <text transform="translate( 0, 750) scale(1.5)">
            <tspan x="0" y="0">Bénédicte Peyrol</tspan>
            <tspan x="0" dy="2ex">députée LREM de la 3ème circonscription de l'Allier</tspan>
          </text>
        </g>
      </g>
    </svg>
  </section>
</main>
<script>
// récup. des éléments concernés
var oLIs = $("#liste li");
var oPaths = $("[id^='path']");
var oVignettes = $("#vignette g");
/**
 * fonction appliquée au survol in/out
 * Attention : les différents éléments doivent être dans le même ordre
 * @param {Object} event - mouse event
 */
function handleShowHide(event) {
  var action = event.type === "mouseenter" ? "addClass" : "removeClass";
  // get position élément
  var tagName = this.tagName;
  var index = $(this).index(tagName);
  // affiche la vignette correspondante
  oVignettes.eq(index)[action]("mouse-enter");
  // colorise le path correspondant
  oPaths.eq(index)[action]("mouse-enter");
}
// affectation des événements
oLIs.on("mouseenter mouseleave", handleShowHide);
oPaths.on("mouseenter mouseleave", handleShowHide);
</script>
</body>
</html>

Voila, teste et analyse, cela devrait te faire une base de travail.

[apdf1]

Salut NoSmoking

Oui, toi tu es prof....., moi un autodidacte voila la différence.
je m'excuse d'avoir failli te faire perdre la vue sa m'aurais obliger de te payer un ophtalmo
Je prend tes remarques comme bon conseil et j'essaye de les appliqués, pas toujours facile à mon niveau.

Suite à tes conseils je me suis rendu sur des sites d' indenteurs de code tel que "https://codebeautify.org/" il est vrai qu'après l'avoir modifier il est plus clair à lire.

Pour revenir à ton code c'est vrai qu'il est plus court et plus clair.
Il fonctionne très bien, rien à dire, si sauf une chose, dans mon code qui est

autant dire qu'à lire c'est la galère complète

lorsque je passe sur les paths, dans ma liste, la région concerner change de couleur.

Voilà pour aujourd'hui sa seras pas mal.

Je te remercie

Max

[NoSmoking]

Il te faut également lier les <li> via la collection jQuery oLIs en ayant pris soin de gérer cela dans le CSS.
CSS

Code css :

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

1
2
3
4
#liste li.mouse-enter,  /* prise en compte avec la class */
#liste li:hover {
  background: #DDD;
}

pour la liaison la fonction devient, elle pourrait d'ailleurs être optimisée avec une boucle mais bon ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function handleShowHide(event) {
  var action = event.type === "mouseenter" ? "addClass" : "removeClass";
  // get position élément
  var tagName = this.tagName;
  var index = $(this).index(tagName);
  // affiche la vignette correspondante
  oVignettes.eq(index)[action]("mouse-enter");
  // colorise le path correspondant
  oPaths.eq(index)[action]("mouse-enter");
  // simule survol de la liste
  oLIs.eq(index)[action]("mouse-enter");
}

[apdf1]

Re,

Non je pense que l'on ses mal compris ou je me suis mal exprimer?

Lorsque je passe sur la carte, dans la liste le nom correspondant à la région de la carte devient de couleur rouge.

Max

[Invité]

Bonjour,

As-tu compris le code de NoSmoking ?

[apdf1]

Bonjour

Je fait de mon mieux pour comprendre.

[Invité]

Pour ma part, je n'ai pas tout compris...
Mais ce n'est pas à moi de lui poser des questions sur son code.

1- Montre-lui les bouts de code que tu ne comprends pas.
Il se fera certainement un plaisir de te les expliquer.

2- Tu peux aussi mettre des console.log() dans le code, pour voir ce qui s'y passe.

"Comprendre, c'est apprendre."
Anne Onyme

[apdf1]

Re,

je ne comprend pas ceci

Code :

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

1
2
3
4
#liste li.mouse-enter,  /* prise en compte avec la class */
#liste li:hover {
  background: #DDD;
}

[Invité]

Les <li> avec la classe "mouse-enter" (ajoutée/supprimée via le code JS) et le <li> survolé (:hover) prennent un fond gris.

Où est la difficulté ?

[apdf1]

Re,

C'est bien se que je dit.

je ne veut pas que le <li> survolé (:hover) prennent un fond gris je veut que le texte change de couleur au passage de la souris sur la carte

[Invité]

Et tu n'es pas capable de modifier ce petit bout de code ??

[apdf1]

Re,

Je vois que tu es toujours aussi aimable, je ne s'est pas quel age que tu as, mais moi j'ai 73 ans et je fait ceci par loisir non pas pour me faire engueuler.

Donc comme tu dit je ne suis pas capable de modifier ce petit bout de code!