js页面创建热点

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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;
function mychange(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;
}
function myclick(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="2px solid red";
mydiv.id="myrect";
document.getElementById("mydraw").appendChild(mydiv);
startx=e.clientX;
starty=e.clientY;
}
else
mychange(e);
start=!start;
}
function mymove(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 >