２００分解决有难度的图片缩放、拖动问题，看帖会有收获的

这个程序主要分三部分：层的拖放、层的缩放、图片切割（包括预览）。
其中层的拖放是很常见的效果，层的缩放有点难度，图片切割看着炫其实原理也很简单。
不过在实现的过程中也学习到很多以前不知道的东西，下面都会说明，希望大家从中也能学到东西。
原理：【拖放程序】基本原理很简单，不知道的看代码就明白，其中参考了越兔和BlueDestiny的相关文章。下面说一下比较有用的地方：【范围限制】首先当然是有拖放范围参数，分别是mxLeft（左边的left最小值）、mxRight（右边的left最大值）、mxTop（上边的top最小值）、mxBottom（下边的top最大值）。
然后在拖动程序Move()中看有没有超过，超过的话设回极限值就行： if(this.Limit){
//获取超出长度
var iRight = iLeft + this._obj.offsetWidth - this.mxRight, iBottom = iTop + this._obj.offsetHeight - this.mxBottom;
//这里是先设置右边下边再设置左边上边,可能会不准确
if(iRight > 0) iLeft -= iRight;
if(iBottom > 0) iTop -= iBottom;
if(this.mxLeft > iLeft) iLeft = this.mxLeft;
if(this.mxTop > iTop) iTop = this.mxTop;
} 【释放选择】
我以前就用的方法是设置ie的onselectstart和ff的MozUserSelect，
但BlueDestiny说“用user-select会相当于event.preventDefault。阻止默认动作就会在某些操作的时候导致mouseup丢失。”，
最好的方法是ie用document.selection.empty()，ff用window.getSelection().removeAllRanges()。
所以可以在Move()中加入：window.getSelection && window.getSelection().removeAllRanges();这种写法是从越兔的程序中学到的。
因为ie的鼠标捕获默认（下面会说）带这个，所以ie就不用了。
【鼠标捕获】以前不知道js有这个东西，使用很简单：
设置捕获：this.Drag.setCapture()；
取消捕获：this.Drag.releaseCapture()。
它的作用是：将鼠标捕获设置到指定的对象。这个对象会为当前应用程序或整个系统接收所有鼠标输入。
还不明白的话，试试拖放的时候把鼠标拖放到浏览器外面，会发现拖动还在继续，
如果没有这个鼠标捕获就会失效了。
但在浏览器外是触发不了mouseup的，不过还可以用losecapture事件代替：addEventHandler(this.Drag, "losecapture", this._fS);
this.Drag.setCapture();
程序中给ff的window添加blur时停止的事件，越兔说是为了可以检测到alt+tab造成的mouseup丢失，完美一点，也加上去了。这样一个拖放程序就完成了。

如果还是不行请看看这篇实类：
http://www.cmstong.com/edu/show/129.shtml

我这样做过div拖动，不过效果不是太好(还是技术不高)，给热点增加 onmousedown="down()" onmouseup="up()" onmousemove="move()"var b = false;
function down(){
b = true;
}
function up(){
b = false;
}
function move(){
if(!b)return false;
/*
热点移动操作
*/
}

1、拖动：
  1）mousedown的时候记录鼠标的坐标x1,y1(当然要考虑兼容)；
  2）鼠标放开的时候，取鼠标的坐标x2,y2(当然要考虑兼容)；
  3)求差dx=x1-x2,dy=y1-y2；
  4)获取area元素的coords属性，得到coords="173,66,152,85,126"，split为数组；
  5）循环数组，奇数循环下修正coords的y坐标值arr[i]+=dy;偶数循环下修正coords的x坐标值arr[i]+=dx;
  6)展开为字串coords=arr.join(',')
  7)将area元素的coords属性更新:setAttribute("coords")=coords;2、缩放：这个难搞了。初步想法：
  1）缩放前，找出原热点coords中的最小x,最小y值和最大x,最大y值；以此做left,top,width,height创建矩形,并计算出坐标中心点；
  2)以该中心点为依据标准，按照缩放比例，计算coords，并更新；（方法和上面有点类似；）3、其他不多说了，你懂的。我才不做苦力呢，哈哈。

热点区域用dreamwear 画比较方便

接代码，FF4/IE6通过
(我偷懒了，拖拽代码没封装...)<!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=gb2312" />
<meta http-equiv="imagetoolbar" content="no">
<title>热区图片拖拽</title>
<script src="http://www.aitisoft.cn/qy/map.js" type="text/javascript"></script><script type="text/javascript">
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
var bDrag=false, mouseOffset=null;function getMouseOffset(o,e){
  var _oPos=getPosition(o), _mPos=mouseCoords(e);
  return {x:_mPos.x-_oPos.x,y:_mPos.y-_oPos.y};
}function getPosition(o){
  var left=0, top=0;
  while(o.offsetParent){
    left+=o.offsetLeft+(o.currentStyle?(o.currentStyle.borderLeftWidth*1).NaN0():0);
    top +=o.offsetTop +(o.currentStyle?(o.currentStyle.borderTopWidth*1).NaN0():0);
    o=o.offsetParent;
  }
  left+=o.offsetLeft+(o.currentStyle?(o.currentStyle.borderLeftWidth*1).NaN0():0);
  top+=o.offsetTop+(o.currentStyle?(o.currentStyle.borderTopWidth*1).NaN0():0);
  return {x:left,y:top};
}

