【ハウツー】

ゼロからはじめるZoomi -単純だけど面白い!スクリプト要らずのWeb画像拡大術

3 複数画像の表示と透過効果

    古籏一浩  [2007/10/18]

    複数画像の表示と透過効果

    画像が複数ある場合でも<img>タグにclass属性とalt属性を指定するだけで特別なことを行なう必要はありません(サンプル02)。

    サンプル02の実行結果

    複数の画像を並べて表示させることも可能。すべての画像でZoomiの効果が確認できる

    サンプル02

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/zoomi.js"></script>
            <title>zoomi.jsサンプル</title>
        </head>
        <body>
        <h1>zoomi.jsサンプル</h1>
            <div id="album">
                <img src="thumb/001.jpg" class="zoomi" alt="photo/001.jpg">
                <img src="thumb/002.jpg" class="zoomi" alt="photo/002.jpg"><br>
                <img src="thumb/003.jpg" class="zoomi" alt="photo/003.jpg">
                <img src="thumb/004.jpg" class="zoomi" alt="photo/004.jpg">
            </div>
        </body>
    </html>
    

    Zoomiは拡大時にPNG形式の画像を指定すると画像が透過したように表示され面白い効果を施すこともできます。同じサイズの画像を指定すればロールオーバーのライブラリとしても使用することができます(サンプル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">
            <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/zoomi.js"></script>
            <title>zoomi.jsサンプル</title>
        </head>
        <body>
        <h1>zoomi.jsサンプル</h1>
            <div id="album">
                <img src="normal/btn.gif" class="zoomi" alt="over/btn.gif">
            </div>
        </body>
     </html>
    

    Zoomiは同一ページ上で実画像を手軽に表示したい場合に便利です。また、使い方次第では手軽なロールオーバーライブラリとしても使えるでしょう。

    関連記事

    関連サイト

    関連したタグ

    新着記事

    特設サイトの情報

      人気記事

      一覧

      新着記事

      特別企画

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