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