function mouseCoords(e){
  if(e.pageX||e.pageY){  return {x:e.pageX,y:e.pageY};  }
  return {x:e.clientX+document.body.scrollLeft-document.body.clientLeft,y:e.clientY+document.body.scrollTop-document.body.clientTop};
}onload=function(){
  var oDrag=document.getElementById('aaa');  if(!oDrag) return;
  oDrag.onmousedown=function(e){
    bDrag=true;
   e=e||window.event;
    mouseOffset=getMouseOffset(this,e);    return false;
  }

  oDrag.onmousemove=function(e){
    if(!bDrag)return;
    e=e||window.event;
    var _mPos = mouseCoords(e);
    oDrag.style.left=(_mPos.x - mouseOffset.x)+'px';
    oDrag.style.top= (_mPos.y - mouseOffset.y)+'px';
    return false;
  }

  oDrag.onmouseup=function(){ bDrag = false;   mouseOffset=null;}

  var arm_img=document.getElementById('ff')
  cvi_map.add(arm_img,{areacolor: '#FFFF00',  bordercolor: '#60F',nofade:'true' });
  canvahtml=document.getElementById("ff_canvas").innerHTML;

}
</script>
</head>
<body>
  <div id=aaa style="_position:absolute;">
    <img id="ff" src="http://img.hexun.com/2008-09-18/108979084.jpg" width="400" height="277" border="0" usemap="#parliament" />
    <map name="parliament" id="parliament">
      <area shape="poly" coords="173,66,152,85,126,118,108,155,97,168,81,166,68,167,50,164,42,170,26,169,6,171,2,174,3,178,18,178,13,186,7,185,4,193,8,196,14,200,18,206,22,216,19,218,45,210,70,211,71,216,72,230,66,237,82,224,92,225,115,230,130,233,144,237,154,238,174,242,186,246,198,254,225,263,240,268,260,269,301,266,297,251,243,236,228,226,206,224,194,215,180,206,162,196,141,185,121,175" href="javascript:alert('你点了热区')" />
    </map>
  </div>
</body>
</html>

缩放也是一个道理，你只要把图片和热区用一个DIV容器装起来，操作这个容器就不会和你的map.js冲突了

哦，忘记说了，你那个map.js有小问题：IE6下页面加载后热区就高亮了,需要改改

研究中，DIV缩放图片能跟着缩放？

兼容缩放的代码：
<!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=gb2312" />
<meta http-equiv="imagetoolbar" content="no">
<title>图片拖拽</title>
<script src="http://www.aitisoft.cn/qy/map.js" type="text/javascript"></script>
<script type="text/javascript">
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
var bDrag=false, mouseOffset=null;function getMouseOffset(o,e){
  var _oPos=getPosition(o), _mPos=mouseCoords(e);
  return {x:_mPos.x-_oPos.x,y:_mPos.y-_oPos.y};
}function getPosition(o){
  var left=0, top=0;
  while(o.offsetParent){
    left+=o.offsetLeft+(o.currentStyle?(o.currentStyle.borderLeftWidth*1).NaN0():0);
    top +=o.offsetTop +(o.currentStyle?(o.currentStyle.borderTopWidth*1).NaN0():0);
    o=o.offsetParent;
  }
  left+=o.offsetLeft+(o.currentStyle?(o.currentStyle.borderLeftWidth*1).NaN0():0);
  top+=o.offsetTop+(o.currentStyle?(o.currentStyle.borderTopWidth*1).NaN0():0);
  return {x:left,y:top};
}

function mouseCoords(e){
  if(e.pageX||e.pageY){  return {x:e.pageX,y:e.pageY};  }
  return {x:e.clientX+document.body.scrollLeft-document.body.clientLeft,y:e.clientY+document.body.scrollTop-document.body.clientTop};
}onload=function(){
  var oDrag=document.getElementById('aaa');  if(!oDrag) return;
  oDrag.onmousedown=function(e){
    bDrag=true;
   e=e||window.event;
    mouseOffset=getMouseOffset(this,e);    return false;
  }

  oDrag.onmousemove=function(e){
  if(!bDrag)return;
    e=e||window.event;
    var _mPos = mouseCoords(e);
    oDrag.style.left=(_mPos.x - mouseOffset.x)+'px';
    oDrag.style.top= (_mPos.y - mouseOffset.y)+'px';
    return false;
  }

  oDrag.onmouseup=function(){ bDrag = false;   mouseOffset=null;}
  var arm_img=document.getElementById('ff')
  cvi_map.add(arm_img,{areacolor: '#FFFF00',  bordercolor: '#60F',nofade:'true' });
  canvahtml=document.getElementById("ff_canvas").innerHTML;

}
/***************************缩放测试**************************************/
//已经成功缩放。美中不足是热点不对了。这个你自己搞搞吧
function aa(){
  var o=document.getElementById('ff')
  cvi_map.remove(o);
  o.style.width=200+'px';o.style.height=200+'px';
  cvi_map.modify(o,{areacolor: '#FFFF00',  bordercolor: '#60F',nofade:'true' });
}
</script>
</head>
<body>
  <div id=aaa style="_position:absolute;">
    
    <img id="ff" src="http://img.hexun.com/2008-09-18/108979084.jpg" width="400" height="277" border="0" usemap="#parliament" />
    <map name="parliament" id="parliament">
      <area shape="poly" coords="173,66,152,85,126,118,108,155,97,168,81,166,68,167,50,164,42,170,26,169,6,171,2,174,3,178,18,178,13,186,7,185,4,193,8,196,14,200,18,206,22,216,19,218,45,210,70,211,71,216,72,230,66,237,82,224,92,225,115,230,130,233,144,237,154,238,174,242,186,246,198,254,225,263,240,268,260,269,301,266,297,251,243,236,228,226,206,224,194,215,180,206,162,196,141,185,121,175" href="javascript:alert('你点了热区')" />
    </map>
  </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <input type=button onclick='aa()' value='测试缩放' />

</body>
</html>

