注釈ポップアッププラグイン 2.0 released!!: 国民宿舎はらぺこ大浴場

こいつが早くも 2.0 にバージョンアップしますた。ｗ

設置方法、利用方法にいくつかの変更点がありますので、ご注意ください。

こんな感じで動作します。

このサンプルは、是非、Javascript を off にした状態での閲覧もお試しください。今回のバージョンアップの真価が、ご理解いただけることと思います。

なお、括弧書きと注釈ポップアップのハイブリッド (こんな感じで、注釈ポップアップ時には両端の丸カッコが非表示になる。Javascript が off ならば、普通に括弧書きとして表示される) も可能です。

何故、Javascript を off にした状態で試す意味があるのか?: Javascript を off にした状態でも (更にいえば、Javascript が使用できない環境でも)、表示に不自然さがないことに、お気付きいただけるはずです。

使い方

annopop.js ファイルをダウンロードし、あなたが管理する Web スペースに upload する。アップロードした annopop.js ファイルの URI をメモしておくこと。(ここは前回と同様)
注釈ポップアッププラグインを使用したいページのどこかに、以下の HTML を追加してください。
```
<script type="text/javascript" src="(1.でメモしたURI)" charset="UTF-8"></script>
```
v1.0.x からの変更点: 必ず、charset="UTF-8" 属性を記述してください。また、ダウンロードした annopop.js ファイルのキャラクターセット (エンコード方式) を変更しないでください (UTF-8 で保存されています)。
<head> 要素の中で記述するのがベストですが、基本的にはどこでも構いません。ブログなどであれば、フリースタイルのブログ部品として記述しても ok です (このブログではそうしてます)。なお、本ブログのように、本文テキストが固定幅でレイアウトされているような場合、annopop_view_rect 変数のプロパティを変更することによって、注釈の窓が表示される領域を制限することができます。その場合は、以下のような記述を更に書き加えてあげてください (HTML 4.01 の場合)。
```
<script type="text/javascript"></script>
```
もちろん、XHTML の場合はコメントタグ  の代わりに、<![CDATA[ ～ ]]> を使うようにしましょう。
実際に注釈を記述する方法は、2通りあります。1 つは、v1.0.x と同じ方法です (互換性のために残してあります)。これについては、前回の記事を参照してください。
今回追加された新たな方法は、以下のような書式です。
```
<a href="#annopop-(任意のID名)">注釈を入れたいテキスト</a>
<span id="annopop-(任意のID名)">(注釈の内容)</span>
```
- 注釈を入れたいテキストは、アンカータグ <a> で挟みます。そして、href 属性に、annopop- で始まる任意の名前のアンカーを、飛び先として指定します。
- 注釈を挟むタグは何でも ok です。id 属性に、a. で指定した annopop- で始まる名前を、そのまま記述します (もちろん # は不要)。なお、注釈を挟むタグに、<dl> タグ、または <span> タグを使用した場合に限り、以下のように動作します。
  - <dl> タグを使用した場合 ... 子要素に含まれる 1 つ目の