VML急问:怎样将包含一组的显示于图片之上?
为什么<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>
大家可将其拷贝运行之,先谢谢各位了。