あらゆるページにもっと高機能な拡大鏡を追加できる『TJPzoom.js』
May 3, 2007 12:30 PM written by

昨日ご紹介した「あらゆるページに拡大鏡を追加できる『Loupe.js』」の高機能版ともいうべきスクリプトをご紹介。

TJPzoomを使えば画像に拡大鏡をつけられる上、マウスドラッグでさらに拡大したり、高解像度の写真を別に用意しておいて拡大時にそっちを表示できたりします。

以下に簡単に使い方をご紹介。まずは基本パターン。

最初にスクリプトを導入。

<script type="text/javascript" src="tjpzoom.js"></script>

次に画像のコードを以下のように変更。divタグをつけるのと、widthタグをつけるのを忘れずに。

<div>
<img src="test.jpg" style="width:640px; height: 480px;" onmouseover="TJPzoom(this);">
</div>

なお、このほかにいくつかの画像ファイルをアップしておく必要があります。

すると以下のような画像ができます。マウスオーバーするとその部分が拡大されます。マウスドラッグでさらに拡大することもできます。

また、拡大時にさらに高解像度の画像を使いたいときは次のように。

<div>
<img src="http://valid.tjp.hu/zoom/collage.jpg" style="width:640px; height: 480px;" onmouseover="TJPzoom(this, 'http://valid.tjp.hu/zoom/collage_2.jpg');">
</div>

このように指定すると次の画像のような効果が得られます。ちょっとロードに時間かかるけど。

また余裕のある人は拡大するときのフレームもカスタマイズできる模様。次のような感じです。

詳しい使い方＆ダウンロードは以下からどうぞ。チュートリアル付でわかりやすいですよ。

» valid.tjp.hu - TJPzoom 3 - JavaScript / CSS / DOM image magnifier

Info: 特殊効果 | 固定リンク | コメント (0) | トラックバック (0) | ↑