缩放后热点也调整好的代码，就是高亮没出现
<!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=gb2312" />
<meta http-equiv="imagetoolbar" content="no">
<title>热区图片拖拽</title>
<script src="http://www.aitisoft.cn/qy/map.js" type="text/javascript"></script>
<script type="text/javascript">
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
var bDrag=false, mouseOffset=null;function getMouseOffset(o,e){
  var _oPos=getPosition(o), _mPos=mouseCoords(e);
  return {x:_mPos.x-_oPos.x,y:_mPos.y-_oPos.y};
}function getPosition(o){
  var left=0, top=0;
  while(o.offsetParent){
    left+=o.offsetLeft+(o.currentStyle?(o.currentStyle.borderLeftWidth*1).NaN0():0);
    top +=o.offsetTop +(o.currentStyle?(o.currentStyle.borderTopWidth*1).NaN0():0);
    o=o.offsetParent;
  }
  left+=o.offsetLeft+(o.currentStyle?(o.currentStyle.borderLeftWidth*1).NaN0():0);
  top+=o.offsetTop+(o.currentStyle?(o.currentStyle.borderTopWidth*1).NaN0():0);
  return {x:left,y:top};
}

function mouseCoords(e){
  if(e.pageX||e.pageY){  return {x:e.pageX,y:e.pageY};  }
  return {x:e.clientX+document.body.scrollLeft-document.body.clientLeft,y:e.clientY+document.body.scrollTop-document.body.clientTop};
}onload=function(){
  var oDrag=document.getElementById('aaa');  if(!oDrag) return;
  oDrag.onmousedown=function(e){
    bDrag=true;
   e=e||window.event;
    mouseOffset=getMouseOffset(this,e);    return false;
  }

  oDrag.onmousemove=function(e){
  if(!bDrag)return;
    e=e||window.event;
    var _mPos = mouseCoords(e);
    oDrag.style.left=(_mPos.x - mouseOffset.x)+'px';
    oDrag.style.top= (_mPos.y - mouseOffset.y)+'px';
    return false;
  }

  oDrag.onmouseup=function(){ bDrag = false;   mouseOffset=null;}
  var arm_img=document.getElementById('ff')
  cvi_map.add(arm_img,{areacolor: '#FFFF00',  bordercolor: '#60F',nofade:'true' });
  canvahtml=document.getElementById("ff_canvas").innerHTML;

}
/***************************缩放测试**************************************/
//已经成功缩放并且热点也调整好了。剩下的是热点高亮没出来，这个你自己搞搞吧
function aa(){
var o=document.getElementById('ff')
cvi_map.remove(o);
var W1=o.offsetWidth,H1=o.offsetHeight;
o.style.width=200+'px';o.style.height=200+'px';
var W2=o.offsetWidth,H2=o.offsetHeight;
var rW=W2/W1, rH=H2/H1;
var coords=document.getElementsByTagName('area')[0].getAttribute('coords');
var a=coords.split(',');
for(var i=0;i<a.length;i++){
a[i]=i%2==0?parseInt(a[i]*rW):parseInt(a[i]*rH);
}
document.getElementsByTagName('area')[0].setAttribute('coords',a.join(','))
cvi_map.modify(o,{areacolor: '#FFFF00',  bordercolor: '#60F',nofade:'true' });
}
</script>
</head>
<body>
  <div id=aaa style="_position:absolute;">
    <img id="ff" src="http://img.hexun.com/2008-09-18/108979084.jpg" width="400" height="277" border="0" usemap="#parliament" />
    <map name="parliament" id="parliament">
      <area shape="poly" coords="173,66,152,85,126,118,108,155,97,168,81,166,68,167,50,164,42,170,26,169,6,171,2,174,3,178,18,178,13,186,7,185,4,193,8,196,14,200,18,206,22,216,19,218,45,210,70,211,71,216,72,230,66,237,82,224,92,225,115,230,130,233,144,237,154,238,174,242,186,246,198,254,225,263,240,268,260,269,301,266,297,251,243,236,228,226,206,224,194,215,180,206,162,196,141,185,121,175" href="javascript:alert('你点了热区')" />
    </map>
  </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <input type=button onclick='aa()' value='测试缩放' />

</body>
</html>

搞定。FF4下完美；IE6下有小问题（那是map.js自身的问题，我懒得找了）
html
<!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=gb2312" />
<meta http-equiv="imagetoolbar" content="no">
<title>热区图片拖拽</title>
<script src="map.js" type="text/javascript"></script>
<script type="text/javascript">
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
var bDrag=false, mouseOffset=null;function getMouseOffset(o,e){
  var _oPos=getPosition(o), _mPos=mouseCoords(e);
  return {x:_mPos.x-_oPos.x,y:_mPos.y-_oPos.y};
}function getPosition(o){
  var left=0, top=0;
  while(o.offsetParent){
    left+=o.offsetLeft+(o.currentStyle?(o.currentStyle.borderLeftWidth*1).NaN0():0);
    top +=o.offsetTop +(o.currentStyle?(o.currentStyle.borderTopWidth*1).NaN0():0);
    o=o.offsetParent;
  }
  left+=o.offsetLeft+(o.currentStyle?(o.currentStyle.borderLeftWidth*1).NaN0():0);
  top+=o.offsetTop+(o.currentStyle?(o.currentStyle.borderTopWidth*1).NaN0():0);
  return {x:left,y:top};
}

