【ハウツー】ゼロからはじめる Loupe - LoupeでWEBに拡大鏡を設置しよう (3) 複数ルーペの表示 | パソコン

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

パソコン

急上昇ワード

[

]

【ハウツー】

ゼロからはじめる Loupe - LoupeでWEBに拡大鏡を設置しよう

3 複数ルーペの表示

古籏一浩　 [2007/08/06]

印刷

先頭
前へ
- 1
- 2
- 3
- ／3

複数ルーペの表示

ルーペ処理を複数の画像に適用した場合はブラウザによって結果が異なります。Safari、Internet Explorerでは同時に1つしか処理されませんが、Firefox、Operaでは複数の画像にルーペ処理を適用できます(サンプル03)。


サンプル03の実行結果	Firefox/Operaでは

複数ルーペの表示が可能に

サンプル03

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Loupeサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:white; }
        --></style>
        <script type="text/javascript">
            var loupePath = "js/";
        </script>
        <script type="text/javascript" src="js/loupe.js"></script>
        <script src="loupe.js" type="text/javascript"></script>
        <!--[if gte IE 6]> 
        <script type="text/javascript">
            var loupePath = "vml/";
        </script>
        <script src="vml/loupe.js" type="text/javascript"></script>
        <![endif]-->
    </head>
    <body>
    <h1>Loupeサンプル</h1>
    <div>
        <img id="MtFuji" onLoad="initLoupe(this.id, false);" src="images/large.jpg" width="384" height="216">
    </div>
    <div>
        <img id="Shiraito" onLoad="initLoupe(this.id, true);" src="images/large2.jpg" width="384" height="216">
    </div>
    </body>
</html>

Loupeは、少ないページ領域で画像を拡大して見せたい場合に便利です。ちょっと面白い効果を狙うには良いかもしれません。