高手请留步,VML画线如何在正确的显示在图片上?

likai22 2008-01-08 02:55:57
画一个直线,在图片为background的情况可以正常显示,但如果为img标签画的线就显示到外面去了,代码如下,高手请帮忙,在线等~~~
<SCRIPT LANGUAGE="JavaScript">
var linex,liney,a,b,flag;
flag=0;
function SelfXY(){
var yScrolltop;
var xScrollleft;
yScrolltop = event.clientY;
xScrollleft= event.clientX;
var top = document.body.scrollTop;
var left = document.body.scrollLeft;
//alert("top "+yScrolltop+"left "+xScrollleft);

var y = parseInt(top)+parseInt(yScrolltop);
var x = parseInt(left)+parseInt(xScrollleft);
var arr = new Array();
arr[0] = x;
arr[1] = y;
//alert("x="+arr[0]+"y="+arr[1]);
return arr;
//alert(xScrollleft+y+" "+yScrolltop+x+" ");


}
function drawline(fromX,fromY,toX,toY){
var strElement= "<v:Line id='line_"+fromX+"_"+fromY+"_"+toX+"_"+toY+"' from='" + fromX + "," + fromY + "' to='" + toX + "," + toY + "' strokecolor='red'></v:Line>";
var newPoint = document.createElement(strElement);
document.getElementById("map").appendChild(newPoint);
}

function draw(){
var x1 = SelfXY();
if(flag==0){
//alert(x1[0]+" "+x1[1]);
linex=x1[0];liney=x1[1];
flag=1;
}else{
if(linex==undefined&&b==undefined){linex=x1[0];liney=x1[1];return false;}
a=x1[0];b=x1[1];
drawline(linex,liney,a,b)
//x=a;y=b;
flag=0;
alert("X="+linex+",Y="+liney+",A="+a+",B="+b);
}
}

function draws(){
var x1 = SelfXY();
if(flag==1){
if(linex==undefined&&b==undefined){return false;}
if(linex==x1[0]&&b==x1[1]){return false;}
if(document.getElementById("TempLine")){document.getElementById("TempLine").outerHTML=""}
var strElement= "<v:Line id='TempLine' from='" + linex + "," + liney + "' to='" + x1[0] + "," + x1[1] + "' strokecolor='red'></v:Line>";
var newPoint = document.createElement(strElement);
document.getElementById("map").appendChild(newPoint);

}else{

}
}


</SCRIPT>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<META http-equiv="Content-Type" content="text/html;Charset=gb2312">
<STYLE>
v\:*{behavior:url(#default#VML);}
</STYLE>
</HEAD>
<BODY>
<img src="c:\Blue hills.jpg"/>
<div id="map" style="width:1024px;height:768px;" onmousedown="draw();" onmousemove="draws()"></div>
</body>
</html>
...全文
107 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