function mouseCoords(e){
  if(e.pageX||e.pageY){  return {x:e.pageX,y:e.pageY};  }
  return {x:e.clientX+document.body.scrollLeft-document.body.clientLeft,y:e.clientY+document.body.scrollTop-document.body.clientTop};
}onload=function(){
  var oDrag=document.getElementById('aaa');  if(!oDrag) return;
  oDrag.onmousedown=function(e){
    bDrag=true;
   e=e||window.event;
    mouseOffset=getMouseOffset(this,e);    return false;
  }

  oDrag.onmousemove=function(e){
  if(!bDrag)return;
    e=e||window.event;
    var _mPos = mouseCoords(e);
    oDrag.style.left=(_mPos.x - mouseOffset.x)+'px';
    oDrag.style.top= (_mPos.y - mouseOffset.y)+'px';
    return false;
  }

  oDrag.onmouseup=function(){ bDrag = false;   mouseOffset=null;}
  var arm_img=document.getElementById('ff')
  cvi_map.add(arm_img,{areacolor: '#FFFF00',  bordercolor: '#60F',nofade:'true' });
  canvahtml=document.getElementById("ff_canvas").innerHTML;

}
/***************************缩放测试**************************************/
//已经成功缩放并且全部调整好，缩放后高亮也出现了。只是方法比较BT，你需要自己到map.js里找更好的方式
function aa(){
var o=document.getElementById('ff')
cvi_map.remove(o);
var W1=o.offsetWidth,H1=o.offsetHeight;
o.style.width=200+'px';o.style.height=200+'px';
var W2=o.offsetWidth,H2=o.offsetHeight;
var rW=W2/W1, rH=H2/H1;
var coords=document.getElementsByTagName('area')[0].getAttribute('coords');
var a=coords.split(',');
for(var i=0;i<a.length;i++){
a[i]=i%2==0?parseInt(a[i]*rW):parseInt(a[i]*rH);
}
document.getElementsByTagName('area')[0].setAttribute('coords',a.join(','))
cvi_map.add(o,{areacolor: '#FFFF00',  bordercolor: '#60F',nofade:'true' });}
</script>
</head>
<body>
  <div id=aaa style="_position:absolute;">
    <img id="ff" src="http://img.hexun.com/2008-09-18/108979084.jpg" width="400" height="277" border="0" usemap="#parliament" />
    <map name="parliament" id="parliament">
      <area shape="poly" coords="173,66,152,85,126,118,108,155,97,168,81,166,68,167,50,164,42,170,26,169,6,171,2,174,3,178,18,178,13,186,7,185,4,193,8,196,14,200,18,206,22,216,19,218,45,210,70,211,71,216,72,230,66,237,82,224,92,225,115,230,130,233,144,237,154,238,174,242,186,246,198,254,225,263,240,268,260,269,301,266,297,251,243,236,228,226,206,224,194,215,180,206,162,196,141,185,121,175" href="javascript:alert('你点了热区')" />
    </map>
  </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <input type=button onclick='aa()' value='测试缩放' />

</body>
</html>

