マウスカーソルの隣に吹き出しを表示する

こんにちは、ウェブラボ技術メモです。

今回はマウスカーソルの座標を使って、マウスカーソルの隣に吹き出しを表示してみます。

DEMOはこちら

マウスカーソルの座標を取得する方法については、こちらのページを参考にさせていただきました。

http://hakuhin.jp/js/mouse.html

それでは実装まで解説していきます。

まずはhead内でjquery本体と動作に必要なCSSを読み込ませ、

動作させるためのスクリプトを記述します。

■スクリプト

<link rel="stylesheet" href="../common/css/common.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
//色領域にマウスカーソルがホバーしているなら吹き出しを表示する
$('.area_red').hover( function(){$("#popup_red").show();},function(){$("#popup_red").hide();});
$('.area_green').hover( function(){$("#popup_green").show();},function(){$("#popup_green").hide();});
$('.area_blue').hover( function(){$("#popup_blue").show();},function(){$("#popup_blue").hide();});

$(function(){
	 $('#area').hover(function(){	//色領域にマウスカーソルがホバーしているとき開始
		function MouseMoveFunc(e){	//マウスカーソルが移動するたびに実行する関数

			// マウスカーソルの座標を取得
			var mouse_x = e.clientX + 5;	//マウスカーソルのX座標 5px右へ調整
			var mouse_y = $(window).scrollTop() + e.clientY + 5;	//マウスカーソルのY座標 現在のスクロール位置＋5px下へ調整

			// 吹き出しの位置座標を取得したマウスカーソルの座標に変換
			$("#popup").css({
				"position": "absolute",
		      		"left": mouse_x,
				"top": mouse_y
			});
		}

		if(document.addEventListener){
			document.addEventListener("mousemove" , MouseMoveFunc);
		}else if(document.attachEvent){
			document.attachEvent("onmousemove" , MouseMoveFunc);
		}
	});
});
</script>

e.clientX、e.clientYでマウスカーソルの座標を取得しています。

さらに数字を加算・減算することで、自由に位置を調整できます。

次に色領域と吹き出しをHTMLに記述します。

■HTML

<ul id="area" class="clearfix">
		<li class="area_red"></li>
		<li class="area_green"></li>
		<li class="area_blue"></li>
	</ul>

	<div id="popup">
		<p class="upblock" id="popup_red">これは<span>赤</span>です</p>
		<p class="upblock" id="popup_green">これは<span>緑</span>です</p>
		<p class="upblock" id="popup_blue">これは<span>青</span>です</p>
	</div>

最後にHTMLに対応したCSSを記述します。

■CSS

/* 色領域 */
#area{
    width: 300px;
    margin: 0 auto;
}

#area li{
    width: 100px;
    height: 100px;
    float: left;
}

.area_red{ background: #f9d0d1; }
.area_green{ background: #baf9b7; }
.area_blue{ background: #94b3fa; }


/* 吹き出し */

#popup{
    position: absolute;
    z-index: 50;
}

#popup span{
    padding: 0 4px;
}

#popup #popup_red span{ background: #f9d0d1; }
#popup #popup_green span{ background: #baf9b7; }
#popup #popup_blue span{ background: #94b3fa; }

#popup .upblock{
    display: none;
    background: #fff;
    border: 1px solid #333;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

色領域と吹き出しは、自由にスタイルを指定できます。

今回はpositionの「absolute」を使って、吹き出しがマウスカーソルと一緒に動く動作を実装しましたが、「width」「height」で要素の拡大・縮小を行うことも可能なので、マウスカーソルの座標を利用できる幅は広いかもしれません。

対応ブラウザについて確認してみました。

◯ Google Chrome

◯ Firefox
◯ Safari
◯ Opera
◯ Internet Explorer 9、10+
△ Internet Explorer 7、8（動作はするが、吹き出しの表示が不安定）

基本的にどのブラウザでも正常に動作するでしょう。

ただし、要素の角を丸くする「border-radius」は、IE8以下に対応していないのでご注意ください。

以上、技術メモでした。