寺子屋未満

◆枠つき画像を拡大する（Frame Effect）
虫眼鏡で表示させる画像の周りに、フレームをつけます。
写真を作品として見せる場合に有効になるかもしれない方法です。

配布サイトにはモナリザのサンプルがあります。
[Frame Effect (Mona Lisa)]
http://www.netzgesta.de/loupe/でFrame Effectを選択。

＜仕組み＞
・虫眼鏡で表示させる画像の外側にブロック要素を配置します。
・そのブロック要素の背景に枠画像を指定します。
・表示画像が枠の内側におさまるようにスタイル（position:absolute; ）を指定します。

[HTML定義]
<div style="position:relative; width:[枠画像の幅]; height:[枠画像の高さ]; background:url([枠画像のURL]) no-repeat;">
<div style="position:absolute; left:[枠の幅]; top:[枠の高さ];">
<img id="tst3" onLoad="initLoupe(this.id);" src="[表示画像のURL]" width="[枠画像の幅-（枠の幅×2）]" height="[枠画像の高さ-（枠の高さ×2）]" />
</div>
</div>今回もCSSの定義がわかるよう、HTMLタグに直接スタイルを指定しています。

ポイントは、表示サイズの計算、それにつきます。
・内側の画像を固定する際に、枠画像の左上から画像がセットされるよう
　　left:[枠の幅]
　　top:[枠の高さ]
　の数値を決めます。
・内側の画像は枠の中におさまるよう、
　width=[枠画像の幅-（枠の幅×2）] （左右の分を引く）
　height=[枠画像の高さ-（枠の高さ×2）]（上下の分を引く）
　というサイズにします。
・枠のブロック要素にposition:relative; を指定しておくと、画像読み込みの際、
　枠内に表示する画像の表示位置が早く認識されます。

画像がうまくおさまれば、スクリプトそのものに変更はいりません。

[サンプル]
GIMP2で画像編集をしているので、そこにあるパターンイメージを使い
枠を作成しました。
（実は、今回は自分で枠画像を作成するのにすごく時間がかかりました・・・。）

今回はこの枠を使います。

画像サイズは387px × 285px、枠の太さは上下左右とも40pxです。
なので、イメージサイズは307px × 205pxとなっています。
イメージサイズをもとに、自分で枠を作るというやり方の方が楽です。

写真はZorgよりステキな写真を探しました。

◆♪♪♪（ちょっとクラシック風）

※FireFoxの場合に、一つのファイルで複数の虫眼鏡画像を表示させようとすると、
　虫眼鏡の画像がうまく表示されない場合があるようです。
　エラーではないのですが。。。原因究明中。（重いからかもしれません）

次回はまた別の画像表示のスクリプトを紐解いていく予定です。
本当にいろんな種類があります・・・・楽しい。