js 动态创建热区问题？？？？

我需要用js在图片动态的创建一个热区，热区的坐标自己传入,实现的代码如下：
<script language="JavaScript">
var img = document.createElement("img");
img.src="3.bmp";
img.usemap="#Map";var map = document.createElement("map");
map.id="Map";var myarea= document.createElement("area");
myarea.shape = 'rect';
myarea.coords = '200,200,400,400';
myarea.href = '#';
myarea.alt = 'this is hot spot;
myarea.title = 'this is hot spot';
myarea.onclick=function(){alert("hello")}map.appendChild(myarea);
document.body.appendChild(map);
document.body.appendChild(img);
</script>当程序运行后，我通过iedevelopbar工具查看，map和area都已经创建完毕，可是把鼠标移动到热区上时，鼠标依然是箭头，没有变成手型，同时点击该区域亦没有反应，请高手点播，我错在什么地方？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

不用createlement节点应该是行的通的
document.body.appendChild(map);
document.body.appendChild(img);
====>
document.body.innerHTML = document.body.innerHTML+map.outerHTML+img.outerHTML;
即用字符串拼接方式，单个地加入，因为用先后，所以是无效的
我都已经创建出了<map>和area了，不是innerHTML的问题
首先，你的这段SCRIPT是在BODY里面还是在BODY后面？
如果你的SCRIPT在BODY前面，那么就会导致找不到对象。如果你的SCRIPT在BODY中间，直接使用document.body.appendChild(..)会导致JS的致命错误——此时BODY元素并未闭合，造成浏览器解释失败同时，用innerHTML的方法也是不科学的,innerHTML会导致一些效果失效，比如楼主定义的 myarea.onclick=function(){alert("hello")} 我以前碰到这个问题的解决方法就是，动态生成一个随机数id，然后document.write("<div id="+ randomID +"></div>");
然后再document.getElementById(randomID).appendChild(..);
我再重新描述一下这个问题：<div id="mydiv">
<img id="img" border=0 usemap="#map">
</div>
<button onclick="test();">test</button>
<script language="JavaScript">
function test(){
var img = document.getElementById("img");
img.src="3.bmp";
var map = document.createElement("map");
map.id="Map";
var oAREA = document.createElement('AREA');
oAREA.shape = 'rect';
oAREA.coords = '200,200,400,400';
oAREA.href = '#';
oAREA.onclick=function(){alert("hello")}
map.appendChild(oAREA);
mydiv.appendChild(map);
}
</script>当我再页面中写一个<img>的标签时，热区就有作用，但是如果我动态创建时就无作用？郁闷。。还有一个问题：就是coors的坐标问题，该坐标的是图片中的区域相对于图片的位置。
但是我动态生成的图片和从数据库中得到的坐标，把坐标标示到图片上后，该坐标标示的是屏幕的位置，没有在图片中加上热区，到底如何操作这个坐标？
innerHTML，document.body，或者*.setAttribute("","");
这些都不是问题，我都试过了,不是他们影响的
我知道已经创建出map和image了，可以用alert(document.body.innerHTML);查看到添加结果你还没有我的意思
image和map相互依赖，你用append一个一个向body中添加，有一个先后的问题
热区设置是不会生效的，只有同时生成才可以<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script language="JavaScript" defer>
var img = document.createElement("img");
img.src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif";
img.usemap="#Map"; var map = document.createElement("map");
map.id="Map"; var myarea= document.createElement("area");
myarea.shape = 'rect';
myarea.coords = '48, 19, 72, 47'; //S上加热区
myarea.href = 'http://www.csdn.net';
myarea.alt = 'this is hot spot';
myarea.title = 'this is hot spot';
myarea.onClick=function(){alert("hello")} map.appendChild(myarea);
document.body.innerHTML = map.outerHTML+img.outerHTML;
</script> </head><body></body></html>
非常感谢楼上的耐心回复。
你的代码我试了一下，虽然解决了热情的问题，但是onclick事件失去作用了，即便将href="#",onclick函数依旧没有执行。
我也遇到这种问题，我的只能在IE,FF,OPERA下有效，在SAFARI,CHROME下第二次以上动态创建时onclick事件也是无效，恼火死了     img.useMap = "#map1";
var imgM = document.createElement("map");
            imgM.name = "map1";
            imgM.id = "map1";
var area1 = document.createElement("area");
            area1.shape="rect";
            area1.coords="0,0," + aa + "," + bb;
area1.onclick = function(){
    if(ssi.screenN>0)
    {
ssi.screenN = ssi.screenN-1;
    ssi.move(ssi.screenN);
ssi.iBorder(ssi.screenN);
}
};
imgM.appendChild(area1);
var area2 = document.createElement("area");
area2.shape="rect";
area2.coords=aa + ",0," + aa*2 + "," + bb;
area2.onclick = function(){
    if(ssi.screenN<ssi.N-1)
    {
ssi.screenN = ssi.screenN+1;
    ssi.move(ssi.screenN);
ssi.iBorder(ssi.screenN);
}
};
imgM.appendChild(area2);
id("screen").appendChild(imgM);
这个是用innerHTML产生的问题，之前DOM节点所设的事件均无效
解决方法很简单，就是在innerHTML后面再去设置事件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script language="JavaScript" defer>
var img = document.createElement("img");
img.src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif";
img.usemap="#Map"; var map = document.createElement("map");
map.id="Map"; var myarea= document.createElement("area");
myarea.shape = 'rect';
myarea.coords = '48, 19, 72, 47'; //S上加热区
myarea.href = '#';
myarea.alt = 'this is hot spot';
myarea.title = 'this is hot spot';
myarea.id = "area1";
map.appendChild(myarea); document.body.innerHTML = map.outerHTML+img.outerHTML;
document.getElementById("area1").onclick=function(){alert("hello");};
</script> </head><body></body></html>
呵呵，IE，FF测试通过
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script language="JavaScript" defer>
var str = '<p><MAP id="Map" name="Map">'
str+='<AREA id=area1 title="this is hot spot" onclick="alert(\'area1\')" shape="rect" alt="this is hot spot" coords="48,19,72,47" href="#">';//添加热区1
str+='<area id=area2 href="#" shape="circle" coords="89, 32, 15">';//添加热区2
str+='</MAP>';
str+='<IMG height=54 src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif" width=146 usemap="#Map"></p>';
document.body.innerHTML = str;
document.getElementById("area2").onclick = function(){alert("area2");};
</script>
</head>
<body>
</body>
</html>
呵呵，我在上面代码在FF,IE,OPERA都通过的，在SAFARI,CHROME下第二次以上动态创建时onclick事件却无效了，之前我以为ID的问题，但我动态生成新的ID后也是没用，两天都没解决，挺烦恼的，问题和楼主的差不多。
DOM树的生成方式可能会影响动态添加的标签document.getElementById("area2").onclick=function(){alert("area2");}这段代码放到  setTimeout 中来执行看看
lihui_shine，多谢你的帮助，虽然没有采纳你的意见，但是对我还是有帮助的，一点分数，不成敬意
楼主能不能把你解决问题的方法说一下，我现在遇到这个问题，需要动态创建area