利用JS+VML画任意多边形的问题

cql0007 2007-08-11 11:34:14

现在有个需求,一个WEB界面上有N个任意形状的多边形,但开始不显示,现在需要做一个功能,鼠标移到任何一个多边形的区域的时候,就画出那个多边形出来,鼠标移走的时候就隐藏掉.

我现在用usemap="#Map" ,再用JS+VML做了大概的样子,但是这种方式实现起来有问题,请各位高手帮我看看

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>背景示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>

<script>
function mk_div1(){
var v = document.createElement("v:shape");
v.id = "shp_vml";
v.style.zIndex = 50;
v.style.width = 1;
v.style.height = 1;
v.style.top = "0px";
v.style.left = "0px";
v.style.position = "absolute";
v.coordsize = "1,1";
v.filled = "t";
v.fillcolor="#ffff00";
v.strokecolor="blur";
v.path="m 28,385 l 532,463,190,223,596,49,113,28,28,385 e";

//alert(document.getElementByID("shp_vml"));
document.body.appendChild(v);
//alert(shp_vml);

}
function hide_div1(){
/*
if(shp_vml){
document.body.removeChild(shp_vml);
}else{
v = document.getElementByID("shp_vml");
//v.style.display = "none";
document.body.removeChild(v);
}
*/
//if(!document.getElementByID("shp_vml")){
// document.body.removeChild(shp_vml);
//}
if(shp_vml){
document.body.removeChild(shp_vml);
}
}

</script>
</head>

<body>

<div><img src="Image/guide.gif" width="710" height="528" border="1" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="28,385,532,463,190,223,596,49,113,28" onMouseOver="mk_div1()" onMouseOut="hide_div1()" alt="javascript:alert('hello')" />

</map>
</div>



<v:line style="z-index:5;position:absolute;left:200;top:200" to="0,150" strokecolor="red" strokeweight="10px">
<v:Stroke dashstyle="shortdot" endarrow='classic'/>
</v:line>

</body>
</html>

用IMG的useMap,这个区域的定义不准,鼠标还没正直移动该区域的时候就显示该区域,鼠标完全移动该区域的时候又会触发onMouseOut事件.这个时候整个事件就乱了.

是不是用useMap这种方式实现这种功能有问题?那请问有别的更好的实现方式吗?

...全文

773 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

huo789 2007-08-16

打赏
举报

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>背景示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>

<script>
function addShape() {
var v = document.createElement("v:shape");
v.id = "shp_vml";
v.style.zIndex = 50;
v.style.width = 1;
v.style.height = 1;
v.style.top = "0px";
v.style.left = "0px";
v.style.position = "absolute";
v.coordsize = "1,1";
v.filled = "t";
v.fillcolor="#ffff00";
v.strokecolor="blur";
v.path="m 28,385 l 532,463,190,223,596,49,113,28,28,385 e";

//alert(document.getElementByID("shp_vml"));
document.body.appendChild(v);
}
function mk_div1(){

//alert(shp_vml);
var obj = document.getElementById("shp_vml");
if(obj){
obj.style.display = 'block';
}

}
function hide_div1(){
/*
if(shp_vml){
document.body.removeChild(shp_vml);
}else{
v = document.getElementByID("shp_vml");
//v.style.display = "none";
document.body.removeChild(v);
}
*/
//if(!document.getElementByID("shp_vml")){
//document.body.removeChild(shp_vml);
//}
var obj = document.getElementById("shp_vml");
if(obj){
obj.style.display = 'none';
}
}

</script>
</head>

<body onload="addShape()">

<div><img src="Image/guide.gif" width="710" height="528" border="1" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="28,385,532,463,190,223,596,49,113,28" onMouseOver="mk_div1()" onMouseOut="hide_div1()" alt="javascript:alert('hello')" />

</map>
</div>



<v:line style="z-index:5;position:absolute;left:200;top:200" to="0,150" strokecolor="red" strokeweight="10px">
<v:Stroke dashstyle="shortdot" endarrow='classic'/>
</v:line>

</body>
</html>

APM60- 2007-08-16

打赏
举报

是这个意思吗？

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>背景示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:shape style="z-index:50;width:1;height:1;position:absolute;filter='alpha(style=1,opacity=0)'" onmouseover="this.style.filter=''" onmouseout="this.style.filter='alpha(style=1,opacity=0)'" coordsize="1,1" filled="t" fillcolor="#ffffff" strokecolor="blue" path="m 28,385 l 532,463,596,49,113,28,28,385 e">
<v:fill angle=150 type='gradient' color2="669900"/>
</v:shape>
</body>
</html>

hbhbhbhbhb1021 2007-08-16