あまりにも聞かれる「ホバーウィンド」：フェードボックス設置方法 / 俺様メモ

外部JavaScript（.js）ファイルを使用したフェードボックス（ホバーウィンドウ）の設置例

ホバーウィンドウとは？：ブログやサイトにアクセスしたときに、メルマガや無料レポートの案内窓が画面の上などから落ちてくるアレ。
設定次第で出現タイミングや動き、大きさ、デザインを制御することが可能。
これは「ホバーウインドウ」「ドロップウインドウ」などと呼ばれているが、情報販売系サイトの世界では、かなり高価に情報商材としてこの仕掛けが売られていたりする。ｗ
効果として言われているのは・・・

サイトでのメールアドレスの取得率が倍増する。
顧客名簿が増えることにより売上げも向上する。
ポップアップブロッカーを回避することができる。
最新のマーケティングツールの導入によりサイトイメージがＵＰ！

などが挙げられている。
以前からこのスクリプトが価値を持って売られ続けている（引き合いが多い）ところを見ると意外と本当に効果が期待できるのか？

参考サイト（英語サイト）：Dynamic Drive DHTML Scripts- Drop-in content box
簡単に３種類の出現方法を選んでホバーウィンドウが作れます。
基本はSTEP1でウインドウが表示される回数を指定して、STEP2に表示されるソースを<head></head>タグの中にコピペして、STEP3のソースを<body></body>タグの中にコピペするだけ。
特に難しいこともないが、メルマガ登録フォームを入れ込むのにむしろ、その知識が必要かもですな。

ホバーウインドウって、俺的にはちょいとウザイ気がするのですがｗ
・・・かっこいいですか？。
とりあえず、ブロッカーにブロックされず、ホバーウィンドゥよりは検索エンジンには好かれる「じわー」と出現するフェードボックスのポップアップの設置方法とテンプレート。

「じわー」とにじみでるように出現するフェードボックスのポップアップの設置方法とテンプレート

外部JavaScriptファイルとは、HTML内にスクリプトを記述する代わりに外部にファイルを作成しリンクさせ読み込ませる方法。
また、フェードボックス（ホバーウィンドウ）デザインもスタイルシート（CSS）を外部ファイルで専用で使用してみた。（HTMLも簡素化され見やすくなるとともに、SEO対策にも有効といわれる）。

JavaScriptファイル（.js）

var displaymode="always"	
// always （=毎回に表示）、oncepersession（=IE起動の初回のみ表示）、2（=ほぼ1/2%の確率で表示）
var enablefade="yes"	
// フェイドイン効果("yes" to enable fade in effect, "no" to disable)
var autohidebox=["no", 7]	
// タイマー消去　5秒（例）Automatically hide box after x seconds? [yes/no,if_yes_hide_after_seconds]
var showonscroll="yes"	
// 常駐（スクロール無視）Should box remain visible even when user scrolls page? ("yes"/"no)
var IEfadelength=2	
// フェイドイン効果時間　1秒（例）fade in duration for IE, in seconds
var Mozfadedegree=0.05	
// フェイドイン角度　fade in degree for NS6+ (number between 0 and 1. Recommended max:0.2)

//////////////////////////////////////////////////////////////

if (parseInt(displaymode)!=NaN)
  var random_num=Math.floor(Math.random()*displaymode)
  function displayfadeinbox(){
  var ie=document.all && !window.opera
  var dom=document.getElementById
  iebody=(document.compatMode=="CSS1Compat")? document.documentElement: document.body
  objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
  var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
  var docwidth=(ie)? iebody.clientWidth : window.innerWidth
  docheight=(ie)? iebody.clientHeight: window.innerHeight
  var objwidth=objref.offsetWidth
  objheight=objref.offsetHeight
  objref.style.left=docwidth/2-objwidth/2+"px"
  objref.style.top=scroll_top+docheight/2-objheight/2+"px"
if (showonscroll=="yes")
  showonscrollvar=setInterval("staticfadebox()", 50)
if (enablefade=="yes" && objref.filters){
  objref.filters[0].duration=IEfadelength
  objref.filters[0].Apply()
  objref.filters[0].Play()
  }
  objref.style.visibility="visible"
  if (objref.style.MozOpacity){
  if (enablefade=="yes")
  mozfadevar=setInterval("mozfadefx()", 90)
  else{
  objref.style.MozOpacity=1
  controlledhidebox()
  }
  }
  else
  controlledhidebox()
  }
function mozfadefx(){
  if (parseFloat(objref.style.MozOpacity)<1)
  objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
  else{
  clearInterval(mozfadevar)
  controlledhidebox()
  }
  }
function staticfadebox(){
  var ie=document.all && !window.opera
  var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
  objref.style.top=scroll_top+docheight/2-objheight/2+"px"
  }
