经过图片特定区域后才触发鼠标事件如何实现？

   朋友问我一个问题，他设计了这样一个页面，一张图片上有些文字，然后当鼠标移到相应的文字时弹出文本框显示这些文字所对应的模块的内容。
    心想这还不简单，图片有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的页面，暂时就先这些吧，关键它并不是在鼠标移动到一张图片的某些区域时才触发，还得再想想。

评论

1 楼 bbsunchen 2010-08-16  

很简单的实现方法，可以用map
http://www.w3school.com.cn/tiy/t.asp?f=jseg_imagemap