JS如何实现改变一张图片中热点区域的边框的颜色！请高手赐教！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
var aPos = [[11,284,211,564], [10,117,249,281]]
function test(event){
var x = event.offsetX;
var y = event.offsetY;
var t = document.getElementById("img");
var flag = false;
for(var i=0;i<aPos.length;i++){
var pos = aPos[i];
if(x > pos[0] && x < pos[2] && y > pos[1] && y< pos[3]){
var rect = document.getElementById("rect");
if(!rect){
rect = document.createElement("DIV");
document.body.appendChild(rect);
}
rect.id = "rect";
rect.style.position = "absolute";
var imgX = fGetX(t);
var imgY = fGetY(t);
rect.style.left = imgX + pos[0] + "px";
rect.style.top = imgY + pos[1] + "px";
rect.style.width = pos[2] - pos[0] + "px";
rect.style.height = pos[3] - pos[1] + "px";
rect.style.border = "1px red solid";
flag = true;
}
}
if(!flag){
var rect = document.getElementById("rect");
if(rect){
rect.parentNode.removeChild(rect);
}
}
}function fGetX(element){
var l=element.offsetLeft;
while(element=element.offsetParent){
l+=element.offsetLeft;
}
return l;
}function fGetY(element){
var t=element.offsetTop;
while(element=element.offsetParent){
t+=element.offsetTop;
}
return t;
}
//-->
</SCRIPT>
</HEAD><BODY>
<img src="../images/200411.jpg" width="380" height="570" border="0" usemap="#Map" onmouseover="test(event)" id="img"><map name="Map">
<area shape="rect" coords="11,284,211,564" href="#" target="news" >
<area shape="rect" coords="10,117,249,281" href="#" target="news">
</map></BODY>
</HTML>