<img src="images/1111.jpg" width="300" height="200" usemap="#map_sample" border="0" alt="sample">
<map name="map_sample">
<area shape="circle" coords="166,153,5" href="#" alt="円">
<area shape="circle" coords="200,75,5" href="#" alt="円">
<area shape="rect" coords="206,93,253,124" href="#" /><area shape="rect" coords="132,33,184,64" href="#" />
<area shape="rect" coords="125,85,186,135" href="#" />
</map>
<textarea rows=5 cols=10 id=tt1></textarea>
<script>
var x1=166,y1=153;//A
var x2=200,y2=75;//B
//var b=[[156,109],[173,154],[211,146],[217,120],[181,99]];
var mx=0,my=0;//move point step
var timer;
var f=1;
function move(){
if(x1+mx>f*x2){
clearInterval(timer);
return false;
}
mx++;//偏移量x
my=f*(y2-y1)*mx/(x2-x1);//偏移量y
document.getElementById("tt1").value=my
// 起点y + 相対偏移量x * 斜率 <=移動点y
if(f*Math.abs(b[0][1] + (x1+mx-b[0][0])*(b[0][1]-b[1][1])/(b[0][0]-b[1][0]))>=f*(y1+my)){
alert((mx+x1)+":"+(my+y1));
//return((mx+x1)+":"+(my+y1));
clearInterval(timer);
}
}
function yourFunctionName(mapId,pointA,pointB){
x1=pointA[0],y1=pointA[1];
x2=pointB[0],y2=pointB[1];
f=y1>=y2?1:-1;
var mapP=document.getElementsByName(mapId)[0].childNodes[2].getAttribute("coords").split(",");
b=[];
for(var i=0;i<mapP.length/2;i++)b[b.length]=new Array(parseInt(mapP[i*2]),parseInt(mapP[i*2+1]));
timer=setInterval(move,10);
}
yourFunctionName("map_sample",[136,153],[200,85]);
</script>上面写得有些JS.但是不行.
求个高手.帮写一个函数.
该函数有三个参数.
热点ID.A和B两点.
返回A到B点与这些热点矩形的第一次相交的坐标.
没有相交返回FALSE注:
1. map的热点数量不确定.上面是三个.只是举个例子.所以该函数要循环判断map的area 有多少个。
2. A和B点位置是有变化的。也有可能是从B点到A点。也就是A、B两点可以是任何值。上面那JS是shan1119这个高手写的。判断多边形的。
但始终不行。位置一变化就有问题。
现在改为了矩形。没有以前那么难了。请各位高手帮帮忙。
小弟JS正在学习中。实在写不出啊。
这个函数可以马上返回就好.
<map name="map_sample">
<area shape="circle" coords="166,153,5" href="#" alt="円">
<area shape="circle" coords="200,75,5" href="#" alt="円">
<area shape="rect" coords="50,50,150,100" href="#" background="#EEE"/>
<area shape="rect" coords="50,120,150,170" href="#" />
<area shape="rect" coords="200,100,250,150" href="#" />
<div style="position:absolute;width:1px;height:1px;left:176px;top:163px;border:solid 1px;black;size:1pt"></div>
<div style="position:absolute;width:1px;height:1px;left:210px;top:85px;border:solid 1px;black;"></div>
<div style="position:absolute;width:100px;height:50px;left:60px;top:65px;border:solid 1px;black;"></div>
<div style="position:absolute;width:100px;height:50px;left:60px;top:135px;border:solid 1px;black;"></div>
<div style="position:absolute;width:50px ;height:50px;left:210px;top:115px;border:solid 1px;black;"></div>
</map>
<textarea rows=10 cols=50 id=tt1></textarea>
<script>
yourFunctionName("map_sample",[50,100],[100,49]);
function yourFunctionName(mapId,pointA,pointB){
var x1=pointA[0],y1=pointA[1];//起点
var x2=pointB[0],y2=pointB[1];//終点
var maxx=Math.max(x1,x2),minx=Math.min(x1,x2);
var maxy=Math.max(y1,y2),miny=Math.min(y1,y2);
var f=y1>=y2?1:-1;
var b=[];
for(var i=2;i<document.getElementsByName(mapId)[0].childNodes.length;i++){
var obj=document.getElementsByName(mapId)[0].childNodes[i];
if(obj.tagName.toUpperCase()=="AREA"){
var mapP=obj.getAttribute("coords").split(",");//x1:0,y1:1,x2:2,y2:3
var my=(y2-y1)*mapP[0]/(x2-x1) + (y1*x2-y2*x1)/(x2-x1);
var mx=(x2-x1)*mapP[1]/(y2-y1) - (y1*x2-y2*x1)/(y2-y1);
if(my>=Math.min(mapP[1],mapP[3]) && my<=Math.max(mapP[1],mapP[3])
&& my>=miny && my<=maxy)b[b.length]=[mapP[0],my];
if(mx>=Math.min(mapP[0],mapP[2]) && mx<=Math.max(mapP[0],mapP[2])
&& mx>=minx && mx<=maxx)b[b.length]=[mx,mapP[1]];
my=(y2-y1)*mapP[2]/(x2-x1) + (y1*x2-y2*x1)/(x2-x1);
mx=(x2-x1)*mapP[3]/(y2-y1) - (y1*x2-y2*x1)/(y2-y1);
if(my>=Math.min(mapP[1],mapP[3]) && my<=Math.max(mapP[1],mapP[3])
&& my>=miny && my<=maxy)b[b.length]=[mapP[2],my];
if(mx>=Math.min(mapP[0],mapP[2]) && mx<=Math.max(mapP[0],mapP[2])
&& mx>=minx && mx<=maxx)b[b.length]=[mx,mapP[3]];
//alert(minx+","+maxx+","+miny+","+maxy);
}
}
if(b.length==0){alert(false);return false;}
var rtn=b[0];
for(var i=1;i<b.length;i++){
if(rtn[1]*f<b[i][1]*f)rtn=b[i];
}
document.getElementById("tt1").value="交差点："+b.join("\r\n")+"\r\n結果:"+rtn;
}
</script>
我以为你没时间写呢.
就结贴了.不好意思.