map.js
var canvascheck = document.createElement('canvas');
var isIE = window.navigator.systemLanguage&&(!document.documentMode||document.documentMode<9)?1:0;
var isI8 = isIE&&document.documentMode?1:0;
var isVM = isIE&&document.namespaces?1:0;
var isCV = canvascheck.getContext?1:0;
var isJG = 0, jg = new Array();
var canvahtml;function showCoords(map,ele,x,y,w,h) {}function getClassValue(classes,string){
var temp = 0; var pos = string.length;
for (var j=0;j<classes.length;j++) {
if (classes[j].indexOf(string) == 0) {
temp = Math.min(classes[j].substring(pos),100);
break;
}
}
return Math.max(0,temp);
}
function getClassRGBColor(classes,string,color){
var temp, val = color, pos = string.length;
for (var j=0;j<classes.length;j++) {
if (classes[j].indexOf(string) == 0) {
temp = classes[j].substring(pos);
val = temp.toLowerCase();
break;
}
}
if(!val.match(/^[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) {val = color||'000000'; }
if(!isCV) {return val; }else {
function hex2dec(hex){return(Math.max(0,Math.min(parseInt(hex,16),255)));}
var cr=hex2dec(val.substr(0,2)),cg=hex2dec(val.substr(2,2)),cb=hex2dec(val.substr(4,2));
return cr+','+cg+','+cb;
}
}
function performRGBColor(val,color){
if(!val.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) {val = color||'#000000'; }
if(!isCV) {return val.substr(1,6); }else {
function hex2dec(hex){return(Math.max(0,Math.min(parseInt(hex,16),255)));}
var cr=hex2dec(val.substr(1,2)),cg=hex2dec(val.substr(3,2)),cb=hex2dec(val.substr(5,2));
return cr+','+cg+','+cb;
}
}
function getClassAttribute(classes,string){
var temp = 0; var pos = string.length;
for (var j=0;j<classes.length;j++) {
if (classes[j].indexOf(string) == 0) {
temp = 1; break;
}
}
return temp;
}
function fadeCanvas(id,opac) {
var obj = document.getElementById(id);
if(obj.fading==1 && opac<=100) {
obj.style.opacity = opac/100; opac += 10;
window.setTimeout("fadeCanvas('"+id+"',"+opac+")",10);
}
}
function setAreaOver(obj,id,bd,co,op,nb,f,z) {
var a, i, j, d, c, o, b, n, l, r, v, u, x, y, p, context, k = 0, t = '', r = obj.getAttribute('rel'), canvas = document.getElementById(id);
if(r!=null) {d = r.split(","); v = d.unshift(obj.id); }else {d = new Array(obj.id); }
function setAttr() {
if(l.indexOf('forcegroup')!=-1) {k = getClassAttribute(u,"forcegroup");}else {k=0;}
if(l.indexOf('iopacity')!=-1) {o = getClassValue(u,"iopacity")/100;}else {o=op;}
if(l.indexOf('iborder')!=-1) {b = getClassRGBColor(u,"iborder",bd);}else {b=bd;}
if(l.indexOf('icolor')!=-1) {c = getClassRGBColor(u,"icolor",co);}else {c=co;}
if(l.indexOf('noborder')!=-1) {n = getClassAttribute(u,"noborder");}else {n=nb;}
}
if(isVM) {
for(a=0;a<d.length;a++) {
obj = document.getElementById(d[a]); p = '', l = obj.className, u = l.split(" "), v = obj.coords.split(",");
if(k==0) {setAttr();}
if(obj.shape.toLowerCase()=='rect') {
t += '<v:rect unselectable="on" strokeweight="1" filled="t" stroked="'+(n<1?"t":"f")+'" strokecolor="#'+b+'" style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+parseInt(v[0])+'px;top:'+parseInt(v[1])+'px;width:'+parseInt(v[2]-v[0])+'px;height:'+parseInt(v[3]-v[1])+'px;"><v:fill color="#'+c+'" opacity="'+o+'" /></v:rect>';
}else if(obj.shape.toLowerCase()=='circle') {
t += '<v:oval unselectable="on" strokeweight="1" filled="t" stroked="'+(n<1?"t":"f")+'" strokecolor="#'+b+'" style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+parseInt(v[0]-v[2])+'px;top:'+parseInt(v[1]-v[2])+'px;width:'+(parseInt(v[2])*2)+'px;height:'+(parseInt(v[2])*2)+'px;"><v:fill color="#'+c+'" opacity="'+o+'" /></v:oval>';
}else {
for(j=2;j<v.length;j+=2) {p += parseInt(v[j])+','+parseInt(v[j+1])+',';}
t += '<v:shape unselectable="on" strokeweight="1" filled="t" stroked="'+(n<1?"t":"f")+'" strokecolor="#'+b+'" coordorigin="0,0" coordsize="'+canvas.width+','+canvas.height+'" path="m '+parseInt(v[0])+','+parseInt(v[1])+' l '+p+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+canvas.width+'px;height:'+canvas.height+'px;"><v:fill color="#'+c+'" opacity="'+o+'" /></v:shape>';
}
} canvas.innerHTML += t;
}else if(isCV) {
if(f<1) {canvas.fading = 0; canvas.style.opacity = 0;}
context = canvas.getContext("2d");
for(a=0;a<d.length;a++) {
obj = document.getElementById(d[a]); l = obj.className, u = l.split(" "), v = obj.coords.split(",");
if(k==0) {setAttr();} context.beginPath();
if(obj.shape.toLowerCase()=='rect') {
context.rect(0.5+parseInt(v[0]),0.5+parseInt(v[1]),parseInt(v[2]-v[0]),parseInt(v[3]-v[1])); context.closePath();
}else if(obj.shape.toLowerCase()=='circle') {
context.arc(0.5+parseInt(v[0]),0.5+parseInt(v[1]),parseInt(v[2]),0,(Math.PI/180)*360,false);
}else {
context.moveTo(parseInt(v[0]),parseInt(v[1])); for(j=2;j<v.length;j+=2) {context.lineTo(parseInt(v[j]),parseInt(v[j+1]));} context.closePath();
}
context.fillStyle = 'rgba('+c+','+o+')'; context.strokeStyle = 'rgba('+b+',1)'; context.fill(); if(n<1) {context.stroke();}
} if(f<1) {canvas.fading = 1; fadeCanvas(id,0);}
}else {
o = op; l = obj.className; u = l.split(" ");
if(l.indexOf('forcegroup')!=-1) { k = getClassAttribute(u,"forcegroup");
if(k!=0) {if(l.indexOf('iopacity')!=-1) {o = getClassValue(u,"iopacity")/100; k=0;}}}
if(isIE) {canvas.style.filter = "Alpha(opacity="+(o*100)+")";}else {canvas.style.opacity = o; canvas.style.MozOpacity = o; canvas.style.KhtmlOpacity = o;}
for(a=0;a<d.length;a++) {
obj = document.getElementById(d[a]); l = obj.className, u = l.split(" "), v = obj.coords.split(",");
if(k==0) {
if(l.indexOf('forcegroup')!=-1) {k = getClassAttribute(u,"forcegroup");}else {k=0;}
if(l.indexOf('icolor')!=-1) {c = getClassRGBColor(u,"icolor",co);}else {c=co;}
} jg[z].setColor("#"+c);
if(obj.shape.toLowerCase()=='rect') {
jg[z].fillRect(parseInt(v[0]),parseInt(v[1]),parseInt(v[2]-v[0])+1,parseInt(v[3]-v[1])+1);
}else if(obj.shape.toLowerCase()=='circle') {
jg[z].fillEllipse(parseInt(v[0]-v[2]),parseInt(v[1]-v[2]),parseInt(v[2])*2+1,parseInt(v[2])*2+1);
}else {x = new Array(); y = new Array(); i = 0; for(j=0;j<v.length;j+=2) {x[i] = parseInt(v[j]); y[i] = parseInt(v[j+1]); i++;} jg[z].fillPolygon(x,y);
} jg[z].paint();
}
}
}
function setAreaOut(obj,id,f,z) {
var canvas = document.getElementById(id);
if(isVM) {
//var cn=canvas.childNodes;
//canvas.removeChild(cn.item(cn.length-1));
canvas.innerHTML=canvahtml;
}
else
if(isJG) {jg[z].clear();}else if(isCV) {
var context = canvas.getContext("2d");
context.clearRect(0,0,canvas.width,canvas.height);
}
}
function extAreaOver(image,area) {
var img = document.getElementById(image);
var obj = document.getElementById(area);
var cav = document.getElementById(img.canvasid);
var bc = performRGBColor(img.options['bordercolor'],'#0000ff');
var ac = performRGBColor(img.options['areacolor'],'#000000');
var op = img.options['opacity']/100;
if(img && obj && cav) setAreaOver(obj,img.canvasid,bc,ac,op,img.options['noborder'],img.options['nofade'],img.jg);
}
function extAreaOut(image,area) {
var img = document.getElementById(image);
var obj = document.getElementById(area);
var cav = document.getElementById(img.canvasid);
if(img && obj && cav) setAreaOut(obj,img.canvasid,img.options['nofade'],img.jg);
}
function getCoords(e,n,a,i,x,y,w,h,pw,ph) {
var t, o, ox, oy, ex, ey, cx, cy, px=0, py=0;
if (!e) {e = window.event; }
if (e.pageX || e.pageY) {px = e.pageX; py = e.pageY;}
ex = e.clientX; ey = e.clientY;
if(self.pageXOffset||self.pageYOffset) {
ox = self.pageXOffset; if(ox>0 && px==ex) {ex -= ox; }
oy = self.pageYOffset; if(oy>0 && py==ey) {ey -= oy; }
}else if(document.documentElement) {
ox = document.documentElement.scrollLeft;
oy = document.documentElement.scrollTop;
}else if(document.body) {
ox = document.body.scrollLeft; oy = document.body.scrollTop;
}
if(document.body.scrollHeight!=ph||document.body.scrollWidth!=pw) {
var o = document.getElementById(i);
var t = findPosXY(o); x = t.x; y = t.y;
}
cx = Math.min(Math.max(ex+ox-x,0),w);
cy = Math.min(Math.max(ey+oy-y,0),h);
showCoords(n,a,cx,cy,w,h);
}
function findPosXY(ele) {
var t; var d = {x:ele.offsetLeft, y:ele.offsetTop };
if(ele.offsetParent) { t = findPosXY(ele.offsetParent); d.x += t.x; d.y += t.y;}
return d;
}
function roundedRect(ctx,x,y,width,height,radius,nopath){
if (!nopath) ctx.beginPath();
ctx.moveTo(x,y+radius);
ctx.lineTo(x,y+height-radius);
ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
ctx.lineTo(x+width-radius,y+height);
ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
ctx.lineTo(x+width,y+radius);
ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
ctx.lineTo(x+radius,y);
ctx.quadraticCurveTo(x,y,x,y+radius);
if (!nopath) ctx.closePath();
}
function getRadius(radius,width,height){
var part = (Math.min(width,height)/100);
radius = Math.max(Math.min(100,radius/part),0);
return radius + '%';
}

终于有人隔断一下了，三次回复!唉
modify: function(image, options) {
try {
var radius = (typeof options['radius']=='number'?options['radius']:image.options['radius']); image.options['radius']=radius;
var opacity = (typeof options['opacity']=='number'?options['opacity']:image.options['opacity']); image.options['opacity']=opacity;
var bcolor = (typeof options['bordercolor']=='string'?options['bordercolor']:image.options['bordercolor']); image.options['bordercolor']=bcolor;
var acolor = (typeof options['areacolor']=='string'?options['areacolor']:image.options['areacolor']); image.options['areacolor']=acolor;
var noborder = (typeof options['noborder']=='boolean'?options['noborder']:image.options['noborder']); image.options['noborder']=noborder;
var nofade = (typeof options['nofade']=='boolean'?options['nofade']:image.options['nofade']); image.options['nofade']=nofade;
var showcoords = (typeof options['showcoords']=='boolean'?options['showcoords']:image.options['showcoords']); image.options['showcoords']=showcoords;
var delayed = (typeof options['delayed']=='boolean'?options['delayed']:image.options['delayed']); image.options['delayed']=delayed;
var imgsrc = (typeof options['imgsrc']=='string'?options['imgsrc']:image.options['imgsrc']); image.options['imgsrc']=imgsrc;
var mapid = (typeof options['mapid']=='string'?options['mapid']:image.options['mapid']); image.options['mapid']=mapid;

/*******************还有这里***************************************/
var context, func, ih = image.offsetHeight, iw = image.offsetWidth;
/*******************************************************************/

var radius = parseInt(Math.min(Math.min(iw/4,ih/4),radius));
var opacity = opacity==0?0.33:opacity/100;
var bcolor = performRGBColor(bcolor,'#0000ff');
var acolor = performRGBColor(acolor,'#000000');
var canvas = document.getElementById(image.canvasid);
var dummy = document.getElementById(image.dummyid);
var bgrnd = document.getElementById(image.bgrndid);
var map = document.getElementsByName(image.mapname)[0];
var opac = 100;
function replace() {
if(mapid!='') {
var tmp = document.getElementById(mapid);
if(tmp) {map.innerHTML = tmp.innerHTML;}
}else {
map.innerHTML = image.areas;
}
}
function prepare() {
if(!delayed) {replace();}
for(var j=0;j<map.areas.length;j++) {
if(map.areas[j].shape.match(/(rect|poly|circle)/i)) {
if(window.opera||map.areas[j].coords!='') {
if(map.areas[j].id=='') {map.areas[j].id = image.mapname+'_'+j;}
if(isVM||isIE) {
setAreaOver(map.areas[j],canvas.id,"#FFFFFF","#FFFF00","0.4","true",nofade,image.jg);
func=map.areas[j].onmouseover; if(func!=null) {tmp=String(func); func=(tmp.indexOf('function')>=0?tmp.match(/\{([^}]+)\}/):tmp); func=(typeof(func)=='object'?func[1]:func);}
map.areas[j].onmouseover = new Function('setAreaOver(this,"'+canvas.id+'","'+bcolor+'","'+acolor+'",'+opacity+','+noborder+','+nofade+','+image.jg+');'+func);
func=map.areas[j].onmouseout; if(func!=null) {tmp=String(func); func=(tmp.indexOf('function')>=0?tmp.match(/\{([^}]+)\}/):tmp); func=(typeof(func)=='object'?func[1]:func);}
map.areas[j].onmouseout = new Function('setAreaOut(this,"'+canvas.id+'",'+nofade+','+image.jg+');'+func);
}else {
func = map.areas[j].getAttribute("onmouseover"); map.areas[j].setAttribute("onmouseover","setAreaOver(this,'"+canvas.id+"','"+bcolor+"','"+acolor+"',"+opacity+","+noborder+","+nofade+","+image.jg+");"+func);
func = map.areas[j].getAttribute("onmouseout"); map.areas[j].setAttribute("onmouseout","setAreaOut(this,'"+canvas.id+"',"+nofade+","+image.jg+");"+func);
}
}
}
}
if(showcoords) {
var atr, t = findPosXY(image), ph = document.body.scrollHeight, pw = document.body.scrollWidth;
if(isVM||isIE) {
image.onmousemove = new Function('getCoords(event,"'+image.mapname+'",0,"'+image.id+'",'+t.x+','+t.y+','+iw+','+ih+','+pw+','+ph+');'+image.movefunc);
}else {
image.setAttribute("onmousemove","getCoords(event,'"+image.mapname+"',0,'"+image.id+"',"+t.x+","+t.y+","+iw+","+ih+","+pw+","+ph+");"+image.movefunc);
}
if(map.length>0) {
for(var j=0;j<map.areas.length;j++) {
if(map.areas[j].shape.match(/(rect|poly|circle)/i)) {
if(window.opera||map.areas[j].coords!='') {
atr = map.areas[j].id;
if(isVM||isIE) {
func=map.areas[j].onmousemove; if(func!=null) {tmp=String(func); func=(tmp.indexOf('function')>=0?tmp.match(/\{([^}]+)\}/):tmp); func=(typeof(func)=='object'?func[1]:func);}
map.areas[j].onmousemove = new Function('getCoords(event,"'+image.mapname+'","'+atr+'","'+image.id+'",'+t.x+','+t.y+','+iw+','+ih+','+pw+','+ph+');'+func);
}else {
func = map.areas[j].getAttribute("onmousemove"); map.areas[j].setAttribute("onmousemove","getCoords(event,'"+image.mapname+"','"+atr+"','"+image.id+"',"+t.x+","+t.y+","+iw+","+ih+","+pw+","+ph+");"+func);
}
}
}
}
}
}
}
if(canvas && bgrnd && map) {
if(isCV) {
context = canvas.getContext("2d");
context.clearRect(0,0,canvas.width,canvas.height);
}else if(isVM) {
canvas.innerHTML = '';
}else {
if(isIE) {canvas.style.filter = "Alpha(opacity="+(opacity*100)+")";}else { canvas.style.opacity = opacity; canvas.style.MozOpacity = opacity; canvas.style.KhtmlOpacity = opacity;}
if(isJG) {jg[image.jg].clear();}
}
if(delayed) {replace(); }
if(isCV) {
if(imgsrc!='') {
var img = new Image();
img.onload = function() {
context = bgrnd.getContext("2d");
context.clearRect(0,0,bgrnd.width,bgrnd.height);
context.save();
if(radius>0) {
roundedRect(context,0,0,bgrnd.width,bgrnd.height,radius);
context.clip();
}
context.fillStyle = 'rgba(0,0,0,0)';
context.fillRect(0,0,bgrnd.width,bgrnd.height);
context.drawImage(img,0,0,bgrnd.width,bgrnd.height);
context.restore();
prepare();
}
img.src = imgsrc;
}else {
context = bgrnd.getContext("2d");
context.clearRect(0,0,bgrnd.width,bgrnd.height);
context.save();
if(radius>0) {
roundedRect(context,0,0,bgrnd.width,bgrnd.height,radius);
context.clip();
}
context.fillStyle = 'rgba(0,0,0,0)';
context.fillRect(0,0,bgrnd.width,bgrnd.height);
context.drawImage(image,0,0,bgrnd.width,bgrnd.height);
context.restore();
prepare();
}
}else if(isVM) {
if(radius>0) {radius = getRadius(radius,bgrnd.width,bgrnd.height);}
bgrnd.innerHTML = '<v:roundrect arcsize="'+radius+'" strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:0px;top:0px;width:'+bgrnd.width+'px;height:'+bgrnd.height+'px;"><v:fill src="'+(imgsrc!=''?imgsrc:image.src)+'" type="frame" /></v:roundrect>';
prepare();
}else {
bgrnd.src = imgsrc!=''?imgsrc:image.src;
prepare();
} image.active = true;
if(isVM||isIE) {
func = image.onmousemove; if(func!=null) {tmp=String(func); func=(tmp.indexOf('function')>=0?tmp.match(/\{([^}]+)\}/):tmp); func=(typeof(func)=='object'?func[1]:func);} image.movefunc = func;
}else {
image.movefunc = image.getAttribute("onmousemove");
}
}
} catch (e) {}
}, remove : function(image) {
var ele, object = image.parentNode;
if(image.active) {
if(isIE) { image.style.filter = "Alpha(opacity=100)";}else {image.style.opacity = 100; image.style.MozOpacity = 100; image.style.KhtmlOpacity = 100;}
ele = document.getElementsByName(image.mapname)[0]; ele.innerHTML = image.areas; image.active = false; image.areas = '';
if(isVM||isIE) {image.onmousemove = image.movefunc;}else {image.setAttribute("onmousemove",image.movefunc);}
ele = document.getElementById(image.canvasid); if(ele) {object.removeChild(ele);}
ele = document.getElementById(image.blindid); if(ele) {object.removeChild(ele);}
ele = document.getElementById(image.bgrndid); if(ele) {object.removeChild(ele);}
}
}
}

