overlib

OVERLIBは、記事中の用語でちょっと説明をしたい時に使われる、いわゆるツールチップ（Tooltip）を表示させるJavaScriptライブラリ。

いろいろなサイトで様々なツールやスクリプトが公開されているが、『overlib』はHTMLタグが使えたり、背景色や文字色、文字サイズ、背景画像、などの細かい設定が可能。

また、表示の設定で、マウスアウトで自動的に消えるようにする他、「閉じる」にマウスオーバーするまで表示させておくことができるため、ポップアップされる文章内にリンク用のAタグを使ってURLを表示させ、ジャンプしてもらうことも可能となる。

■設置と設定
http://www.bosrup.com/web/overlib/
に行き、最新版をダウンロード。
ファイルを解凍すると多くのファイルがあるが、通常の場合は
overlib.js
overlib_mini.js
のどちらか一つのファイルをアップロードするだけでいい。

次に、表示させたいページに

を埋め込む。body内であれば、場所はどこでも構わない。
※overlib.jsを「js」フォルダ等に入れている場合は、「src=”overlib.js”」の部分は「src=”js/overlib.js”」

あとは、表示させたい部分に

<a href=”javascript:void(0);” onmouseover=”return overlib(‘文字の説明’);” onmouseout=”return nd();”>マウスを重ねてみてください</a>

クリックで表示させたい場合は、
a href=”javascript:void(0);” onclick=”return overlib(

マウスオーバー（マウスが重なると自動的に表示）にしたい場合は、
a href=”javascript:void(0);” onmouseover=”return overlib(

背景に画像を使わない場合、余白の設定ができないが、cssで追加すればいい。

■説明文内でリンクを使いたい場合

<a href=”javascript:void(0);” onmouseover=”return overlib(‘この部分でタグの利用が可能>br>改行もできる。’, STICKY, CAPTION, ‘タイトル’);” onmouseout=”nd();”>マウスを重ねてみてください</a>

ツールチップの表示にoverlibを使う。