雑学・和歌山→記事一覧 投稿した記事が増えてきましたので目次と要約のサイトにリンクしました(2010.4.3)。画像も増えてきましたので、雑学・和歌山 MY ALBUMにリンクしました(2011.2.12)。

2010年03月25日

ホバーウィンドウの呼び出し

メールマガジン購読の勧誘、情報商材の購入などのサイトでよく見られたホバーウィンドウ、あるいはスクロールウィンドウ(ドロップインウィンドウ)とか言われていたものです。最近はうざいのかあまり使われていないようです。

例えばこんな感じのものです。
サンプル:ホバーウィンドウスクリプト設置方法
http://stepmail.hikaku.name/technic/Drop-in.php

ユーザーにとってはこのウィンドウが大きい場合閉じないといけないので、評判が悪い。しかし、これを使うと購読率、精読率が高くなると言うことで、今でもメルマガなどの勧誘サイトではよく見受けられます。

それじゃ、 いこらブログでのホーバーウィンドウの設置方法は....

ホバーウィンドウの動作をする、JavaScriptとHTML文のソースは、以下のとおりで、これを「ブログ環境設定」ページの「カスタムプラグインの登録」に三つあるカスタムプラグインのひとつにコピーペーストするだけです。



<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 redo(){
bouncelimit=32
direction="up"
initbox()
}
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")?
document.documentElement : document.body
}
window.onload=initbox
</SCRIPT>
<!--以上がJavascriptで、以下が小さなウィンドウ -->
<P align=left><!--webbot bot="HTMLMarkup" startspan --></P>
<DIV id=dropin style="LEFT: 200px; VISIBILITY: hidden; WIDTH: 200px;
POSITION: absolute; TOP: 100px; HEIGHT: 50px; BACKGROUND-COLOR:
yellow;">
こんにちは
<DIV align=right><A onclick="dismissbox();return false" href="#">
[閉じる]</A></DIV>

注:お手数ですが、上記のスクリプトの<と>は全角ですので、コピーした後、メモ帳などにペーストして半角に訂正してください。


同じカテゴリー(ブログ)の記事画像
日高町から台湾まで飛んだ蝶
可愛いペンギン
ふなっしーの優しさ
たい焼きを買って海に逃してあげてもいいですか
日本縦断3500キロ
リラックマ オムライス
同じカテゴリー(ブログ)の記事
 日高町から台湾まで飛んだ蝶 (2015-08-29 10:42)
 北朝鮮人の希望の光 (2015-08-21 14:41)
 可愛いペンギン (2015-05-22 09:35)
 ハンセイー (2015-05-13 10:58)
 宣伝が上手その2 (2015-04-18 18:27)
 宣伝が上手 (2015-04-15 10:31)

上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。