ホバーウィンドウ（ドロップインウインドウ） の設置及び解説
まず、みなさんはホバーウィンドウと言うものは当然のことながらご存知ですよね。
そう、HPにアクセスすると上部からド～ンと上から落ちてきて、嫌でも目に付いてしまうウィンドウのことです。

ホバーウィンドウは、ポップアップウィンドウのようにポップアップウィンドウを遮断する機能を持った ポップアップブロッカーの影響を受けませんので、効率よく宣伝が行えます。

ホバーウィンドウさえ作ってしまえば、ホバーウィンドウ内の編集は、ホームページビルダー等のソフトで行うことができます。（送信フォーム、メールリンク、HPリンクなど等可能です）
ただし、ウィンドウのサイズや色の変更は、不可能なので、HTMLソースで変更するしかありません。

これらの変更に関しては、後半で説明していきます。
これから説明していくことは、HTMLソース及びJava Scriptの知識が無くてもホバーウィンドウの設置ができるように記しているつもりではありますが、不安のある方は、御自身である程度勉強してから行ってください。

基本的には、流れの通り進めていくと問題なく設置できます。（できるはずです）

設置によって発生した苦情等は、一切関知いたしませんので、あなたご自身にて責任を持って行ってください。
１．　ホバーウィンドウのJava Scriptを作成する
Scriptには、１回のみ落ちてくるタイプとリロードするたびに落ちてくるタイプの２種類があります。
あなた自身が好きなScriptを下記から選択し、テキストエディタ（メモ帳など）にコピーして、hobber.js
と名前を付け、保存してください。
注） hobber.js.txtではなくhobber.jsとして保存してください。
①　１回のみ落ちてくるタイプ
var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"

var bouncelimit=32 //(must be divisible by 8)
var direction="up"

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}

function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}

function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}

function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}

function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function dropornot(){
if (get_cookie("droppedin")==""){
window.onload=initbox
document.cookie="droppedin=yes"
}
}
dropornot()
②　リロードするたびに落ちてくるタイプ
var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"

var bouncelimit=32 //(must be divisible by 8)
var direction="up"

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}

function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}

function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}

function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}

function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


window.onload=initbox
２．　ホバーウィンドウを設置するHPがあるサーバーのディレクトリーへhobber.jsファイルを
　　　アップロードする
HPのHTMLソースを見ると上部に<HEAD>と<HEAD>に挟まれた部分がありますので、その部分に下記のソースを書き込んでください。


<script type="text/javascript" src="http://www.xxx.yyy.jp/zzzz/hobber.js"></script>

注）　下線部分は、ホバーウィンドウを設置するHPがあるサーバーのディレクトリー
３．　ホバーウィンドウを表示させたいHPのHTMLソース内に下記を追加
例：

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="Homepage Builder for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=9999">
<TITLE></TITLE>
<script type="text/javascript" src="http://www.xxx.yyy.jp/zzzz/hobber.js　　← 例えば、ここに書き込む
</HEAD>
<BODY>
４．　ホバーウィンドウを表示させたいHPのHTMLソース内に、このページで表示したホバー
　　　ウィンドウのHTMLソースを追加
<DIV id="dropin" style="position: absolute; visibility: hidden; left: 300px; top: 300px; width: 300px; height: 150px;
z-index : 1;
">
<DIV align="center">
<TABLE width="100%" border="3" cellpadding="0" cellspacing="2" bgcolor="#ff0033">
<TBODY>
<tr>
<td valign="top" bgcolor="#ffcc33">
<DIV align="center">
<p><strong><font color="#3399ff" size="5">タイトル</font></strong></p>
<p align="center"><font color="#cc0033" size="3"><strong>サブタイトル</strong></font></p>
<p align="left"><font color="#000000" size="1">本文</font></p>
</DIV>
<br><br><br>
<p align="center"><a href="#" onclick="dismissbox();return false"><font size="2">[閉じる] </font></a></p>
<DIV align="right">
<FORM style="margin:8 0 0 0;"><INPUT TYPE=BUTTON VALUE="閉じる" onclick="dismissbox();return false"></FORM>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</DIV>
HPのHTMLソースを見ると下部に向かって<BODY>と<BODY>に挟まれた部分がありますので、その部分に下記のソースを書き込んでください。

