◆違う画像を拡大表示させる（X-Ray Effect）
今回はブロック要素の重なりの違いを利用して、
表示されている画像と虫眼鏡で表示される画像を別物にするサンプルです。
サンプル面白いです。脳みそちっちゃ。
[X-Ray Effect (Homer)]
http://www.netzgesta.de/loupe/でX-Ray Effectを選択。
＜仕組み＞
・imgタグを配置しているブロック要素内に、画像と同じ位置にブロック要素を重ねてセットする。
・スタイルシート（z-index）を使い、重なりの背面に画像を、前面にブロック要素を設定する。
・画像をonLoadイベントとしてinitLoupeを定義する
・ブロック要素に背面の画像と同じサイズの画像をbackground-imageとして設定する。
こうすることで、虫メガネが表示される部分だけ、下部の画像が表示される、
ということになります。
[HTML定義]
<div>
<img id="colorful" onLoad="initLoupe(this.id,true);" src="[虫眼鏡で表示させたい画像のURL]" style="z-index: -1; border:0px;" width="384" height="256" alt="colorful"/>
<div style="position:absolute; left:0; top:0; width:384px; height:256px; background:url([通常表示させる画像のURL]) no-repeat white;"></div>
</div>
今回もCSSの定義がわかるよう、HTMLタグに直接スタイルを指定しています。
ポイントは、
・「虫眼鏡で表示する画像」と「divタグの背景画像」の元サイズを同じ物にする。
・imgタグのwidth/height、背景画像を指定するdivタグのwidth/heightを同じにする。
・背景画像を指定するdivタグのスタイルに[ position:absolute; left:0; top:0; ]を指定し、
imgタグと完全に重なるようにする。
・imgタグのスタイルに[ z-index: -1 ]を指定する事で、
通常は背景画像を指定しているdiv要素が前面にくるようにする。
このように違う画像を表示させるという効果を狙う場合は、
あえて元画像のサイズそのままのサイズで表示し、拡大の効果は無しにしてよいと思います。
（拡大の効果まであると少しうるさい感じになってしまうかも。。。）
[サンプル]
今回は、白黒の写真に虫眼鏡をあてるとカラーで表示されるというサンプルを作成しました。
使用した写真はZorgより。（一番カラフルなものを選びました。）
Colorful Elephant
この方法を利用して、虫眼鏡を通して面白いものを見せる表現が色々ありそうです。
（でもやっぱり処理が重いですね・・・・。）
次回はフレームをつけた画像の中身だけを拡大するサンプルに挑戦します。