表示する写真に虫メガネをつけることのできるスクリプトです。
虫メガネで表示した部分の画像は拡大表示されます。
スクリプトと虫メガネ画像が準備されており、利用する側は表示したい画像を
ひとつだけ準備すればよいので、簡単に試すことができそうです。
◆JavaScriptファイルのダウンロード
[Loupe.js ]
http://www.netzgesta.de/loupe/
Download から[loupe.js 1.2]をダウンロードします。
ダウンロードしたzipファイルには、
虫メガネ表示に必要なjsファイルと画像、サンプルhtmlが含まれています。
canvas要素を使用しているのでIEは未対応だったのですが、Ver1.2からIEに対応。
Ver1.2のファイルにはIE専用のjsファイルと画像がフォルダ（vml）に含まれています。
◆必要となるファイル
サンプル用ファイルがたくさんありますが、
自分で実行するときに必要となるのは次のファイルとなります。
[IE以外]
loupe/loupe.js
loupe/loupe.png
[IE用ファイル郡]
loupe/vml/loupe.js
loupe/vml/loupe.png
loupe/vml/icon.png
loupe/vml/lens.png
◆Javascriptの定義
まずは<HEAD>タグにJavascriptの定義を行います。
IEとIE以外のブラウザに対応するためには下の宣言を全て書きます。
1:<script type="text/javascript"><!--var loupePath="./loupe/";//--></script>
2:<script type="text/javascript" src="./loupe/loupe.js"></script>
3:<!--[if gte IE 6]>
4:<script type="text/javascript"><!--var loupePath="./loupe/vml/";//--></script>
5:<script type="text/javascript" src="./loupe/vml/loupe.js"></script>
6:<![endif]-->
[IE以外]
1:loupePath は実行するHTMLファイルと同じフォルダにloupe.pngがない場合、
loupe.pngのあるパスを指定します。
2:loupe.jsのパスを指定します。
[IE]
4:loupePath はIE用のloupe.pngがあるパスを指定します。
5:IE用のloupe.jsのパスを指定します。
3:と6:（条件つきコメント）については次回掘り下げます。
◆画像の設定方法
これがビックリするほど簡単でした。
（今回は上のJavaScriptの定義の意味を理解するのに時間がかかった・・・。）
<div>
<img id="tst" onLoad="initLoupe(this.id);" src="./images/xxx.jpg" width="356" height="205" alt="xxx"/>
</div>
<div>タグ内にある<img>タグにonLoadイベントとしてinitLoupeを定義するだけです。
＜initLoupe(id)＞
引数はimgタグに指定されているid名（ this.id でOK）。
今回はサンプルを丸々実行しただけなのでサンプルソースほぼそのまま固定です。
虫メガネ画像にするなら絶対これ！と決めていた画像がありまして・・・。
それでスクリプトを実行させてみました。
右下の虫メガネマークを押すと、虫メガネがあらわれます。
ちなみにこの画像はGizmodo Japan（ギズモード・ジャパン）のおもしろ記事からです。
※IEでの動作確認も行ったのですが、スクリプトエラーになる場合があるかもしれません。
そのときはリロードしてみてください・・・。
おもしろい！！！
次回以降、細かい設定方法やサンプルの解析をしたいと思います。