From 04aa8d4964a86bf972e3b6265bd2926976c3bbc3 Mon Sep 17 00:00:00 2001
From: Yan Maniez <yanmaniez@hotmail.com>
Date: Sat, 4 Jan 2020 21:36:08 +0100
Subject: [PATCH] Toggles on/off

---
 Docs/alariantest.html | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)
diff --git a/Docs/alariantest.html b/Docs/alariantest.html
index 1c4b4a98..7679e180 100644
--- a/Docs/alariantest.html
+++ b/Docs/alariantest.html
@@ -4,9 +4,12 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<title>Alarian</title>
 	<style type"text/css">
-	.point {
+	.displayed .point {
 		fill: #88ffbb
 	}
+	.transparent .point {
+		fill: #ff000000
+	}
 	</style>
 	<!-- voir https://github.com/davidjbradshaw/image-map-resizer -->
 	<script type="text/javascript">
@@ -21,13 +24,24 @@
 			mySvg.style.width = "" + slider.value + "%";
 		}
 	}
+	function togglePoints() {
+		var mySvg = document.getElementById("mySvg");
+		if(mySvg.className.baseVal == "displayed") {
+			mySvg.className.baseVal = "transparent";
+		} else {
+			mySvg.className.baseVal = "displayed";
+		}
+	}
+	function toggleLabels() {
+		alert("TODO");
+	}
 	</script>
 </head>
 <body onload="init()" style="margin:0; padding:0">
 
 	<img id="myImage" src="alarian.png" alt="Alarian" />
 	
-	<svg id="mySvg" style="position: absolute; top: 0; left: 0" viewBox="0 0 2500 3250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink">
+	<svg id="mySvg" class="transparent" style="position: absolute; top: 0; left: 0" viewBox="0 0 2500 3250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink">
 
 		<!-- Norven -->
 		<a xlink:href="">
@@ -1017,7 +1031,15 @@
 
 	</svg>
 
-	<input type="range" min="30" max="250" value="100" class="slider" id="myRange" style="position: fixed; top: 0; left: 0" />
+	<div style="position: fixed; top: 0; left: 0">
+		<input type="range" min="30" max="250" value="100" class="slider" id="myRange" />
+		<br />
+		<input id="checkPoints" type="checkbox" onclick="togglePoints()" />
+		<label for="checkPoints">Points</label>
+		<br />
+		<input id="checkLabels" type="checkbox" onclick="toggleLabels()" />
+		<label for="checkLabels">Labels</label>
+	</div>
 
 	</body>
 </html>
