调试易

图片热点不支持border 
只能用绝对定位的div来模拟区域边框。 <style> 
*{margin:0;} 
</style> 
<script language="JavaScript"> 
function createDiv(left, top, width, height){
var rect = document.createElement("DIV");
rect.id = "rect";
rect.style.position = "absolute";
rect.style.left = left;
rect.style.top = top;
rect.style.width = width;
rect.style.height = height;
rect.style.border = "2px solid #eb545d";
document.body.appendChild(rect);

var info = document.createElement("DIV");
info.id = "info";
info.style.position = "absolute";
info.style.marginTop = 5;
info.style.left = left;
info.style.top = top + height;
info.style.width = width;
info.style.height = height / 2;
info.style.backgroundColor = "#eb545d";
info.innerHTML = "文本";
document.body.appendChild(info);
}

function removeDiv(){
var rect = document.getElementById("rect");
if (rect) {
document.body.removeChild(rect);
}
var info = document.getElementById("info");
if (info) {
document.body.removeChild(info);
}
}
</script> 
<img src="http://www.baidu.com/img/baidu_logo.gif" border="0" usemap="#SystemMap" id="img1" style="margin:0"/> 
<map id="SystemMap" name="SystemMap"> 
<area shape="rect" coords="0,0,108,130" href="#" onmouseover="createDiv(0,0,108,130)" onmouseout="removeDiv()"/> 
<area shape="rect" coords="108,0,160,130" href="#" onmouseover="createDiv(108,0,52,130)" onmouseout="removeDiv()"/> 
<area shape="rect" coords="160,0,270,130" href="#" onmouseover="createDiv(160,0,110,130)" onmouseout="removeDiv()"/> 
</map>

修改一下，根据area自动计算
<style>
* {margin: 0;}
</style>
<script type="text/javascript">
function createDiv(elem){
var pos = elem.coords.split(','),
rect = document.createElement("DIV"),
info = document.createElement("DIV");

rect.id = "rect";
info.id = "info";
info.innerHTML = "aaa";

pos[2] -= pos[0];
pos[3] -= pos[1];

with (rect.style) {
position = "absolute";
left = pos[0];
top = pos[1];
width = pos[2];
height = pos[3];
border = "2px solid #eb545d";
}

with (info.style) {
position = "absolute";
marginTop = 5;
left = pos[0];
top = (pos[1] - 0) + (pos[3] - 0);
width = pos[2];
height = (pos[3] - 0) / 2;
backgroundColor = "#eb545d";
}

document.body.appendChild(rect);
document.body.appendChild(info);
}

function removeDiv(){
var rect = document.getElementById("rect");
if (rect) {
document.body.removeChild(rect);
}
var info = document.getElementById("info");
if (info) {
document.body.removeChild(info);
}
}

</script>
<img src="http://www.baidu.com/img/baidu_logo.gif" border="0" usemap="#SystemMap" id="img1" style="margin:0"/>
<map id="SystemMap" name="SystemMap">
<area shape="rect" coords="0,0,108,130" href="#" onmouseover="createDiv(this);" onmouseout="removeDiv();"/>
<area shape="rect" coords="108,0,160,130" href="#" onmouseover="createDiv(this);" onmouseout="removeDiv();"/>
<area shape="rect" coords="160,0,270,130" href="#" onmouseover="createDiv(this);" onmouseout="removeDiv();"/>
</map>

有QQ或者是MSN或者是HI吗?这样说太不方便了.

也可以仿照Google地图的方式来做