js页面创建热点

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html;charset=utf-8" />
< title > 热点1 </ title >
< SCRIPT LANGUAGE ="JavaScript" defer ="true" > ...
start=true;
startx=0;
starty=0;
functionmychange(e)
...{
if(!e)e=event;
mydiv=document.getElementById("myrect");
if(e.clientX-startx<0)
...{
myleft=e.clientX;
mywidth=startx-e.clientX;
//坐标
document.test.x1.value=myleft;
document.test.x2.value=startx;
}
else
...{
myleft=startx;
mywidth=e.clientX-startx;
//坐标
document.test.x1.value=myleft;
document.test.x2.value=e.clientX;
}
if(e.clientY-starty<0)
...{
mytop=e.clientY;
myheight=starty-e.clientY;
//坐标
document.test.y1.value=mytop;
document.test.y2.value=starty;
}
else
...{
mytop=starty;
myheight=e.clientY-starty;
//坐标
document.test.y1.value=mytop;
document.test.y2.value=e.clientY;
}
mydiv.style.left=myleft;
mydiv.style.top=mytop;
mydiv.style.width=mywidth;
if(!(document.all&&(myheight==0)))
mydiv.style.height=myheight;
}
functionmyclick(e)
...{
if(!e)e=event;
if(start)
...{
document.getElementById("mydraw").innerHTML="";
mydiv=document.createElement("div");
mydiv.style.position="absolute";
mydiv.style.overflow="hidden";
mydiv.style.height=1;
mydiv.style.border="2pxsolidred";
mydiv.id="myrect";
document.getElementById("mydraw").appendChild(mydiv);
startx=e.clientX;
starty=e.clientY;
}
else
mychange(e);
start=!start;
}
functionmymove(e)
...{
if(start)return;
if(document.getElementById("myrect")==null)return;
mychange(e);
}
document.ondblclick=myclick;
document.onmousemove=mymove;
</ SCRIPT >
</ head >

< body >
双击鼠标左键可以开始画图，双击鼠标左键后结束画图。
< table width ="770" border ="0" cellpadding ="0" cellspacing ="0" >
< tr >
< td width ="768" height ="609" >
< table width ="100%" border ="0" cellspacing ="0" cellpadding ="0" >
< tr >< div id ="mydraw" >
< td height ="2" >
< IMG src ="meinv.jpg" width ="540" height ="515" usemap ="#Map" >
</ td >
</ div >
</ tr >
</ table >
</ td >
</ tr >
</ table >
< map name ="Map" id ="Map" >
< area shape ="rect" coords ="{$x1},{$y1},{$x2},{$y2}" href ="{$url}" />
</ map >
< FORM NAME ="test" action ="#" method ="post" >
url: < INPUT type ="text" NAME ="url" ID ="url" >
< INPUT type ="hidden" NAME ="x1" ID ="x1" >
< INPUT type ="hidden" NAME ="y1" ID ="y1" >
< INPUT type ="hidden" NAME ="x2" ID ="x2" >
< INPUT type ="hidden" NAME ="y2" ID ="y2" >
< input type ="submit" name ="submit" >
</ FORM >
</ body >
</ html >