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
| <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<style>
div.map {
width: 612px;
height: 585px;
background: #ccc;
}
[id^="dep-"] {
position: absolute;
padding: 1em;
background: green;
color: white;
}
[id^="dep-"] {
display: none;
pointer-events: none;
}
svg {
display: block;
width: 612px;
height: 585px;
}
</style>
</head>
<body>
<div id="dep-75">Texte sans balises HTML<h2>TITRE</h2><span>Rencontre avec gens - 31/01/2019 - 13/02/2019</span><aside>1. Rencontre avec Casimir<br>2. Groupe de travail</aside></div>
<div id="dep-95">Texte sans balises HTML<h2>95</h2><span>Rencontre avec gens - 31/01/2019 - 13/02/2019</span><aside>1. Rencontre avec Casimir<br>2. Groupe de travail</aside></div>
<div class="map" id="map">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 612 585">
<a href="#" onMouseOver="document.getElementById('dep-75').style.display='block';" onMouseOut="document.getElementById('dep-75').style.display='none';"><path id="FR-75" title="Ville de Paris" class="land" d="M311.53,141.03L314.45,141.07L315.23,143.69L315.23,143.69L315.27,145.18L317.5,144.8L317.16,145.98L314.7,145.24L311.9,146.11L311.9,146.11L307.49,143.87L308.32,142.55L309.4,143.18z" cursor="pointer"></path></a>
<a href="#" onMouseOver="document.getElementById('dep-95').style.display='block';" onMouseOut="document.getElementById('dep-95').style.display='none';"><path id="FR-95" title="Val-d'Oise" class="land" d="M285.85,120.07L286.26,119.49L287.35,120.55L286.3,121.67L287.42,123.28L289.99,123.01L290.35,123.76L291.37,123.55L291.31,124.35L296.11,123.96L297.15,123.12L298.23,123.61L301.51,121.43L302.15,122.71L303.5,122.48L303.81,123.41L304.29,122.81L305.23,124.39L307.22,123.39L307.58,125.14L310,124.63L311.17,122.94L312.99,125.37L313.71,124.63L316.41,125.46L316.17,126.28L317.24,125.81L319.06,127.27L318.5,127.99L320.24,128.4L321.15,126.86L321.31,128.48L322.65,129.65L322.65,129.65L321.77,130.85L322.8,131.71L320.79,133.22L321.01,133.96L321.01,133.96L318.5,136.69L316.39,137.61L313.35,136.4L312.06,137.41L310.51,136.86L309.85,137.88L309.85,137.88L306.49,140.49L306.49,140.49L306.65,137.78L305.38,137.64L304.99,135.71L303.13,135.22L303.15,133.61L299.11,134.84L297.82,133.35L295.56,133.34L294.32,131.69L293,133.62L291.97,132.62L292.58,131.11L291.11,129.89L286.66,131.89L284.58,129.78L281.9,129.82L281.9,129.82L283.93,126.4L284.62,121.36z" cursor="pointer"/></a>
</svg>
</div>
</body>
</html> |
Partager