【ハウツー】

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

3 複数ルーペの表示

    古籏一浩  [2007/08/06]

    複数ルーペの表示

    ルーペ処理を複数の画像に適用した場合はブラウザによって結果が異なります。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は、少ないページ領域で画像を拡大して見せたい場合に便利です。ちょっと面白い効果を狙うには良いかもしれません。

    新着記事

    特設サイトの情報

      人気記事

      一覧

      新着記事

      特別企画

      マイナビニュースマガジン