[jQuery]イメージマップでTooltip表示するサンプル

「イメージマップのホットスポットにマウスオーバーしたら説明表示出るように出来ない？」って言われて書いたやつ。
非表示にしてるブロック要素を表示してるだけなので、画像とかテキストとか割とフリーダムに出せる。

jQuery1.2.6用。

jQueryのマウスイベントには以下プロパティ提供されていて

• pageX/Y ： ページの左上を0としたマウスポインタの位置
• clientX/Y ：　ブラウザのドキュメント表示領域を0としたマウスポインタの位置

特別なことしなくてもイベントが発生した時のマウスポインタの位置を取得することが出来る。

<div id="imgmap">
<img src="tags.png" alt="Tags" width="400" height="151" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="33,45,101,83" href="#sea" alt="Sea" />
<area shape="rect" coords="146,23,279,67" href="#beach" alt="Beach" />
<area shape="rect" coords="94,100,205,136" href="#flower" alt="Flower" />
<area shape="rect" coords="232,83,294,106" href="#cloud" alt="Cloud" />
<area shape="rect" coords="311,58,364,95" href="#sky" alt="Sky" />
</map></div>
<p id="sea" class="detail"><img src="sea.jpg" alt="Sea" width="300" height="240" /></p>
<p id="beach" class="detail"><img src="beach.jpg" alt="Beach" width="300" height="240" /></p>
<div id="flower" class="detail"><img src="flower.jpg" alt="Flower" width="300" height="240" />
<p>テキストも入ります</p></div>
<p id="cloud" class="detail"><img src="cloud.jpg" alt="Cloud" width="240" height="300" /></p>
<p id="sky" class="detail"><img src="sky.jpg" alt="Sky" width="300" height="240" /></p>

表示位置の調整は適当にずらす処理してます。適当なのでそのままじゃおかしいかも
$('#Map area')を変更すれば別の要素でもやれると思います多分。

$(function (){
	if($('#imgmap')){
		
		$('#Map area').each(function(i){
		var name = $(this).attr('href');
		 $(name).css({
				"display":"none",
				"position": "absolute",
				"zIndex": "9999",
				"display": "none"
		 });
			$(this).mouseover(
				function(e){ 
				  var bodyX =$(window).width();
				  var bodyY =$(window).height();
				  var Y = ((e.clientY-$(name).height()) -15);
				  var X = e.clientX;
				  
				  if(Y < 0){
					   Y = e.clientY +15;
				  }
				  var eqY = Y+$(name).height();
				  var eqX = X+$(name).width();
				  if( eqY > bodyY){
					 Y = e.clientY+(bodyY-eqY);
				  }
				  if( eqX > bodyX){
					  eX = bodyX-X;
					  X = bodyX-(eX+$(name).width())-20;
				  }else{
					  X=X+15;
				  }
					$(name).css({ "display":"block","left":X+"px","top":Y+"px"});
				});
			$(this).mouseout(
				function(){ 
				
					$(name).css({ "display":"none"});
			});
		});
	}
});

area要素のhrefに表示したい要素のIDを＃付きで入れて、
別に表示する要素をID付きで用意しておけば、マウスオーバーしたときに表示されるという仕組みです。
なのでhrefと表示する要素のIDが一致してないと何も出ません。

下記ソースは、area要素のIDを表示する画像のファイル名と同じものにして表示要素をjQueryで作る例です。
area要素のhrefは #ID名_img とします

<div id="imgmap">
<img src="tags.png" alt="Tags" width="400" height="151" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="33,45,101,83" href="#sea_img" alt="Sea" id="sea" />
<area shape="rect" coords="146,23,279,67" href="#beach_img" alt="Beach" id="beach" />
<area shape="rect" coords="94,100,205,136" href="#flower_img" alt="Flower" id="flower" />
<area shape="rect" coords="232,83,294,106" href="#cloud_img" alt="Cloud" id="cloud" />
<area shape="rect" coords="311,58,364,95" href="#sky_img" alt="Sky" id="sky" />
</map></div>

if($('#Map').is(':visible')){
	
	$('#Map area').each(function(i){
								 
	var myName = $(this).attr('href');
	var myAlt = $(this).attr('alt');
	var myID = $(this).attr('id');
	var myClass = $(this).attr("class");
	
	if(myClass)
		var mySRC = myClass;
	else 
		var mySRC = myID;
	
		$(this).mouseover(
			function(e){
			  var poY = e.pageY;
			  var poX = e.pageX;
			  var bodyX =$('body').width();
			  var bodyY =$('body').height();
			  
		var pict = $("<img></img>").attr({ 
			  "src": 'images/machine/'+mySRC+'.jpg',
			  "width":180,
			  "title": myAlt,
			  "alt": myAlt
			  
		});
		var datDIV = $("<div id='"+myID+"_img'></div>").html('<br />'+myAlt);
		
		datDIV.prepend(pict);
		datDIV.css({
			"border":"solid 1px #000",
			"background":"#fff",
			"font-size":"93%",
			"text-align":"center",
			"line-height":"1.5",
			"display":"none"
		});
		$('body').append(datDIV);

		var eHeight = $(myName).height();
		var eWidth = $(myName).width();
		
			  if((poY - eHeight)<0){
				  var Y = parseInt((poY-eHeight));
			  }else{
				  var Y = poY - eHeight - 15;
			  }
			 if((poX + eWidth) > bodyX){
				 var X =poX-eWidth;
			 }else{
				 var X = poX +15;
			 }
			
			datDIV.css({ "position":'absolute',"display":"block","left":X+"px","top":Y+"px"});
			
			});
		$(this).mouseout(
			function(){ 
			
				$(myName).remove();
		});
	
	});
}