サンプルはこちらです。
[Loupe.js ]
http://www.netzgesta.de/loupe/
まずは、前回のjavascript定義の3行目と6行目についてです。
◆条件つきコメント（Conditional Comments）
[Javascriptの定義]
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]-->
3:<!–[if gte IE 6]>、6:<![endif]–>は「条件つきコメント（Conditional Comments）」と呼ばれます。
Windows IE 5以上で利用可能な特殊なコメントで、
特定のバージョンにのみスクリプトを適用させることができます。
(Mac IEは未対応とのこと)。
このコメントで指定されたバージョンのIEだけがこのスクリプトを読み込むことになります。
ifのあとに gte と書くとそのバージョン以上、逆に lt と書けばそのバージョン以下が
コメントとして書かれた部分をスクリプトやスタイルとして認識し、読み込みます。
と言うわけでこの場合は、IE6以上だとこのスクリプトを読み込むことになります。
[Conditional Comments＜英語＞]
http://msdn2.microsoft.com/en-us/library/ms537512.aspx
[条件つきコメント実験ページ＜日本語＞]
http://www.keynavi.net/ja/bugh/comments.html
それでは、スクリプトとサイトの説明を読んでわかったもろもろを紹介します。
◆オプション引数
imgタグに指定するinitLoupeメソッドはオプションで第二引数を設定できます。
第二引数はtrue/falseで定義し、初期表示状態から虫メガネを表示するか否かを指定します。
（デフォルト設定はfalseとなっています。）
◆最小画像サイズ
imgサイズの最小はwidth=205、height=205です。
これより小さい画像の場合は、虫メガネの表示処理を行わないような
JavaScriptのソースになっていました。
それ以上であれば好きな比率・大きさで表示することが可能です。
◆canvas要素
Loupe.jsはHTMLのcanvas要素を操作しています。
canvas要素はグラフの描画、写真合成、アニメーションなどの
カスタム描画を行うための要素です。
canvas要素をオブジェクトとして取得し、用意されているメソッドを使用すると
描画処理を行うことができます。
基本的な描画のプログラムはそんなに難しくなさそうでした。
チュートリアルが豊富なので、今週末にいじってみようと思います。
（嬉しいことに日本語のドキュメントもありました。）
[チュートリアル（日本語版）]
サンプルコードと作成方法があります。
http://developer.mozilla.org/ja/docs/Canvas_tutorial
◇参考 ＞ Canvas の記事と他のリソース ＞ Drawing Graphics with Canvas
基本的な操作方法と説明があります。
◇参考 ＞ Canvas の例（Canvas examples）
canvas要素を使用しているプログラムのリストがありました。
（少々重いプログラムもあるかもしれません。）
Canvas Painter面白いです。
ただし、canvas要素はIE未対応です。
そのため、Loupe.jsはIE用とその他ブラウザ用で違うスクリプトを使用しています。
IE用のスクリプトではcanvas要素を使用せず、
div要素を作成し、そこにスタイル等を直接指定することで
canvas要素の描画と同じ処理を実現しています。
次回以降、サンプルページにある、ちょっと工夫された拡大表示を
実際に自分で作ってみたいと思います。