Using native HTML hyperlinks for bookmark/link navigation

web/viewer.css

@@ -20,6 +20,7 @@ body {
   top: 0px;
   height: 40px;
   width: 100%;
+  z-index: 1;
 }
 
 .separator {
@@ -67,6 +68,7 @@ span#info {
   transition: left 0.25s ease-in-out 1s;
   -moz-transition: left 0.25s ease-in-out 1s;
   -webkit-transition: left 0.25s ease-in-out 1s;
+  z-index: 1;
 }
 
 #sidebar:hover {
@@ -180,6 +182,20 @@ canvas {
   width: 816px;
   height: 1056px;
   margin: 10px auto;
+  position:relative;
+}
+
+.page > a {
+  display: block;
+  position: absolute;
+}
+
+.page > a:hover {
+  opacity: 0.2;
+  background: #ff0;
+  box-shadow: 0px 2px 10px #ff0;
+  -moz-box-shadow: 0px 2px 10px #ff0;
+  -webkit-box-shadow: 0px 2px 10px #ff0;
 }
 
 #viewer {

web/viewer.js

@@ -212,39 +212,24 @@ var PageView = function(container, content, id, width, height,
   };
 
   function setupLinks(canvas, content, scale) {
+    function bindLink(link, dest) {
+      if (dest) {
+        link.onclick = function() {
+          PDFView.navigateTo(dest);
+          return false;
+        };
+      }
+    }
     var links = content.getLinks();
-    var currentLink = null;
+    for (var i = 0; i < links.length; i++) {
-    if (links.length > 0) {
+      var link = document.createElement('a');
-      canvas.addEventListener('mousemove', function(e) {
+      link.style.left = Math.floor(links[i].x * scale) + 'px';
-        var x = e.pageX;
+      link.style.top = Math.floor(links[i].y * scale) + 'px';
-        var y = e.pageY;
+      link.style.width = Math.ceil(links[i].width * scale) + 'px';
-        for (var p = canvas; p; p = p.offsetParent) {
+      link.style.height = Math.ceil(links[i].height * scale) + 'px';
-          x -= p.offsetLeft;
+      link.href = links[i].url || '';
-          y -= p.offsetTop;
+      bindLink(link, links[i].dest);
-        }
+      div.appendChild(link);
-        x /= scale;
-        y /= scale;
-        var i, n = links.length;
-        for (i = 0; i < n; i++) {
-          var link = links[i];
-          if (link.x <= x && link.y <= y &&
-            x < link.x + link.width && y < link.y + link.height) {
-            currentLink = link;
-            canvas.style.cursor = 'pointer';
-            return;
-          }
-        }
-        currentLink = null;
-        canvas.style.cursor = 'default';
-      }, false);
-      canvas.addEventListener('mousedown', function(e) {
-        if (!currentLink)
-          return;
-        if (currentLink.url)
-          window.location.href = currentLink.url;
-        if (currentLink.dest)
-          navigateTo(currentLink.dest);
-      }, false);
     }
   }