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=utf-8' />
<title>无标题文档</title>
<script type='text/javascript'>
function createMap()
{
document.getElementById("map").innerHTML="<map name='Map' id='Map'>  <area shape='rect' coords='24,22,112,55' href='/html/RECENTTRAINING/' target='_blank' />  <area shape='rect' coords='126,25,220,90' href='/html/JOINBAMAOLFAMILY/BAMAOLSAPPLICATIONFORCOUNSELINGPSYCHOLOGISTS/index.htm' target='_blank' />  <area shape='rect' coords='22,59,114,90' href='/html/HOTLINE/' target='_blank' />  <area shape='rect' coords='13,115,73,186' href='/html/VIDEO/' target='_blank' />  <area shape='rect' coords='82,115,143,187' href='/html/MENTALMUSIC/' target='_blank' />  <area shape='rect' coords='154,116,219,187' href='http://mail.bamaol.com' target='_blank' /></map>";
}
window.onload=createMap;
</script>
</head>
<body>
<img src="/image/top0019.gif" usemap="#Map" />
<div id="map">
</div>
</body>
</html>
为什么不能实现动态设置图片的热区呢？