你别高兴太早哈，我20楼代码注释里写的很清楚：
/***************************缩放测试**************************************/
//已经成功缩放并且全部调整好，缩放后高亮也出现了。只是方法比较BT，你需要自己到map.js里找更好的方式因为代码是你的不是我的，所以我就不仔细找了，哈哈。还有，IE6下你的原版map.js就有个bug:页面初次加载，热区就自动加亮了；这倒也罢了，关键是缩放以后，它原来尺寸的高亮区还是有。我也没耐心再仔细找原因了，呵呵

map.js 搞不懂，里上网来，没有这个文件怎么做的啊，晕，把js发下

哈哈，上代码，用你改之后的map.js页面加载自动高亮是我的需求，从map.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=gb2312" />
<meta http-equiv="imagetoolbar" content="no">
<title>热区图片拖拽</title>
<script src="map.js" type="text/javascript"></script>
<script type="text/javascript">
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
var bDrag=false, mouseOffset=null;function getMouseOffset(o,e){
  var _oPos=getPosition(o), _mPos=mouseCoords(e);
  return {x:_mPos.x-_oPos.x,y:_mPos.y-_oPos.y};
}function getPosition(o){
  var left=0, top=0;
  while(o.offsetParent){
    left+=o.offsetLeft+(o.currentStyle?(o.currentStyle.borderLeftWidth*1).NaN0():0);
    top +=o.offsetTop +(o.currentStyle?(o.currentStyle.borderTopWidth*1).NaN0():0);
    o=o.offsetParent;
  }
  left+=o.offsetLeft+(o.currentStyle?(o.currentStyle.borderLeftWidth*1).NaN0():0);
  top+=o.offsetTop+(o.currentStyle?(o.currentStyle.borderTopWidth*1).NaN0():0);
  return {x:left,y:top};
}

