From 5899630867b9dc9ccf780a7a5a672bb94de4e55e Mon Sep 17 00:00:00 2001
From: alicestrt <alice.strt@gmail.com>
Date: Mon, 30 Nov 2020 17:20:02 +0100
Subject: [PATCH] played with current time

---
 wells/index.html           | 21 +++++++++++++++++----
 wells/static/css/style.css |  8 ++++----
 wells/static/js/d3_map.js  |  2 +-
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/wells/index.html b/wells/index.html
index 5010279..5cac39b 100644
--- a/wells/index.html
+++ b/wells/index.html
@@ -85,10 +85,10 @@
     <p id="legend_title">Map legend</p>
 
     <div class="map_legend">
-    <div class="box1"></div> <p>Folklore literature</p>
-    <div class="box2"></div> <p>Islamic Mysticism</p>
-    <div class="box3"></div> <p>Contemporary poets</p>
-    <div class="box4"></div> <p>Contemporary musicians</p>
+    <div id="box1" onclick="popup_bg(120)"></div> <p>Folklore literature</p>
+    <div id="box2" onclick="popup_bg(300)"></div> <p>Islamic Mysticism</p>
+    <div id="box3" onclick="popup_bg(700)"></div> <p>Contemporary poets</p>
+    <div id="box4" onclick="popup_bg(1000)"></div> <p>Contemporary musicians</p>
   </div>
   </div>
 </div>
@@ -110,6 +110,19 @@
   }
 </script>
 
+<script>
+function popup_bg(time) {
+  var box = document.getElementById("audioBG");
+  if (box.currentTime>0) {
+  box.currentTime = 0;
+}
+  box.currentTime = time;
+  box.play();
+  btn.innerHTML = "(Pause)";
+
+};
+</script>
+
  <script>
 function includeHTML() {
   var z, i, elmnt, file, xhttp;
diff --git a/wells/static/css/style.css b/wells/static/css/style.css
index 0d37493..63cb36a 100644
--- a/wells/static/css/style.css
+++ b/wells/static/css/style.css
@@ -131,7 +131,7 @@ stroke-dasharray:6px;
 
 /* map legend */
 
-.box1 {
+#box1 {
   height: 15px;
   width: 15px;
   margin-left : 10px;
@@ -141,7 +141,7 @@ stroke-dasharray:6px;
   background-color: #bedbbb;
 }
 
-.box2 {
+#box2 {
   height: 15px;
   width: 15px;
   margin-left : 10px;
@@ -151,7 +151,7 @@ stroke-dasharray:6px;
 
 }
 
-.box3 {
+#box3 {
   height: 15px;
   width: 15px;
   margin-left : 10px;
@@ -161,7 +161,7 @@ stroke-dasharray:6px;
 
 }
 
-.box4 {
+#box4 {
   height: 15px;
   width: 15px;
   margin-left : 10px;
diff --git a/wells/static/js/d3_map.js b/wells/static/js/d3_map.js
index 776a5e4..f237799 100644
--- a/wells/static/js/d3_map.js
+++ b/wells/static/js/d3_map.js
@@ -82,7 +82,7 @@ function connectedNodes() {
 
   node.append("image")
       // .attr("xlink:href", "/static/images/squig2.png")
-      .attr("xlink:href", "/static/images/circleB.png")
+      .attr("xlink:href", "../images/circleB.png")
       .attr("x", -8)
       .attr("y", -8)
       .attr("width", 16)