overLIB は簡単に見栄えのいいポップアップ表示を行うためのフリーの JavaScript ライブラリです。overLIB は PHP/Smarty なしでも勿論動作します。
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>
Smarty のテンプレートでは popup_init と popup というカスタム関数を使えば、さらに簡単に overLIB を利用する事が可能です(Smarty の公式マニュアルより)。
{* popup_initは popup を使う前に、<BODY>から</BODY>の間で一度だけ呼び出す必要があります(訳注: この文章は原文とは異なります 😉 *}
{popup_init src=”/javascripts/overlib.js”}{* マウスオーバー時にポップアップウィンドウを表示するリンクを作成する *}
<a href=”mypage.html” {popup text=”This link takes you to my page!”}>mypage</a>{* popup の text ではリンク等の HTML 文も利用可能です *}
<a href=”mypage.html” {popup sticky=true caption=”mypage contents”
text=”<UL><LI>links<LI>pages<LI>images</UL>” snapx=10 snapy=10}>mypage</a>
参考:
– overLIB 公式
– Smarty 公式
– Smarty 2.6.6 日本語マニュアル