PHP & JavaScript Room :: 設置サンプル

実行結果

【ホバーウィンドウ】

参照元：Dyanmic Drive DHTML Scripts - Drop-in content box

Webページの読込完了時に、ホバーウィンドウを表示します。 メルマガ登録案内などで使われているのを見かけます。

別ウィンドウが立ち上がるわけではないので、ポップアップウィンドウと違って ブラウザのポップアップブロックに引っかかることもありません。

このようにココに表示する文章を記述します。 画像やアフェリエイト広告などをも入れる事も可能です。

[閉じる]
PHP & JavaScript Room

Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text

設置サンプルのソース

<!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>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <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>