VML急问:怎样将包含一组显示于图片之上?

snoopydotnet 2005-08-12 02:11:05
为什么<v:line>可以显示于图片之上而将其放入<v:group>后就又跑到下面去了?

参考代码如下:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>动态创建VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>

<script language="JavaScript">
var clickX1 = -1;
var clickY1 = -1;
var clickX2 = -1;
var clickY2 = -1;
var theLastLine=null;
document.onclick=function (){
if(clickX1<0){
clickX1=event.x;
clickY1=event.y;
}
else{
createLine(clickX1,clickY1,event.x,event.y);
theLastLine=null;
clickX1=event.x;
clickY1=event.y;
}
}
document.ondblclick=function(){
document.body.click();
clickX1=-1;
clickY1=-1;
theLastLine=null;
return;
}
function createLine(x1,y1,x2,y2)
{
var strElement='<v:line style="Z-INDEX:2;POSITION:absolute;" from="'+x1+','+y1+'" to="'+x2+','+y2+'" strokecolor="blue" strokeweight="6px"></v:line>';
//alert(strElement);
var newline = document.createElement(strElement);
group1.insertBefore(newline);
theLastLine=newline;
}
document.onmousemove = function ()
{
if(clickX1 != -1){
if(theLastLine==null)
createLine(clickX1,clickY1,event.x,event.y);
else
theLastLine.to=event.x+","+event.y;
}
}
</script>

<body>

<v:group ID="group1" style="Z-INDEX:2;WIDTH:200px;HEIGHT:200px;" coordsize = "200,200">
//在图片下
</v:group>

<div id="theMap" style="position:absolute; overflow:hidden; left:0px; top:0px; width:797px; height:561px; z-index:1; visibility:visible;">
<img name="mapImage" id="mapImage" src="D:/IMS1.jpg" width=797 height=561 hspace=0 vspace=0 border=0 alt="">
<div>

<v:line style="Z-INDEX:2;LEFT:200;POSITION:absolute;TOP:200" to="0,150" strokecolor="red" strokeweight="10px"><v:Stroke dashstyle="shortdot" endarrow='classic'/></v:line> //在图片上

</body>
</html>

大家可将其拷贝运行之,先谢谢各位了。
...全文
214 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
snoopydotnet 2005-08-15
  • 打赏
  • 举报
回复
感谢楼上两位的回复,给group加上position:absolute;属性后折线已经出现在图片之上了。可是现在又出现一个小问题,就是绘制折线过程中的线段为何不能使用二级标记<v:stroke>?
也就是function createLine(x1,y1,x2,y2)中修改如下代码后似乎无效:
var strElement='<v:line style="Z-INDEX:2;POSITION:absolute;" from="'+x1+','+y1+'" to="'+x2+','+y2+'" strokecolor="blue" strokeweight="6px">"><v:stroke dashstyle="shortdot" endarrow=\'classic\'/></v:line>';
绘制的折线依然是蓝色的实线而不是带箭头的虚线。请问为何?
cxz7531 2005-08-13
  • 打赏
  • 举报
回复
给group加上 position:absolute;属性

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>动态创建VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>

<script language="JavaScript">
var clickX1 = -1;
var clickY1 = -1;
var clickX2 = -1;
var clickY2 = -1;
var theLastLine=null;
document.onclick=function (){
if(clickX1<0){
clickX1=event.x;
clickY1=event.y;
}
else{
createLine(clickX1,clickY1,event.x,event.y);
theLastLine=null;
clickX1=event.x;
clickY1=event.y;
}
}
document.ondblclick=function(){
document.body.click();
clickX1=-1;
clickY1=-1;
theLastLine=null;
return;
}
function createLine(x1,y1,x2,y2)
{
var strElement='<v:line style="Z-INDEX:2;POSITION:absolute;" from="'+x1+','+y1+'" to="'+x2+','+y2+'" strokecolor="blue" strokeweight="6px"></v:line>';
//alert(strElement);
var newline = document.createElement(strElement);
group1.insertBefore(newline);
theLastLine=newline;
}
document.onmousemove = function ()
{
if(clickX1 != -1){
if(theLastLine==null)
createLine(clickX1,clickY1,event.x,event.y);
else
theLastLine.to=event.x+","+event.y;
}
}
</script>

<body>

<v:group ID="group1" style="position:absolute;Z-INDEX:2;WIDTH:200px;HEIGHT:200px;" coordsize = "200,200">
//在图片下
<v:line style="Z-INDEX:2;LEFT:200;POSITION:absolute;TOP:200" to="0,150" strokecolor="red" strokeweight="10px"><v:Stroke dashstyle="shortdot" endarrow='classic'/></v:line> //在图片上
</v:group>

<div id="theMap" style="position:absolute; overflow:hidden; left:0px; top:0px; width:797px; height:561px; z-index:1; visibility:visible;">
<img name="mapImage" id="mapImage" src="a.gif" width=797 height=561 hspace=0 vspace=0 border=0 alt="">
<div>


</body>
</html>
rayFairy 2005-08-12
  • 打赏
  • 举报
回复
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>动态创建VML</title>

</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>

<script language="JavaScript">
var clickX1 = -1;
var clickY1 = -1;
var clickX2 = -1;
var clickY2 = -1;
var theLastLine=null;
document.onclick=function (){
if(clickX1<0){
clickX1=event.x;
clickY1=event.y;
}
else{
createLine(clickX1,clickY1,event.x,event.y);
theLastLine=null;
clickX1=event.x;
clickY1=event.y;
}
}
document.ondblclick=function(){
document.body.click();
clickX1=-1;
clickY1=-1;
theLastLine=null;
return;
}
function createLine(x1,y1,x2,y2)
{
var strElement='<v:line style="Z-INDEX:2;POSITION:absolute;" from="'+x1+','+y1+'" to="'+x2+','+y2+'" strokecolor="blue" strokeweight="6px"></v:line>';
//alert(strElement);
var newline = document.createElement(strElement);
group1.insertBefore(newline);
theLastLine=newline;
}
document.onmousemove = function ()
{
if(clickX1 != -1){
if(theLastLine==null)
createLine(clickX1,clickY1,event.x,event.y);
else
theLastLine.to=event.x+","+event.y;
}
}
</script>

<body>



<div id="theMap" style="position:absolute; overflow:hidden; left:0px; top:0px; width:797px; height:561px; z-index:1; visibility:visible;">
<img name="mapImage" id="mapImage" src="26_183606.gif" width=797 height=561 hspace=0 vspace=0 border=0 alt="">
<div>

<v:line style="Z-INDEX:2;LEFT:200;POSITION:absolute;TOP:200" to="0,150" strokecolor="red" strokeweight="10px"><v:Stroke dashstyle="shortdot" endarrow='classic'/></v:line>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:3; left: 88px; top: 57px;"><v:group ID="group1" style="Z-INDEX:10;WIDTH:200px;HEIGHT:200px;" coordsize = "200,200">
//在图片下
</v:group></div> //在图片上

</body>
</html>

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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