用語注記(人名等)テンプレート(4)

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

    人名1 ←(マウスポインタを置く。)
    人名2 ←(マウスポインタを置く。)
    ただし、IE6ではうまく表示できず、MozillaまたはFireFox, Opera6で使えるテンプレートです。(Netscape Browser8ではクリックした時のウィンドウの大きさがうまく表示できません。)このリンクは、長い文章の途中に埋め込む形でも使えるようにしました。行の初めや終わりでヘルプが読めなくなってしまうのをなるべく避けるために、ヘルプ枠は下に出すようにしています。

  2. そのままクリックすると、注記の内容が新しいウィンドウに転記されます。
    マウスが離れるとヘルプは消えてしまいます。ただし、注記を利用したい場合にはコピーできるように転記する動作を加えています。小さな子ウィンドウを開いてそこに転記する形にしています。
このテンプレートのよいところは、フレームを使っているわけではないので、1つのファイルで用が足りるところです。ただし、注釈が多い場合は、むしろ別ファイルにまとめて簡単に記述できればその方が便利だという場合もあるかもしれません。
 長い文章でも表示位置の崩れない吹き出し型のヘルプが一応できたものの、表示枠の幅が初めから決まっているので、「?」マークが多少煩わしく感じられます。リンクの上をマウスが通過したときだけヘルプが出てくるように工夫できたらと思っています。
 注記の書き方は、このファイルの中に説明しています。本文は<div></div>タグの中に入れてください。このタグの設定(margin等)を変えると、表示がおかしくなってしまったり、ヘルプの一部が端に隠れて読めなくなったりします。また、ヘルプの幅を変更し過ぎても同様のことが起こります。(その他、動作に関わる部分を改変して、その結果不具合が起きたとしても責任は負いかねます。)
※ IEでは、<A>タグのtitle属性(title="")にヘルプを入れるとポインタ・ヘルプとして出るということです。
(2005.8)
?