Image Annotatorの使い方

このテストページでのhead要素では次のように記述しています。ハイパーリンクのあるファイルは当サイト作成のものなので、ここからダウンロードして使ってください。例は当サイトでの配置パスを用いていますが、どこに置いても構いません。なおOpenSeadragonで用いるアイコン画像フォルダの位置は、imgannot.jsのMia.prep_osd.osdoptionで設定するprefixUrlに記述してください（Annotorious用の追加ボタンアイコンもここに配置します）。

The following is the head element of this page. Please download files with hyperlink from this site, along with OpenSeadragon and Annotorious. You can put those files anywhere in your site. Image path option for OpenSeadragon (prefixUrl) should be defined in Mia.prep_osd.osdoption within imgannot.js (button icons for Annotorious should be placed there).

<link rel="stylesheet" href="/lib/js/annot/annotorious.css" />
<link rel="stylesheet" href="/works/2016/pub/imgannot.css" />
<script src="/lib/js/osd/openseadragon.js"></script>
<script src="/lib/js/annot/annotorious.min.js"></script>
<script src="/lib/js/my/annotext.js"></script>
<script src="/lib/js/my/webannotorious.js"></script>
<script src="/works/2016/pub/imgannot.js"></script>

body要素内にはid="openseadragon"を設定したdiv要素を配置します。この要素ロード後にMia.setup()を実行すると、URIのクエリパラメータ u で与えたマニフェスト/Web Annotation/画像URIの内容を表示します。

Place div element with id="openseadragon" in anywhere within body element. Mia.setup() will display manifest / web annotation / images given by u parameter.

<body onload="Mia.setup();">
<div id="openseadragon"></div>
</body>

URIに#p8のようにp＋ページ番号をフラグメントで加えると、そのページを最初に表示します（ボドリアン図書館『賢者レオーン6世の託宣』を表示する例）。

#openseadragon要素は他の要素と自由に組み合わせて配置できますが、文書情報、画像一覧などは#openseadragonの親要素を基準にしてスクリプトが付加しますので、ひとつラッパ要素を置くと安全です。取得した情報のラベルは、既存のh1要素があればそこに、なければh1を生成して表示します。そのほか必要に応じてimgannot.cssを調整してください。

※もし現在討議中のA/V機能を利用したければ、avannot.jsをimgannot.jsと同じディレクトリに置いてください。カンバスに音声動画が含まれていれば、自動的にロードされます。

URI with fragment id (p + page number, e.g. #p8) will make that page displayed initially (try an example to display "Oracula of Leo the Wise, Bodleian MS. Barocci 170").

#openseadragon element can be placed among any other element. Since tool-generated sections (e.g. document information and page index) are attached based on the parent of #openseadragon, it will be safe to wrap #openseadragon up in a container so as to prevent generated sections from interfering other elements. Document label will be displayed in the h1 element if present, otherwise the tool will generate an h1 node. You can customize imgannot.css as needed.

※If you want to try A/V extension, put avannot.js into the same directory as imgannot.js. It will be automatically loaded when any canvas has an A/V file.