画像の特定の領域を通過してからマウスイベントを起動しますが、どうやって実現しますか?

友達が私に質問しました.彼はこのようなページを設計しました.写真には一部の文字があります.マウスが該当する文字に移動した時にテキストボックスをポップアップして、これらの文字に対応するモジュールの内容を表示します.
    これは簡単ではないと思います.写真にはonmouseover事件があります.イベントでjsを書いたら大丈夫ですか?しかし、ことはそんなに簡単ではありません.彼は大きな写真です.写真の中には多くの領域があります.一定のエリアに移動した時にのみテキストボックスをイジェクトすることができます.インターネットで調べましたが、既成の方法がありません.もし写真の位置が変わらないなら、マウスの位置を得ることによって、絵の文字の位置を確定し、マウスの移動時に座標が文字の範囲内に落ちているかどうかを判断し、イベントをトリガします.しかし、マウスの位置を得るのは簡単です.絵の文字の位置は?
    そこで友達は文字の部分を小さい画像にカットしました.次のように整理していません.後で時間があります.
マウスの現在の座標を得るJS

var mouseX;//     
var mouseY;//     

//      ，  DIV   
function mouseMove(ev)
{
 ev= ev || window.event;
  var mousePos = mouseCoords(ev);
  mouseX = mousePos.x;
  mouseY = mousePos.y;
}

function mouseCoords(ev)
{
 if(ev.pageX || ev.pageY){
   return {x:ev.pageX, y:ev.pageY};
 }
 return {
     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
     y:ev.clientY + document.body.scrollTop  - document.body.clientTop
 };
}
//      ，      
document.onmousemove = mouseMove;

DIVのマウスイベントの表示と非表示を制御します.

//     ID        DIV
function mouseover(id){
    //  ID XML           
	var message=getMessageByFile(id);
	document.getElementById(id).innerHTML=message.content;
	var newsdiv=document.getElementById(id);
	newsdiv.style.visibility = 'visible';
         // DIV       20 10 
	newsdiv.style.left =  document.body.scrollLeft+mouseX+20;
	newsdiv.style.top = document.body.scrollTop+mouseY+10;

}
//     ID        DIV
function mouseout(id){
	document.getElementById(id).innerHTML="";
	var div=document.getElementById(id);
	div.style.visibility = 'hidden';

}

IDに基づいてXMLファイルから内容、及び情報オブジェクトのJSを読み込む.

function getMessageByFile(thismessageid){
	var xml = new ActiveXObject("Microsoft.XMLDOM") ;
	xml.async="false";
	xml.load("message.xml");
	
	var mode="model";

	var maxNum=xml.getElementsByTagName(mode).length;

	var messageid="";
	var content="";
	var messageInfo = xml.getElementsByTagName(mode)[0];
	for(var i=0;i<maxNum;i++){
		if(messageInfo.getElementsByTagName("messageid")[i].firstChild){
			if(thismessageid==messageInfo.getElementsByTagName("messageid")[i].firstChild.nodeValue){
				messageid=messageInfo.getElementsByTagName("messageid")[i].firstChild.nodeValue;
				if(messageInfo.getElementsByTagName("content")[i].firstChild){
					content=messageInfo.getElementsByTagName("content")[i].firstChild.nodeValue;
				}
			}
		}
	}
	var message= new Message();
	message.messageid = messageid;
	message.content = content;
	return message;

}
//Message  ，      
function Message(){
    this.messageid = "";
    this.content = "";
}

XMLファイル

<?xml version="1.0" encoding="GB2312"?>
<message>
	<model>
		<messageid>test</messageid>
		<content>test</content>
	</model>
</message>

ページの部分コード

<div>
  <img src="test.jpg" onmouseover="mouseover('test')" onmouseout="mouseout('test')"/>
  </div>
  <div id="test" style="position:absolute; width:236px; height:78px; z-index:1;visibility:hidden">
	
  </div>

まだXMLを生成するページが足りないようですが、とりあえずこれらにしましょう.キーはマウスが一枚の画像の一部の領域に移動した時に触発されたのではなく、もう一度考えなければなりません.