Software ウィンドウの背景を暗くして、その上に画像を表示する JavaScript です。表示された画像を再度クリックすれば元に戻ります。次の画像をクリックしていただければ、何をする物か一目瞭然かと思います。
よく、写真アルバムのサイトで使われていると思います。画像の小さなプレビューイメージを表示し、その指定した画像を拡大させるのです。lightbox というライブラリが元祖らしいですが、似たようなことができるライブラリはいっぱいあるようです。
なぜ、すでに立派な JavaScript ライブラリが多数存在するのにわざわざ作ったかというと、ミニマムな実装が欲しかったから。ソフトのマニュアルの一部として配布パッケージ含めることを想定しているので、よく使われている立派なライブラリはサイズが大きすぎるのが気になります。ちっちゃいソフトだと、配布パッケージのファイルの中で JavaScript ライブラリが一番でかいということになりかねない。
あえて必要最小限の機能しかないので、いっさいカスタマイズする余地がなく、飾りのたぐいが全くないので素っ気ないです。でも、ほんのちょっとだけ使うのには十分かつ適していると思います。僕は、ソフトの説明でスクリーンショットを拡大表示させる為に使っています。
Safari 3.0.4 と Firefox 2.0.0.6 で動作確認をしています。ちゃんとしたブラウザなら動くと思います。
（たぶん）とっても簡単です、まずはともあれ Download して、ダウンロードパッケジの仮名に含まれる popuoImage.js をHTML のヘッダで読み込みます。
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>PopupImage sample</title>
<script type="text/javascript" src="assets/PopupImage.js"></script>
</head>
そして、次のように表示させたい画像へのリンクを設定します。画像へのリンクでなければなりません。リンクの anchor タグの oncick イベント属性で関数の呼び出します。
<p>
<a href="images/castle.jpg" onclick="return popupImage(this);">
<img src="images/castle-small.jpg" alt="" width="200" height="160" border="0" />
</a>
</p>
簡単でしょう。
今すぐコードをのぞきたい方は、こちらをクリック。