function hidefadebox(){
  objref.style.visibility="hidden"
  if (typeof showonscrollvar!="undefined")
  clearInterval(showonscrollvar)
  }
function controlledhidebox(){
  if (autohidebox[0]=="yes"){
  var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000: autohidebox[1]*1000
  setTimeout("hidefadebox()", delayvar)
  }
  }
function initfunction(){
  setTimeout("displayfadeinbox()", 100)
  }
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;
  }
if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
  if (window.addEventListener)
  window.addEventListener("load", initfunction, false)
  else if (window.attachEvent)
  window.attachEvent("onload", initfunction)
  else if (document.getElementById)
  window.onload=initfunction
  document.cookie="fadedin=yes"
  }

適当な名前をつけて.jsで保存（例：fadebox.js）。ただし保存の際の文字コードに注意。

CSSファイル（.css）

#fadeinbox
{
position:absolute;
width: 300px;　 
left: 0;
top: -300px;
border: 2px solid #FF6600;
background-color: #cccccc;
padding: 10px;
z-index: 100;
visibility:hidden;
}

適当な名前をつけて.cssで保存（例：fadebox.css）。デザインはこのCSSで変更することが可能。→適宜書き換えること。

外部Java ScriptとCSSファイルの設定

<head>タグ内に外部JavaScriptとCSSリンク設定をする。
※下記の赤い文字の部分をコピーして貼り付け。保存したファイル名とアップした場所（URI)で自分の環境に合わせて書き換える。

<head>
	<link rel="stylesheet" href="fadebox.css" type="text/css">
	<script language="JavaScript"   src="fadebox.js"></script>
</head>

フェードボックス（ホバーウィンドウ）の本体を設置

ページの最後（</body>タグの前）に以下の記述をする。表示させる記述も加えること。

<div>
<div id="fadeinbox" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); -moz-opacity:0">
<div style="text-aline:right;">
<span style="size:12px;"><a href="#" onClick="hidefadebox();return false">[閉じる]</a></span>
</div>

<!-- ここから　-->
ここに表示したいものを作成。
<!-- ここまで　-->

<div style="text-aline:right;">
<span style="font-size:12px;"><a href="#" onClick="hidefadebox();return false">メッセージを閉じる</a></span>
</div>
</div>

効果の設定（例）：
砂嵐 = RandomDissolve(duration=1)
グラディーション = GradientWipe(GradientSize=1.0 Duration=0.7)
がちょーん = Pixelate(MaxSquare=50,Duration=1, Enabled=false)
フェイド = Fade(duration=1.0,overlap=1.0)
ページﾞめくり =Stretch(stretchStyle='hide')
引き戸 = Slide(slideStyle='HIDE', bands=1)
風車 = Wheel(spokes=10)
扇 = RadialWipe(wipeStyle='wedge')
穴 = Iris(irisStyle='CIRCLE', motion='out')

まるごとJavaScript & Ajax ! Vol.1

Post DATE: 2007/05/02

価格：￥ 1,995
発売日：2007-02-15

WebクリエイティブのためのDOM Scripting

Post DATE: 2007/05/02

詳解JavaScript&Dynamic HTML辞典第3―Ajax対応

Post DATE: 2007/05/02

ありがとうございまいた。他のサイトのホバーウィンドウのサンプルは外部化しているものもなく、なかなかできませんでしたが、今回やっと成功しました。ありがとうございましや。

投稿者: winout | 2007年09月08日 12:18

差し出がましいようですが、効果の設定はどこに入れればいいんでしょうか？もしよかっったら教えてください。

投稿者: winout | 2007年09月08日 12:38

> winout様

すんません。効果例を書いた場所がわかりにくかったですねm(__)m。
3つめのファイル（フェードボックス（ホバーウィンドウ）の本体のhtml）のstyleでfilterが指定してあります。
>RandomDissolve(duration=1)
＝砂嵐効果
>Shadow(color=gray,direction=135)
＝曳影効果
これをつけたい効果に書き換えれば良いです。
http://msdn2.microsoft.com/en-us/library/ms532849.aspx

また、イマドキ風で外部ファイルで作成するならばPrototype Window Class を用いた方がずっとスマートで楽だと思います。
http://prototype-window.xilinus.com/

投稿者: pekestyle | 2007年09月12日 04:06

ウワァッ！コメントをもらっていたなんて～！ずっと気づきませんでした。久しぶりにサイトを訪問して驚きました。お礼が遅れて済みませんでした。
「ありがとうございました」

投稿者: winout | 2008年02月21日 10:49

コメントを投稿

（いままで、ここでコメントしたことがないときは、コメントを表示する前に俺様の承認が必要になることがあります。承認されるまではコメントは表示されません。その際はしばらく待ってください。）

名前:

メールアドレス:

URL:

この情報を登録しますか?

コメント: (スタイル用のHTMLタグが使えます) Leave your comment here.

俺様メモ