寺子屋未満

◆拡大画像を表示させる（Zoom Effect）
地図のサンプル。確かにこの効果は地図に最適です。
[Zoom Effect (Caribbean)]
http://www.netzgesta.de/loupe/でZoom Effectを選択。

＜仕組み＞
・imgが設定されているブロック要素の背景に表示用サイズのbackground-imageを設定する。
・拡大した画像を表示用にサイズ指定して設定し、onLoadイベントにinitLoupeを定義する

こうすると、表示のストレスを見た目上少なくしながら、拡大率を上げることができます。

[HTML定義]
<div style="width:263px; height:205px; background:url([表示用画像のPATH]) no-repeat;">
<img id="sample" onLoad="initLoupe(this.id);" src="[拡大画像のPATH]" width="263" height="205" alt="large image"/>
</div>本来style指定は別ファイルで行った方がみやすく調整しやすいので
CSSファイルは別にすべきと考えているのですが、
今回はサンプルがわかりやすくなるようタグ内でスタイル定義をしました。
「divタグのサイズ」と「backgroundに指定する元画像のサイズ」と「imgタグのサイズ」
を同じにすることがポイントです。

[サンプル]
今回もGizmodo Japan（ギズモード・ジャパン）のハブラシ画像を使います。

※これが一つの画像による拡大表示です

拡大表示されるサイズは、imgタグに指定された元画像の大きさとなります。
つまり、imgタグに表示されている画像が既に原寸サイズで表示されている場合
虫眼鏡が表示されても、拡大表示はされません。

※これが小さな画像を背景に指定しているものです

表示画像のサイズが大きいので、画像が拡大される効果も目に見えて違うと思います。

※背景画像を指定せず、上と同じ大きさの画像をimgタグに指定しているものです。

同じ表示なのですが、大きな画像を読み込むのには時間がかかるので
背景画像にサイズの小さな画像を指定しているほうが、
大きな画像の読み込み完了前に背景画像が表示され、
見た目上、若干早く表示されると言う効果があります。

サイトの読み込み時間プロファイリングツール
http://tools.pingdom.com/fpt/
でチェックしたのですが、実際のサイト読み込み完了時間に差はありません。
ですが、キャッシュをクリアしてからリロード（ctrl+F5）すると、
表示時間に差があることがわかると思います。
（IEだとあまり変わらないかも。）

ただしこのように拡大率をあげようとする場合、
用意する画像のファイルサイズがかなり大きくなってしまうので
用途を考えて使ったほうがよさそうです。
（全体としてこのページは重いです。すみません・・・・）