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 >

你可能感兴趣的:(null,url,div,border)