function mouseCoords(e){
  if(e.pageX||e.pageY){  return {x:e.pageX,y:e.pageY};  }
  return {x:e.clientX+document.body.scrollLeft-document.body.clientLeft,y:e.clientY+document.body.scrollTop-document.body.clientTop};
}onload=function(){
  var oDrag=document.getElementById('aaa');  if(!oDrag) return;
  oDrag.onmousedown=function(e){
    bDrag=true;
      e=e||window.event;
    mouseOffset=getMouseOffset(this,e);    return false;
  }

  oDrag.onmousemove=function(e){
      if(!bDrag)return;
    e=e||window.event;
    var _mPos = mouseCoords(e);
    oDrag.style.left=(_mPos.x - mouseOffset.x)+'px';
    oDrag.style.top= (_mPos.y - mouseOffset.y)+'px';
    return false;
  }

  oDrag.onmouseup=function(){ bDrag = false;   mouseOffset=null;}
  var arm_img=document.getElementById('ff')
  cvi_map.add(arm_img,{areacolor: '#FFFF00',  bordercolor: '#60F',nofade:'true' });
  canvahtml=document.getElementById("ff_canvas").innerHTML;

}
/***************************缩放测试**************************************/
//已经成功缩放并且全部调整好，缩放后高亮也出现了。只是方法比较BT，你需要自己到map.js里找更好的方式
function aa(n){
    var o=document.getElementById('ff');
document.getElementById("ff_canvas").innerHTML="";//将原来的热区去掉
    cvi_map.remove(o);
    var W1=o.offsetWidth,H1=o.offsetHeight;
    o.style.width=W1+10*n+'px';o.style.height=parseInt((o.offsetWidth/W1)*H1)+'px';
    var W2=o.offsetWidth,H2=o.offsetHeight;
    var rW=W2/W1, rH=H2/H1;
var areal=document.getElementsByTagName('area');
for (j=0;j<areal.length;j++){
    var coords=document.getElementsByTagName('area')[j].getAttribute('coords');
    var a=coords.split(',');
    for(var i=0;i<a.length;i++){
        a[i]=i%2==0?a[i]*rW:a[i]*rH;//这里不要加parseInt,因为数字太小的会变0，再放大热区就变形了
    }
    document.getElementsByTagName('area')[j].setAttribute('coords',a.join(','))
}
    cvi_map.add(o,{areacolor: '#FFFF00',  bordercolor: '#60F',nofade:'true' });
canvahtml=document.getElementById("ff_canvas").innerHTML;//加上新的热区
}
</script>
</head>
<body>
  <div id=aaa style="_position:absolute;">
    <img id="ff" src="http://img.hexun.com/2008-09-18/108979084.jpg" width="400" height="277" border="0" usemap="#parliament" />
    <map name="parliament" id="parliament">
      <area shape="poly" coords="173,66,152,85,126,118,108,155,97,168,81,166,68,167,50,164,42,170,26,169,6,171,2,174,3,178,18,178,13,186,7,185,4,193,8,196,14,200,18,206,22,216,19,218,45,210,70,211,71,216,72,230,66,237,82,224,92,225,115,230,130,233,144,237,154,238,174,242,186,246,198,254,225,263,240,268,260,269,301,266,297,251,243,236,228,226,206,224,194,215,180,206,162,196,141,185,121,175" href="javascript:alert('你点了热区')" />
      <area shape="poly" coords="270,78,258,146,324,159,330,97,324,57" href="#" />
    </map>
  </div><br><br><br><br><br><br>
  <input type=button onclick='aa(1)' value='测试放大' />
  <input type=button onclick='aa(-1)' value='测试缩小' />
