以前有个项目要求动态的在线编辑图片的链接，要求可以将一张图片划分多个热区。到网上找到一些资料。后来就确定思路，通过Javascript在图片上的拖动，得到选中的区域，作为热区的范围，在利用Javascript动态创建“AREA”DOM对象，对AREA对象设置相关属性，这样就可以满足客户的要求了。
这里是图片
<img src='http://www.elong.com/travelguide/images/map/map_beijing.gif' border=0 usemap='#Map'>
<map name="Map">
<area shape="rect" coords="178,281,225,299" href="showcity.aspx?cityid=10600" alt="北京市西城区" title="北京市西城区">
<area shape="rect" coords="227,279,273,296" href="showcity.aspx?cityid=31900" alt="北京市东城区" title="北京市东城区">
<area shape="rect" coords="242,261,287,277" href="showcity.aspx?cityid=23100" alt="北京市朝阳区" title="北京市朝阳区">
<area shape="rect" coords="232,300,278,316" href="showcity.aspx?cityid=30600" alt="北京市崇文区" title="北京市崇文区">
<area shape="rect" coords="184,302,230,318" href="showcity.aspx?cityid=10000" alt="北京市宣武区" title="北京市宣武区">
<area shape="rect" coords="152,199,197,216" href="showcity.aspx?cityid=0109" alt="北京市昌平区" title="北京市昌平区">
<area shape="rect" coords="230,116,276,132" href="showcity.aspx?cityid=0108" alt="北京市怀柔区" title="北京市怀柔区">
<area shape="rect" coords="102,285,163,301" href="showcity.aspx?cityid=13700" alt="北京市石景山区" title="北京市石景山区">
<area shape="rect" coords="82,353,129,370" href="showcity.aspx?cityid=15800" alt="北京市房山区" title="北京市房山区">
<area shape="rect" coords="185,362,232,378" href="showcity.aspx?cityid=0111" alt="北京市大兴区" title="北京市大兴区">
<area shape="rect" coords="171,255,217,273" href="showcity.aspx?cityid=33300" alt="北京市海淀区" title="北京市海淀区">
<area shape="rect" coords="152,320,197,336" href="showcity.aspx?cityid=34400" alt="北京市丰台区" title="北京市丰台区">
<area shape="rect" coords="264,318,309,334" href="showcity.aspx?cityid=0112" alt="北京市通州区" title="北京市通州区">
<area shape="rect" coords="93,140,140,158" href="showcity.aspx?cityid=0113" alt="北京市延庆县" title="北京市延庆县">
<area shape="rect" coords="295,149,343,165" href="showcity.aspx?cityid=0104" alt="北京市密云县" title="北京市密云县">
<area shape="rect" coords="80,261,139,278" href="showcity.aspx?cityid=0106" alt="北京市门头沟区" title="北京市门头沟区">
<area shape="rect" coords="243,218,289,234" href="showcity.aspx?cityid=0107" alt="北京市顺义区" title="北京市顺义区">
<area shape="rect" coords="328,200,376,218" href="showcity.aspx?cityid=0110" alt="北京市平谷区" title="北京市平谷区">
</map>
<img src='http://www.elong.com/travelguide/images/map/map_beijing.gif' border='0' usemap='#Map'>
<map name="Map"></map>
Javascript创建AREA对象
<script language="JavaScript">
var oAREA = document.createElement('AREA');
oAREA.shape = 'rect';
oAREA.coords = '178,281,225,299';
oAREA.href = 'showcity.aspx?cityid=10600';
oAREA.alt = '北京市西城区';
oAREA.title = '北京市西城区';
Map.appendChild(oAREA);
</script>
热区的链接、alt、title等属性可以结合DIV动态输入，这样，就比较方便了。
说明：本文的代码来自网上