この段階では、ホバーウィンドウを設置しなくてはいけない段階なので、この通り行ってください。
ホバーウィンドウのカスタマイズは可能ですので、設置後行ってください。
例：

</HEAD>
<BODY>
<DIV style="width : 793px;height : 34px;top : 15px;left : 27px;
position : absolute;
z-index : -6;
" id="Layer1"><B><FONT size="6" face="HGP創英角ｺﾞｼｯｸUB" color="#ff8000"><strong>ホバーウィンドウ（ドロップインウインドウ）</FONT></B></DIV>
<DIV style="width : 603px;height : 180px;top : 90px;left : 80px;
position : absolute;
z-index : -4;
</DIV>
　　　　　　　← 例えば、ここに書き込む
</BODY>
</HTML>
５．　３、４で作成したHPを２でアップロードしたhobber.jsと同一のファイルサーバーの
　　　ディレクトリーへアップロードする
　　　
アップロード後、作成したHPへアクセスしてみてください。
ド～ンとホバーウィンドウが現れましたか？

現れた方は、ご苦労様です。おめでとうございます。
現れなかった方は、もう１度上記１～５までを見直して悪い箇所の修正を行ってください。

IEおよびNetscapeで動作(ホバーウィンドウが出ること)確認済みですので、間違わないで行うと必ず
ホバーウィンドウは現れるはずです。
■#000000 ■#000033 ■#000066 ■#000099 ■#0000cc ■#0000ff
■#003300 ■#003333 ■#003366 ■#003399 ■#0033cc ■#0033ff
■#006600 ■#006633 ■#006666 ■#006699 ■#0066cc ■#0066ff
■#009900 ■#009933 ■#009966 ■#009999 ■#0099cc ■#0099ff
■#00cc00 ■#00cc33 ■#00cc66 ■#00cc99 ■#00cccc ■#00ccff
■#00ff00 ■#00ff33 ■#00ff66 ■#00ff99 ■#00ffcc ■#00ffff

■#330000 ■#330033 ■#330066 ■#330099 ■#3300cc ■#3300ff
■#333300 ■#333333 ■#333366 ■#333399 ■#3333cc ■#3333ff
■#336600 ■#336633 ■#336666 ■#336699 ■#3366cc ■#3366ff
■#339900 ■#339933 ■#339966 ■#339999 ■#3399cc ■#3399ff
■#33cc00 ■#33cc33 ■#33cc66 ■#33cc99 ■#33cccc ■#33ccff
■#33ff00 ■#33ff33 ■#33ff66 ■#33ff99 ■#33ffcc ■#33ffff

■#660000 ■#660033 ■#660066 ■#660099 ■#6600cc ■#6600ff
■#663300 ■#663333 ■#663366 ■#663399 ■#6633cc ■#6633ff
■#666600 ■#666633 ■#666666 ■#666699 ■#6666cc ■#6666ff
■#669900 ■#669933 ■#669966 ■#669999 ■#6699cc ■#6699ff
■#66cc00 ■#66cc33 ■#66cc66 ■#66cc99 ■#66cccc ■#66ccff
■#66ff00 ■#66ff33 ■#66ff66 ■#66ff99 ■#66ffcc ■#66ffff

■#990000 ■#990033 ■#990066 ■#990099 ■#9900cc ■#9900ff
■#993300 ■#993333 ■#993366 ■#993399 ■#9933cc ■#9933ff
■#996600 ■#996633 ■#996666 ■#996699 ■#9966cc ■#9966ff
■#999900 ■#999933 ■#999966 ■#999999 ■#9999cc ■#9999ff
■#99cc00 ■#99cc33 ■#99cc66 ■#99cc99 ■#99cccc ■#99ccff
■#99ff00 ■#99ff33 ■#99ff66 ■#99ff99 ■#99ffcc ■#99ffff

