昨日ご紹介した「あらゆるページに拡大鏡を追加できる『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> なお、このほかにいくつかの画像ファイルを
![あらゆるページにもっと高機能な拡大鏡を追加できる『TJPzoom.js』 - SIMPLE*SIMPLE ~ ウェブ職人のための小粋なネタ帳 ~](https://cdn-ak-scissors.b.st-hatena.com/image/square/767d8b8c6e254be784a4e29fadced76e95671d8e/height=288;version=1;width=512/http%3A%2F%2Fwww.simplexsimple.com%2Farchives%2F2007%2F05%2F03%2Ftjp_1.jpg)