IEでの表示不具合を解消する
非常に手軽なTJPzoomライブラリですが、冒頭に説明したように、HTMLタグの組み合わせや状況によっては、IEで不具合が発生してしまいます。具体的には、ズーム部分がおかしな位置に表示されてしまうのです。
IEでの表示不具合。本来重なるはずのマウスカーソルの位置と拡大画像の位置がずれてしまっています
原因は不明ですが、ページを1ピクセルだけ下にスクロールさせることで一応正しく機能するようになります。今回のところはこれで切り抜けましょう。ページを1ピクセル下にスクロールさせるには、以下のスクリプトを追加します。
window.scrollTo(0,1);
今回の作例では、TJPzoomライブラリが読み込まれた後に<script>タグを使って以下のようにしておきましょう。
<script type="text/javascript"><!--
window.scrollTo(0,1);
// --></script></code>
以上で完成です。連載タイトルの「29分」どころか、10分足らずで完成してしまったことと思います（完成した作例）。
最終的に完成した作例。マウスカーソルにあわせて画像が拡大されます
今回は簡単に実装できるTJPzoomライブラリを使いましたが、類似の機能を持つライブラリの中には、「Loupeライブラリ」のように、虫眼鏡などのビジュアルで表示するものもあります。興味のある方は、こちらもぜひ挑戦してみましょう。
（作例デザイン：wataru）
（作例写真：写真素材 足成）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
- 実践!Ajaxフレームワーク jQuery
- 古籏一浩 著、毎日コミュニケーションズ刊
- 改訂第4版 JavaScript ポケットリファレンス
- 古籏一浩著、技術評論社刊
- CSS&JavaScript表現アイデア帖
- エム・ディー・エヌ刊
