played with current time

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;

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;

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)