■#cc0000 ■#cc0033 ■#cc0066 ■#cc0099 ■#cc00cc ■#cc00ff
■#cc3300 ■#cc3333 ■#cc3366 ■#cc3399 ■#cc33cc ■#cc33ff
■#cc6600 ■#cc6633 ■#cc6666 ■#cc6699 ■#cc66cc ■#cc66ff
■#cc9900 ■#cc9933 ■#cc9966 ■#cc9999 ■#cc99cc ■#cc99ff
■#cccc00 ■#cccc33 ■#cccc66 ■#cccc99 ■#cccccc ■#ccccff
■#ccff00 ■#ccff33 ■#ccff66 ■#ccff99 ■#ccffcc ■#ccffff

■#ff0000 ■#ff0033 ■#ff0066 ■#ff0099 ■#ff00cc ■#ff00ff
■#ff3300 ■#ff3333 ■#ff3366 ■#ff3399 ■#ff33cc ■#ff33ff
■#ff6600 ■#ff6633 ■#ff6666 ■#ff6699 ■#ff66cc ■#ff66ff
■#ff9900 ■#ff9933 ■#ff9966 ■#ff9999 ■#ff99cc ■#ff99ff
■#ffcc00 ■#ffcc33 ■#ffcc66 ■#ffcc99 ■#ffcccc ■#ffccff
■#ffff00 ■#ffff33 ■#ffff66 ■#ffff99 ■#ffffcc ■#ffffff
ホバーウィンドウのカスタマイズ
　　
function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits 　　　　⇒ 250： 落ちてくる（表示する）までの時間
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)　　　　⇒ 50： 落下してくるスピード
}

function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)　　　　⇒ 100： 表示位置 （上部からの位置）
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)　　　⇒ 50： バウンドのスピード
１）　Java Scriptのカスタマイズ箇所

　　　　　　下記の数値を変更することでカスタマイズできます。
　　　　　　　Script内なので、他の値は決して変更等を行わないで下さい。
２）　HTMLソースのカスタマイズ箇所

　　　　　　下記の数値を変更することでカスタマイズできます。
　　　　　　　
<DIV id="dropin" style="position: absolute; visibility: hidden; left: 300(*1)px; top: 300px; width: 300(*2)px; height: 150(*3)px;
z-index : 1;
">
<DIV align="center">
<TABLE width="100%" border="3(*4)" cellpadding="0(*5)" cellspacing="2(*6)" bgcolor="#ff0033(*7)">
<TBODY>
<tr>
<td valign="top" bgcolor="#ffcc33(*8)">
<DIV align="center">
<p><strong><font color="#3399ff" size="5">タイトル</font></strong></p>
<p align="center"><font color="#cc0033" size="3"><strong>サブタイトル</strong></font></p>
<p align="left"><font color="#000000" size="1">本文</font></p>
</DIV>
<br><br><br>
<p align="center"><a href="#" onclick="dismissbox();return false"><font size="2">[閉じる] </font></a></p>
<DIV align="right">
<FORM style="margin:8 0 0 0(*9);"><INPUT TYPE=BUTTON VALUE="閉じる" onclick="dismissbox();return false"></FORM>
</DIV>
*1：　表示位置 （左側からの位置）

*2：　ホバーウィンドウの幅

*3：　ホバーウィンドウの高さ

*4：　外枠の影の大きさ

*5：　上下左右の文字位置のMarginを決める

*6：　外枠の太さ

*7：　外枠の色

*8：　ホバーウィンドウの背景色

*9：　"閉じる" ボタンの表示位置Margin


青色の箇所は、ホバーウィンドウ内に表示させる文字に対する設定ですが、これに関しては、ホームページビルダー等のソフトで編集できるので、ここでの説明は省きます。

また、ホームページビルダー等のソフトで、送信フォーム・メールリンク・HPリンク等の挿入も可能ですので、あなた自身でお好きなようにカスタマイズして下さい。


"閉じる” は、忘れずに必ず入れてください。これを入れておかないと、ホバーウィンドウを消すことができず、あなたのサイトを訪れた方に迷惑がかかりますので。
カラーコード表