diff --git a/wells/index.html b/wells/index.html
index bcca661..7baa67e 100644
--- a/wells/index.html
+++ b/wells/index.html
@@ -92,10 +92,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>
@@ -117,6 +117,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 20655f7..85aacb5 100644
--- a/wells/static/css/style.css
+++ b/wells/static/css/style.css
@@ -132,7 +132,7 @@ stroke-dasharray:6px;
 
 /* map legend */
 
-.box1 {
+#box1 {
   height: 15px;
   width: 15px;
   margin-left : 10px;
@@ -142,7 +142,7 @@ stroke-dasharray:6px;
   background-color: #bedbbb;
 }
 
-.box2 {
+#box2 {
   height: 15px;
   width: 15px;
   margin-left : 10px;
@@ -152,7 +152,7 @@ stroke-dasharray:6px;
 
 }
 
-.box3 {
+#box3 {
   height: 15px;
   width: 15px;
   margin-left : 10px;
@@ -162,7 +162,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 1ca6b3e..fbf3d9f 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)