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
| <!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;
}
#liste li.mouse-enter /* prise en compte avec la class */
{
background: #caf70c;color: #f80a0a;
}
#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> |
Partager