用語注記（人名等）テンプレート(8)

このテンプレートは、用語（人名等）の注釈ボックスをコンテクスト・ヘルプのように表示し、本文をスクロールしても常に同じ位置で注釈を参照できるように作ったものです。（『10日でおぼえるJavaScript』〔翔泳社〕のサンプルをベースとして、『JavaScriptコンパクトリファレンス』〔毎日コミュニケーションズ〕、『HTML&JavaScript 上級テクニック集 第2版』等を参考にしました。）
このサンプルでは次の操作ができます。
  1. 下の「人名１」「人名２」の上をマウスが通過すると（クリックはしない）、その注記が下にコンテクスト・ヘルプとして表示されます。（もちろん、人名だけでなく、用語説明一般に応用可能です。）

    人名１ ←（マウスポインタを置く。）
    人名２ ←（マウスポインタを置く。）
    ただし、IE6ではうまく表示できず、かえってMozillaまたはFireFox, Opera6で使えるテンプレートです。（Netscape Browser8ではクリックした時のウィンドウの大きさがうまく表示できません。PopUp Help はIE専用のようにJavaScriptの本には書いてありますが、工夫しだいでこのように表示できます。）このPopUp型のヘルプ表示は、長い文章の途中に埋め込む形でも使えるのが大きな特徴です。。行の初めや終わりでヘルプが読めなくなってしまうのをなるべく避けるために、ヘルプ枠は下に出すようにしています。

  2. そのままクリックすると、注記の内容が新しいウィンドウに転記されます。
    マウスが離れるとヘルプは消えてしまいます。ただし、注記を利用したい場合にはコピーできるように転記する動作を加えています。小さな子ウィンドウを開いてそこに転記する形にしています。
このテンプレートのよいところは、フレームを使っているわけではないので、１つのファイルで用が足りるところです。ただし、注釈が多い場合は、むしろ別ファイルにまとめて簡単に記述できればその方が便利だという場合もあるかもしれません。今回、リンクの上をマウスが通過したときだけヘルプが出てくるように工夫しました。
〔追加〕　長い文章の途中に注記を入れる形で実際に作ってみましたが、本文がプロポーショナル・フォントだと表示が揺れ動いて見づらいようです。本文を MS UI Gothic などの等幅フォントにすると、それほど見た目が変わらず、また表示が揺れ動くこともありません。（2005.9）
注記の書き方は、このファイルの中に説明しています。本文は<div></div>タグの中に入れてください。このタグの設定（margin等）を変えると、表示がおかしくなってしまったり、ヘルプの一部が端に隠れて読めなくなったりします。また、ヘルプの幅を変更し過ぎても同様のことが起こります。（その他、動作に関わる部分を改変して、その結果不具合が起きたとしても責任は負いかねます。）
※　IEでは、<A>タグのtitle属性（title=""）にヘルプを入れるとコンテクスト・ヘルプとして出るということです。
（2005.9）
?