JavaScript小技集ホバーウィンドウ
ホバーウィンドウ
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>
ホバーウィンドウを使用する場合は、閉じるボタンを記述するのを忘れないように。