オプションを指定して表示する

Instant.jsではいくつかのオプションを指定できます。オプションは画像を左右どちらに傾けるか、影の濃さ、枠の色の3種類を指定可能です。いずれも<img>タグのclass属性に記述し、複数のオプションを指定する場合は半角空白で区切って列記します。影の濃さを指定するにはishadowを使います。ishadowの後に0～100までの整数値を指定します。値が大きくなるほど影が濃くなります(サンプル02)。

サンプル02の実行結果

サンプル02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <script type="text/javascript" src="js/instant.js"></script>
        <title>Instant.jsサンプル</title>
    </head>
    <body>
    <h1>Instant.jsサンプル</h1>
        <div>
            <img src="photo/001.jpg" class="instant ishadow0" width="192" height="108" alt="富士山">
            <img src="photo/002.jpg" class="instant ishadow50" width="192" height="108" alt="夕焼け">
            <img src="photo/003.jpg" class="instant ishadow100" width="192" height="108" alt="富山湾">
        </div>
    </body>
</html>

枠の色を指定するにはicolorを使います。icolorの後にHTMLで指定されるrrggbb形式のカラーコードを指定します。赤であればicolorFF0000、青であればicolor0000FFとします。カラーコードの16進数値のA～Fの文字は大文字でも小文字でも構いません(サンプル03)。

サンプル03の実行結果

サンプル03

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <script type="text/javascript" src="js/instant.js"></script>
        <title>Instant.jsサンプル</title>
    </head>
    <body>
    <h1>Instant.jsサンプル</h1>
        <div>
            <img src="photo/001.jpg" class="instant icolor000000" width="192" height="108" alt="富士山">
            <img src="photo/002.jpg" class="instant icolor808080" width="192" height="108" alt="夕焼け">
            <img src="photo/003.jpg" class="instant icolorAD9FFF" width="192" height="108" alt="富山湾">
        </div>
    </body>
</html>