Search

ホバーウィンドウ

unknown

ホバーウィンドウは、Webページが完全に読込完了時にスタイルシートで隠していた要素をページの最上部に、JavaScriptを使って 表示する擬似ウィンドウのことです。別名、スクロールウィンドウ、ドロップインウィンドウとも呼ばれています。

ホバーウィンドウは、ポップアップウィンドウと違い、別ウィンドウを立ち上げないため、 ブラウザのポップアップブロックに引っかかりません。 ユーザーがサイトにアクセスして際に、ホバーウィンドウを表示してメルマガ登録を促したり、広告を表示したり、様々な使い道があります。

ホバーウィンドウ表示のスクリプトは、以下のサイトから無料で入手できます。
参照元:Dyanmic Drive DHTML Scripts - Drop-in content box

サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>ホバーウィンドウ</title>
        <!-- ホバーウィンドウ生成の外部JSファイル(drop.js)を読み込み -->
        <script type="text/javascript" src="/content/js/drop.js"></script>
        <script type='text/javascript'>
            /* Webページの読込完了時にホバーウィンドウを生成&表示 */
            window.onload=initbox;
        </script>
        <style type='text/css'>
            /* ホバーウィンドウのスタイル指定 */
            body {
                font-size:81%; /* 文字の大きさ */
                background-color:#333;
                color:#fff;
                font-family:verdana,sans-serif;
            }
            #dropin {
                position:absolute;
                visibility:hidden;
                left:200px; /* ウィンドウの左から200px右に移動した位置 */
                top:100px;  /* ウィンドウの上から100px下に移動した位置 */
                width:400px; height:400px; /* ウィンドウサイズ(幅・高さ)*/
                background-color:#f7f7f7; /* 背景色 */
                border:3px double #666666; /* 枠線 */
                line-height:1.5em; /* 行間隔 */
                padding:10px; /* 余白 */
                color:#333;
            }
        </style>
    </head>
    <body>
        <div id='dropin'>
            <!-- ホバーウィンドウに表示させる内容 [start] -->
            <h1>【ホバーウィンドウ】</h1>
            <p>
                <a href='http://www.dynamicdrive.com/dynamicindex17/dropinbox.htm'>参照元:Dyanmic Drive DHTML Scripts - Drop-in content box</a>
            </p>
            <p>
                <img src='/content/img/bg.gif' align="right" />
                Webページの読込完了時に、ホバーウィンドウを表示します。
                メルマガ登録案内などで使われているのを見かけます。
            </p>
            <p>
                別ウィンドウが立ち上がるわけではないので、ポップアップウィンドウと違って
                ブラウザのポップアップブロックに引っかかることもありません。
            </p>
            <p>
                このようにココに表示する文章を記述します。
                画像やアフェリエイト広告などをも入れる事も可能です。
            </p>
            <p align="center">
                <a href='javascript:void(0)' onclick='dismissbox();return false'>[閉じる]</a><br><!-- 閉じるボタン -->
                <a href='http://phpjavascriptroom.com/'>PHP & JavaScript Room</a>
            </p>
            <!-- ホバーウィンドウに表示させる内容 [end] -->
        </div>
        <p>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
            Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
        </p>
    </body>
</html>

ホバーウィンドウを使用する場合は、閉じるボタンを記述するのを忘れないように。

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women