あくまでさりげなくアンケート

こちらのサイトさりげなくアンケート収集するというアイディアがあった。

どうやるかというと、「戻る」リンクにマウスオーバーでアンケート画面を
出すという単純なもの。
でも、実際やってみるとわかると思うけど、戻ろうと思った瞬間に
なにか出てくるとついついアンケートに答えてしまいそうになる。

ただ、元のサイトではIE専用のjavascript関数を使っていたから、
それをIE以外でも出るようにしてみた。

サンプル

ただし、javascriptが無効になっているIEでは動かないので注意。
やってることの解説なんぞを。

javascriptを使用した方のHTML

<div id="jwrapper">
<a href="#" onmouseover="popup('jpopup')" onmouseout="hide('jpopup')">
javascriptでさりげなくアンケート</a>
<div id="jpopup" onmouseover="popup('jpopup')" onmouseout="hide('jpopup')">
<ul>
<li><a href="#1">参考になった</a></li>
<li><a href="#2">普通</a></li>
<li><a href="#3">参考にならなかった</a></li>
</ul>
</div>
</div>


CSSを使用した方のHTML

<div id="cwrapper">
<a href="#">CSSでさりげなくアンケート(IE以外)</a>
<div id="cpopup">
<ul>
<li><a href="#1">参考になった</a></li>
<li><a href="#2">普通</a></li>
<li><a href="#3">参考にならなかった</a></li>
</ul>
</div>
</div>


そしてCSS

#jwrapper, #cwrapper, #jcwrapper {
position:relative;
margin-left:200px;
width:300px;
}
#jpopup, #cpopup, #jcpopup {
position:absolute;
left:-50px;
top:-150px;
width:300px;
height:150px;
background-image:url('../image/popup.gif');
background-repeat:no-repeat;
display:none;
}
#jpopup ul, #cpopup ul, #jcpopup ul {
margin:15px 30px;
}
#cwrapper:hover #cpopup, #jcwrapper:hover #jcpopup {
display:block;
}

あとスクリプト部分

var timer;
function popup(id) {
clearInterval(timer);
document.getElementById(id).style.display='block';
}

function hide(id) {
clearInterval(timer);
timer = setInterval(function(){
clearInterval(timer);
document.getElementById(id).style.display='none';
}, 200);
}


何をしているかというと、要はリンクの上にマウスが来たら
アンケート部分のスタイルシートの「display」を「none」から
「block」に変えているだけ。

javascriptの場合、この値は

document.getElementById(エレメントのID).style.display

で変更可能。
微妙に要素の範囲の判定がシビアなんで、アンケート画面を消すときに
遅延として0.2秒待たせるようにした。
これはあまりいらないかもしれない。

CSSの場合、IE以外(未確認)のブラウザだと、a要素以外でも :hover を
指定できる(らしい)ので、それと状況依存セレクタを利用して通常はdisplay:noneを
指定しておき、:hoverの子要素の場合にはdisplay:blockを指定して
displayの値を上書きする。

それ以外のCSSの値は適当に決めてよし。


確かIEのシェアが8割くらいだったと思うから、そのうち半分の人が
javascriptを無効にしているとすると、この方法でアンケートが
できるのはだいたい6割弱というところかな。
果たしてそれがさりげないのかどうかは考えないということで。

もっとエレガントにソースを書けとかいうツッコミは勘弁してください。
posted by oi at 2006年08月01日 01:17 | Comment(0) | TrackBack(0) | JavaScript
この記事へのコメント

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。