複数ルーペの表示

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