图片标记的缩放问题

theoffsetX=(document.body.scrollLeft+event.clientX)/img1.offsetWidth;
theoffsetY=(document.body.scrollTop+event.clientY)/img1.offsetHeight;
MouseAddImg.innerHTML+="<div id=Layer"+ImgID+" style=\"position:absolute; left:expression(img1.offsetWidth*"+theoffsetX+"); top:expression(img1.offsetHeight*"+theoffsetY+"); width:3px; height:3px; z-index:100; border: 1px solid #FF0000; visibility: visible; cursor:crosshair; font-size: 1pt; background-color: #FF0000;\" ></div>";

解决方案 »

  1.   

    <html>
    <body bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
    <script language="JavaScript">
    ImgID=0;
    function drawboxdown(thelayer){
           theoffsetX=document.body.scrollLeft+event.clientX;
           theoffsetY=document.body.scrollTop+event.clientY;
           MouseAddImg.innerHTML+="<div id=Layer"+ImgID+" style=\"position:absolute; left:"+theoffsetX+"px; top:"+theoffsetY+"px; width:3px; height:3px; z-index:100; border: 1px solid #FF0000; visibility: visible; cursor:crosshair; font-size: 1pt; background-color: #FF0000;\" ></div>";
           ImgID++;
    }
    function zoomin(){
           img1.style.width=(img1.clientWidth)*2;
           img1.style.height=(img1.clientHeight)*2;
           for(i=0;i<ImgID;i++){
              nowleft=eval("Layer"+i+".style.left");
              nowleft=nowleft.substring(0,nowleft.length-2)-50;  //50是Layer000的left
              eval("Layer"+i+".style.left=50+nowleft*2");
           }
           for(i=0;i<ImgID;i++){
              nowtop=eval("Layer"+i+".style.top");
              nowtop=nowtop.substring(0,nowtop.length-2)-50;  //50是Layer000的top
              eval("Layer"+i+".style.top=50+nowtop*2");
           }
    }
    function zoomout(){
           img1.style.width=(img1.clientWidth)*1/2;
           img1.style.height=(img1.clientHeight)*1/2;
           for(i=0;i<ImgID;i++){
              nowleft=eval("Layer"+i+".style.left");
              nowleft=nowleft.substring(0,nowleft.length-2)-50;
              eval("Layer"+i+".style.left=50+nowleft/2");
           }
           for(i=0;i<ImgID;i++){
              nowtop=eval("Layer"+i+".style.top");
              nowtop=nowtop.substring(0,nowtop.length-2)-50;
              eval("Layer"+i+".style.top=50+nowtop/2");
           }
    }
    </script>
    <span id=MouseAddImg> </span> 
    <div id="Layer000" style="position:absolute; width:200px; height:115px; z-index:1; overflow: visible; top: 50; left: 50;">
      <img border="1" id="img1" src="http://expert.csdn.net/images/csdn.gif" style="cursor:crosshair; width:300; height:200" onclick="drawboxdown('')">
      <input type="button" name="cmdAdd1" value="放大1倍" onClick="zoomin()">
      <input type="button" name="cmdAdd1" value="缩小1倍" onClick="zoomout()">
    </div>
    </body></html>