overLIBでツールチップ表示
overLIBは簡単に見栄えの良いツールチップ表示が作れるjavascriptライブラリです。
今回はこれをPHPとのあわせ技で簡単に利用できるようにしました。
ポップアップのようにツールチップが出るのでちょっとした注釈なんかに使えそうです。
設置してみる
overLIBの公式マニュアルをみると、
<!-- 必須の初期化処理(ひとつのページにつき一度だけ必要) -->
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<script language="JavaScript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
<!-- マウスオーバー時に ポップアップを表示する -->
<a href="javascript:void(0);" onmouseover="return overlib('This is an ordinary
popup.');" onmouseout="return nd();">here</a>
のように書いてありますが、これをpopup関数で呼び出せるようにしただけなのでそんなに難しいコードは書いてません。
コードは以下、
-
<?php
-
function popup($text,$popup){
-
?>
-
<a href="javascript:void(0);"
-
onmouseover="return overlib('<?php echo($popup); ?>');"
-
<?php
-
}
-
?>
-
<html>
-
<head>
-
<script type="text/javascript" src="overlib.js">
-
<!--overlob(c)Erik Bosup -->
-
</script>
-
<style>a{text-decoration:none;}</style>
-
</head>
-
<body>
-
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
-
<?php popup('PEAR','PHPで利用する事ができるライブラリ(パッケージ)を提供しているサービス。');?>とか
-
<?php popup('Smarty','PHP のテンプレートエンジン。');?>とか正直よくわかりません。
-
</body>
-
</html>
ファイル名は何でもいいのですがsample.phpとでもつけておきます。
これとoverLIBからダウンロードしたoverlib.jsを同じ階層にアップロードします。
ブラウザでみるとこのようになります。
とこんな感じで注釈っぽいツールチップが出来ます。
これをライブラリとしておけば、呼び出すだけで他のページでも使えます。
例えば、、、
こんな感じでウッカリ妄想を書いてしまったときなどにも使えます。
いや使えないですね。