用語注記(人名等)テンプレート(3)
このテンプレートは、ウェブページの左側に用語(人名等)の注釈ボックスを置き、本文をスクロールしても常に同じ位置で注釈を参照できるように作ったものです。
このサンプルでは次の操作ができます。
-
下の「人名1」の上をマウスが通過すると(クリックはしない)、その注記が左のボックスに表示されます。
人名1←(マウスポインタを置く。)
人名2←(マウスポインタを置く。)
ただし、IE6ではうまく表示できず、MozillaまたはFireFox, Netscape Browser6で使えるテンプレートです。(Opera8では表示が若干ずれてしまいます。)このリンクは、長い文章の途中に埋め込む形でも使えます。また、リンクは枠線で囲み、色をつけてありますが、これらはスタイルシートの「a」タグへの指定や「a:hover」の指定を変更すれば消すことができます。
-
クリックすると、注記の内容が新しいウィンドウに転記されます。
本文を読む際に、いつまでも注記が残っていると読みづらいので、マウスが離れるとすぐに消えるようにしてあります。ただし、注記を利用したい場合にはコピーできるように転記する動作を加えています。小さな子ウィンドウを開いてそこに転記する形にしています。
|
このテンプレートのよいところは、フレームを使っているわけではないので、1つのファイルで用が足りるところです。ただし、注釈が多い場合は、むしろ別ファイルにまとめて簡単に記述できればその方が便利だという場合もあるかもしれません。
最初は、吹き出し型のヘルプ表記を作りたいと思い、見よう見まねで作ってみたものの、本文がある程度の長さになると吹き出しの位置が大きくずれてしまい、実用になりませんでした。安定したやり方が分かればまた工夫してみたいと思いますが、現在のところでは、ステータスバーに表示する方法か、あるいはこのページのような方法によってきちんと動作します。
注記の書き方は、このファイルの中に説明しています。項目名や枠の大きさ、色など適宜変更して使ってください。(ただし、動作に関わる部分を改変して、その結果不具合が起きたとしても〔そんなことは恐らく無いでしょうが〕責任は負いかねます。)
※ 欄の数を増やせば、異本等のテキスト注記に利用できるかもしれません。
(2005.8)
【追記】左余白の色づかいを工夫することで、実用度を高めた作品例は
こちらを参照。 (2005.10)