怎么获得热点区域和非热点区域，大家帮忙解决个问题。

<!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=gb2312" />
<title>地图</title>
<style type="text/css">
#show1{
display:none;
width:255px;
height:190px;
position:absolute;
background:url("images/bgCard.png");
z-index:2;
}
#show2{
display:none;
width:255px;
height:190px;
position:absolute;
background:url("images/bgCard.png");
z-index:2;
}
</style>
<script type="text/javascript">
        function showTip(showdiv) {
            var tipBox = document.getElementById(showdiv);
for(var i=1;i<3;i++)
{
var emp="show"+i;
if(showdiv==emp)
{
tipBox.style.display = "block";
}
else
{
document.getElementById(emp).style.display="none";
}
}
            tipBox.style.top =event.y-190;
            tipBox.style.left =event.x-50;
        }

    </script>
</head><body>
<div align="center"><img src="images/earth.jpg" usemap="#Map" border="0" alt=""/></div>
<div id="show1"><br /><br /><br />澳大利亚</div>
<div id="show2"><br /><br /><br />中国</div>
<map name="Map" id="Map">
<area shape="rect" coords="402,434,479,471" href="javascript:void(0);" onclick="showTip('show1')"/>
<area shape="rect" coords="322,273,399,310" href="javascript:void(0);" onclick="showTip('show2')"/>
</map>
</body>
</html>
网页效果：
存在的问题：现在通过不同的热点都能弹出对应的隐藏DIV了。。现在主要是怎么关闭DIV，我要的效果是鼠标点击热点之外的区域，DIV就全部隐藏啦。大家帮忙解决下。

解决方案 »

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

给每个Div定义一个name，取值，判断，OK，唉，你上一篇子，偶就说了一个Jquery，居然让人喷了，这什么世道啊？我每次回帖都说了，偶是新手！
点击非热点区域，那就是在图片上的onclick事件。热点区域和非热点区域都能触发
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>map.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
     .map {
     width: 800px;
     height: 600px;
     background: transparent url("http://hiphotos.baidu.com/pjw4321/pic/item/13ae8d600d0e005cebf8f885.jpg") no-repeat center center;
     }

     .city {
     height: 40px;
     width: 50px;
     position: absolute;
     left: 505px;
     top: 490px;
     cursor: pointer;
     border: 1px solid red;
     }

     #show {
     display: none;
     height: 40px;
     width: 50px;
     position: absolute;
     z-index: 2;
     background-color: #CCCCFF;
     border: 1px solid #FFFF00;
     }
    </style>
<script type="text/javascript">
function showTip(e, o) {
var tipBox = document.getElementById("show");
tipBox.style.display = "block";
var event = e || window.event;
tipBox.style.top = event.clientX + "px";
tipBox.style.left = event.clientY + "px";
tipBox.innerHTML = o.title;
}

function hideTip() {
var tipBox = document.getElementById("show");
tipBox.style.display = "none";
}
</script>
  </head>

  <body>
    <div class="map"></div>
    <div class="city" onclick="alert('广东');" title="这是广东省，understand！" onmouseover="showTip(event, this)" onmouseout="hideTip()"></div>
    <div id="show"></div>
  </body>
</html>
用一个div即可，鼠标离开隐藏div
我之前是这么做的
、
觉得效果不好，DIV老闪闪的
那你就触发个事件，关闭它；或是用setTimeout如果鼠标不在那个区域上，就关闭；
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>map.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
     .map {
     width: 800px;
     height: 600px;
     background: transparent url("http://hiphotos.baidu.com/pjw4321/pic/item/13ae8d600d0e005cebf8f885.jpg") no-repeat center center;
     }

     .city {
     height: 40px;
     width: 50px;
     position: absolute;
     left: 505px;
     top: 490px;
     cursor: pointer;
     border: 1px solid red;
     }

     #show {
     display: none;
     height: 100px;
     width: 120px;
     position: absolute;
     z-index: 2;
     background-color: #CCCCFF;
     border: 1px solid #FFFF00;
     }

     #show div.title {
     height: 20px;
     width: 120px;
     border-bottom: 1px solid #FFFF00;
     }

     #msg {
     height: 78px;
     width: 120px;
     }
    </style>
<script type="text/javascript">
function showTip(e, o) {
var tipBox = document.getElementById("show");
tipBox.style.display = "block";
var event = e || window.event;
tipBox.style.top = event.clientX + "px";
tipBox.style.left = event.clientY + "px";
document.getElementById("msg").innerHTML = o.title;
}

function hideTip() {
var tipBox = document.getElementById("show");
tipBox.style.display = "none";
}
</script>
  </head>

  <body>
    <div class="map"></div>
    <div class="city" title="这是广东省，understand！" onclick="showTip(event, this)"></div>
    <div id="show">
     <div class="title">
     <span>地域信息</span>
     <span onclick="hideTip()" style="cursor: pointer;">x</span>
     </div>
     <div id="msg"></div>
    </div>
  </body>
</html>
解决方案：在对话框下再弹个完全透明的遮盖层（覆盖整个页面）出来因为是完全透明所以是看不出来的
但是只要点这个遮盖层则隐藏遮盖层+弹出DIV