コメント表示コメント表示  |
  |
 |
 |
 |
 |
技術解説や論文などでは専門用語など、説明が必要な単語があったりちょっとした
解説をつけたい場合があります。
このような場合の一般的な解決方法はページや段落の末尾に注釈として記述します。
この手法は本などの１ページのサイズが決まっている場合には有効ですが、
Web ページの場合ページサイズが不定なため、注釈を必要とする場所と注釈自体の位置が
離れてみにくくなってしまったり、注釈が多すぎて、雑然としたページ構成になりがちです。
これを解決する手法としてよくある方法は、注釈のみの HTML を用意し、
注釈を必要とする単語をクリックすると別フレームまたは別ウィンドウ上に表示します。
この方法のデメリットは注釈の文章を別の HTML で記述するので、
メンテナンス性が良くないことと、注釈が複数ある場合、
複数の注釈を１つの HTML に記述すると表示するフレームやウィンドウでは
スクロールバーを有効にする必要（ Netscape Navigatorの場合 )があることです。
ここで紹介する方法は、本文に必要とする注釈を定義しておき、
注釈を必要とする場合（つまり、用語にマウスが触れた時など)
指定されたフレームに直接 HTML を書込むことで注釈文章を表示する方法です。
以下に本文のフレームを description 注釈用フレームを note とした場合のコードを示します。
<head>
:
<script language="JavaScript"><!--
// 注釈を表示しない時に表示する HTML
defaultNote =
'<div align=center><font color="#ff0000">'
+'Copyright(c) 1997 - 2001 ShinSoft. All rights reserved.'
+'<\/font><\/div>';
// 注釈行表示関数
function _showNote(dir,key,kcol,note,img){
var doc,c,bd;
doc=frames.description.document;
c =' bgColor="'+doc.bgColor +'"'
+' text="' +doc.fgColor +'"'
+' link="' +doc.linkColor +'"'
+' alink="' +doc.alinkColor+'"'
+' vlink="' +doc.vlinkColor+'"';
if(img) c+=' background="'+img+'"';
if(dir==1){
if(key){
bd='<b>'+key+'</b>';
if(kcol) bd='<font color="'+kcol+'">'+bd+'</font>:';
}
bd+=note;
} else bd=defaultNote;
doc=frames.note.document;
doc.open('text/html','replace');
doc.write(
'<html><body '+c+'><basefont size=2>'
+'<hr>'+bd
+'<\/body><\/html>'
);
doc.close();
}
// --></script>
</head>
<frameset rows="*,50" border=0 frameborder=no framespacing=0>
<frame src="CommentD.htm" name="description">
<frame src="CommentC.htm" name="note"
scrolling="no" marginheight=0>
</frameset>
</html>
<head>
:
<script language="JavaScript"><!--
wallpaper = 'ShinSoft.gif'; // 背景画像
keywords = new Array(); // キーワード
notes = new Array(); // 説明文
// 表示する注釈の用語( keywords )と解説( notes )の定義
keywords[0] = 'フレーム構成';
notes [0] = 'ウィンドウの下部 50ピクセルが...';
keywords[1] = 'スクロールバーを消す';
notes [1] = '単に好みの問題で、...';
:
// ダミー関数( 単独表示時無処理用 )
function _showNote(dir,key,kcol,note,img){}
// コメント表示用簡易関数
function showNote(dir,no){
parent._showNote(
dir,keywords[no],'#ff0000',notes[no],wallpaper
);
}
// --></script>
</head>
<body ... background="ShinSoft.gif">
:
<p>このページは上下の
<a href="javascript:void(0);" onMouseOver="showNote(1,0);"
onMouseOut="showNote(0,0);">フレーム構成</a>に...
:
:
<body ... background="ShinSoft.gif">
<basefont size=2>
<hr>
<div align=center><font color="#ff0000">
Copyright(c) 1997 - 2001 ShinSoft. All rights reserved.
</font></div>
:
この文字の部分は必要に応じて修正します。
フレームの親の HTML に関して、
defaultNoteは
注釈欄に表示する項目がない場合に表示する HTML を指定します。
フレーム構成は自分ページのデザインと注釈欄に一度に表示する量に合わせて
適当に修正します。
_showNote関数内のフレーム名も FRAMEタグの指定に
合わせて修正します。
また、注釈に表示する用語と解説の表示形式( HTML )も必要に応じて修正します。
本文については wallpaperには本文で使用する
背景画像を指定しますが、背景画像を使用しない場合は null を指定します。
keywords, notes配列の定義は、
そのページで使用する注釈の数だけ用語と解説を要素 "0" から順に定義します。
注釈ページに関しては注釈を表示していない時の HTML を指定しておきます。
注釈の表示には通常 onMouseOver, onMouseOut イベントを利用して showNote関数を
呼び出します。
以下に _showNote関数の呼出形式を示します。
_showNote(dir,key,kcol,note,img); dir : 表示方向 0=消去、 1=表示 key : 用語として表示する文字列( HTML ) kcol : 用語の文字色( 色名称または RGB表現の色 ) note : 解説として表示する文字列( HTML ) img : 注釈欄に表示する背景画像( URL )
また、本文ではフレームに定義している _showNote 関数を呼び出すための 簡易関数 showNote を使用しています。 この showNote 関数の呼出形式は以下の通りです。
showNote(dir,no); dir : 表示方向 0=消去、 1=表示 no : keywords, notes配列の要素番号( 0 〜 )
使用例
このコードの表示サンプルはこちら です。
注意事項