</body>
</html>

测试了，相当不错。但是，几次放大缩小热区变形是个问题。建议：
设置全局变量initalData
var initalData={
  W1:  false,
  H1:  false，
  coords1:  new Array()
}window.onload=function(){
  //这里读取图片的尺寸，给initalData.W1/H1赋值；
  。
  //读取各个area的coords属性给initalData.coords1赋值
  。
}function aa(n){
    var o=document.getElementById('ff');
    document.getElementById("ff_canvas").innerHTML="";//将原来的热区去掉
    cvi_map.remove(o);
    var W1=initalData.W1;,H1=initalData.H1;
    o.style.width=W1+10*n+'px';o.style.height=parseInt((o.offsetWidth/W1)*H1)+'px';
    var W2=o.offsetWidth,H2=o.offsetHeight;
    var rW=W2/W1, rH=H2/H1;
    var areal=document.getElementsByTagName('area');
    for (j=0;j<areal.length;j++){
    var coords=document.getElementsByTagName('area')[j].getAttribute('coords');
    var a=coords.split(',');
    for(var i=0;i<a.length;i++){
        a[i]=i%2==0?a[i]*rW:a[i]*rH;//这里不要加parseInt,因为数字太小的会变0，再放大热区就变形了
    }
    document.getElementsByTagName('area')[j].setAttribute('coords',a.join(','))
    }
    cvi_map.add(o,{areacolor: '#FFFF00',  bordercolor: '#60F',nofade:'true' });
    canvahtml=document.getElementById("ff_canvas").innerHTML;//加上新的热区
}

代码，god，建议你看了一下几何算法，里面有你想要的东西

调试易

２００分解决有难度的图片缩放、拖动问题，看帖会有收获的

解决方案 »