HOMEへ戻る 柊優プレゼンツ
メールマガジン
HOMEメールマガジン>ホバーウインドウを使ったメルマガ誘導法

ホバーウインドウを使ったメルマガ誘導法

ポップアップウインドウをブロックするツールが流行ってからは、
ポップアップからのメルマガ購読者が激減しました。

で、対抗策として考え出されたのが、
ホバーウインドウを使用して、メルマガの購読者数をゲットしようとする方法です。

ところが、実際に、
「ホバーウインドウってどうやって作ればいいの?」という質問が多いので、
ここで、ソース丸ごと公開します。

まずは、<HEAD>〜</HEAD>タグへ以下のソースを落とし込んで下さい。

<script language="JavaScript1.2">
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

</script>

次に、<BODY>〜</BODY>に以下のソースを入れて下さい。

<DIV id="dropin" style="position:absolute;visibility:hidden;left : 188px;top : 137px;width:300px;height:150px;background-color:#DFDFDF;">
<DIV ALIGN="CENTER">
<TABLE WIDTH="100%" HEIGHT="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#DFDFDF">
<TR>
<TD valign="TOP"><DIV ALIGN="CENTER">
<P>これはサンプルです。自由に加工して下さい。</P>
<P ALIGN="CENTER">○文章を自由に入力して下さい○</P>
<P><ALIGN="LEFT">○文章を自由に入力して下さい○</P>
<P><a href="#" onClick="dismissbox();return false">[ここを押すと閉じます]</a></P>
</DIV></TD></TR></TABLE></DIV></DIV>

以上です。<HEAD>と<BODY>を間違えないように。
これで、あなたのサイトにも、ホバーウインドウを設置する事が出来ます。

ですが、ホバーウインドウを嫌う人も多いです。
使いどころを間違えないように、使用して下さい。

次の講座は、

【CROSS-STYLEとは】
「ウェブデザインとインターネットマーケティングの繋がりを解説したサイトがこれまでにあっただろうか?」
CROSS-STYLEは、そんな小さな「?」から生まれた、クールなウェブデザイン講座とネットマーケティング・SEO講座をメインとしたサイトです。

【お役立ちツール一覧】

【Googleサイトマップを簡単に作る方法】
サイトマップラス(100ページ以下のサイトのみ)

Powered by SEO対策

500ページ以下のサイトは、Googleサイトマップの登場による、SEOの大変革の一番下に記載したGoogle Sitemap Generatorを活用下さい。


【外部リンク先を知る方法】
Yahoo!Site Explorer(yahoo.com)
Yahoo!でどこからリンクされているかを知る方法。
グーグルは、グーグルアカウントを取得し、ウェブマスターツール>サイト選択>サイトへのリンク、で外部リンクを確認出来ます。


【検索需要の総数を知る方法】
キーワードアドバイスツール(無料登録ドットコム)
オーバチュア(現在消滅)情報を元に、需要と供給の指数であるKEIを知るためのツール。
キーワード最適化ツール(グーグル)
グーグルによる「検索用語」についての情報を知るためのツール。


【超速で上位表示を可能にする魔法】
Yahoo!ビジネスエクスプレス
「ヤフカテ登録サイト」になれる!
クロスレコメンドJエントリー
カテゴリ登録申し込みをして、ウェブの更なる価値向上を!個人非営利サイトでもOK!


【オススメアフィリエイト】
A8.net(ジャンルの豊富さNo.1!)
バリューコマース(何故か成約率高し!)
リンクシェア・ジャパン(大手企業がズラリ)
アクセストレード(稼ぎ頭と言えばココ!)
バナーブリッジ(2ティアを狙うなら!)
アドリンク(ちょっとだけマニアック?)
インフォカート(情報商材を売るなら!)

【CROSS-STYLEの人気コンテンツ】
アフィリエイトでプラス10万円を目指す旅
自分の大切なウェブサイトが収入を生んでくれる、これ以上の興奮と感動はありません。あなたのウェブサイトを、収入を稼ぎ出すクールウェブに!

最終結論!ドメインとレンタルサーバの最適解!
世界に一つしかない、「あなただけのサイト」を持つためのアドバイス決定版!ドメイン取得の裏事情や、レンタルサーバを借りる際に考えるべきTipsを一挙大公開!

【オススメ本ジャンル別】
ウェブデザイン
HTML/CSS
インターネットマーケティング
SEO/SEM
ウェブサイト総論
アフィリエイト

【リンク集】
ホームページ作成に役立つリンク集
サイト作成のヒントは、きっとここにある!

相互リンク募集してます!
あなたのサイトとCROSS-STYLEを、相互リンクしましょう!ホームページ作成やアクセスアップ、SEOなどなど、インターネットに関わるサイトを大募集しています!

【メールはこちらまで】
「これの解説をもっと詳しく!」「これが分からない」「ここはこうしたら?」などなど、質問・感想・激励・叱咤・クレーム(笑)は、柊優にメールを!アドレスは、site(アットマーク)cross-style.comです。((アットマーク)の部分を@に直して送って下さい)

ワンポイント画像

更新が無いウイルス対策ソフトと言えば「ZERO」!
柊も使っているVaioTypeTがはソニースタイルで!
WebデザインにはAdobeソフトがオススメ!



クールなウェブデザインと圧倒的なマーケティングテクニックを手に入れる術、
全ては今、CROSS-STYLEから始まる・・・

Copyright (c) 2006-2009 CROSS-STYLE All Rights Reserved.