在网页上使用 Annotorious 的问题答案

【问题标题】：Problems using Annotorious on web page在网页上使用 Annotorious 的问题
【发布时间】：2015-08-17 06:37:27
【问题描述】：

我在我的网页上使用 Annotorious 时遇到问题。我必须在我的页面上显示 OpenSeaDragon 图片，我做了什么，并且能够注释图像。我使用了这个页面的源代码http://annotorious.github.io/demos/openseadragon-preview.html，但是它不起作用，我在我的页面上看到了“添加注释”按钮，但是我无法选择区域来写东西。需要帮助，这是我的源代码：

<!DOCTYPE html>
<html>
  <head>
     <?php include 'includes/navbar.php' ?> 
       <?php include 'includes/connect_bdd.php';?>

    <title>Annotorious - Image Annotation for the Web</title>
    <link type="text/css" rel="stylesheet" media="all" href="annotorious/css/highlight.css" />
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script src="openseadragon.min.js"></script>
    <script type="text/javascript" src="annotorious/annotorious.min.js"></script>
    <style>
      #map-annotate-button {
        position:absolute;
        top:3px;
        right:3px;
        background-color:#000;
        color:#fff;
        padding:3px 8px;
        z-index:10000;
        font-size:11px;
        text-decoration:none;
      }
    </style>
    <script>
      function annotate() {
        var button = document.getElementById('map-annotate-button');
        button.style.color = '#777';

        anno.activateSelector(function() {
          // Reset button style
          button.style.color = '#fff';
        });
      }

      function init() {             
        var viewer = OpenSeadragon({
          id: "openseadragon",
          prefixUrl: "images/",
          showNavigator: false,
          tileSources:"PhotoDzi/TCGA-BH-A1ES-01Z-00-DX1.C54C809F-748F-4BB0-B018-A8A83A4134C0.svs.dzi"
        });
        
        anno.makeAnnotatable(viewer);
      }
    </script>
  </head>

  <body onload="init()";>
            
    <div class="content">
      <div class="content-inner">
        <div style="position:relative; width:640px; height:400px; margin-bottom:20px;">
          <div id="openseadragon" style="width:640px; height:400px; background-color:#fff;"></div>
          <a id="map-annotate-button" onclick="annotate(); return false;" href="#">ADD ANNOTATION</a>
        </div>

         <h4>About</h4>
            <?php
            $req = $bdd->query('SELECT * FROM miniatures WHERE titre=\'' . $_GET['titre'] . '\'');
            $image = $req->fetch();
            ?> 

            <?php
            $req->closeCursor();
            ?>
          </div>
        </div><!--/.sidebar-offcanvas-->
            
    <script type="text/javascript">
      jQuery(document).ready(function(){
        jQuery('pre.code').highlight({source:0, zebra:1, indent:'space', list:'ol'});
      });
    </script>
  </body>
</html>

【问题讨论】：

如果这里没有人回答，您可以尝试在groups.google.com/forum/#!forum/annotorious或github.com/annotorious/annotorious/issues提问
很抱歉 knitpick，尤其是在硅谷新闻语中显然可以接受“下载安装”之类的可憎之事，但“添加注释”则太过分了。请，它要么是“添加注释”，要么只是“注释”。（PS：恭喜你升职。）

标签： javascript php html annotations openseadragon

【解决方案1】：

我用最新的 Openseadragon 和我自己的 dzi 尝试了你的代码并取出了 php 并插入了一些文本，然后将hightlight.css替换为

"/theme-dark/annotorious-dark.css"

它似乎工作..

【讨论】：