Hi anyone out there whom can help me.

I need to make the following javascript code to work for 3 of the image map navigation. Currently, I can only make it to work for only one div. I need help to make it work for all three of them one at a time.

I have posted the page here http://cchau.comuv.com/infobank/




<!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>

<style type="text/css">

img{
border:0px;
padding-right:10px;
}

#container{
width: 1000px;
height: 1500px;
border:0px solid black;
margin: 0 auto;
}

#header{
width:980px;
height: 25px;
margin-top: 0px;
margin-bottom: 0px;
background-color: #393737;
border: 1px solid purple;
color: white;
font-family: Arial, Helvetica, sans-serif;
text-align:right;
padding-right: 20px;
font-size: 10pt;
line-height: 16pt;
font-style: normal;
}

#topContainer{
width: 980px;
height:150px;
margin-top:0px;
padding-left: 20px;
padding-bottom: 0px;
border:0px solid green;
background-color: none;
}

#langContainer{
padding-top:5px;
padding-left:0px;
padding-right:0px;
position:absolute;
background-color:#ce5dac;
width:580px;
height:180px;
border: 0px solid red;
display:none;
margin-left:0px;
filter:alpha(opacity=25); /* IE's opacity*/
opacity: 0.75;
}

.transparent{
position: relative;
background-color:transparent;
z-index: 100;
}

#langLeft{
position:absolute;
width:250px;
height:150px;
margin-top:0px;
margin-left:0px;
border: 0px solid red;
}

#langMid{
width:80px;
height:140px;
margin-top:0px;
padding-top:10px;
margin-left:250px;
border: 0px solid red;
float:left;
}

#langRight{
width:250px;
height:150px;
margin-top:0px;
margin-left:330px;
border: 0px solid red;
}

#bodyContainer{
width: 940px;
height:1248px;
margin-left:20px;
margin-right:20px;
padding-top:10px;
padding-left: 10px;
padding-right: 10px;
margin-top:0px;
border:0px solid green;
background-color: #D9D6D6;
}

#leftContainer{
position:absolute;
width:338px;
height:206px;
margin-top:0px;
border:0px solid red;
float: left;
}

#rightContainer{
margin-left: 338px;
width:602px;
height:206px;
margin-top:0px;
border: 1px solid #D9D6D6;

}

#blank{
margin-left:10px;
margin-top: 105px;
width:514px;
height:100px;
display: none;
border:0px solid #333;
}

#exploreDiv{
margin-left:0px;
margin-top: 105px;
width:308px;
height:60px;
display: none;
border:0px solid #333;
}

#hidden_menu3{
width:340px;
heigth:427px;
margin-top:0px;
margin-left: -80px;
display: none;
border:0px solid #333;
}

#langContainer .wlang{
margin-top: 3px;
text-align: right;
font-size: 8pt;
color: black;
line-height:8pt
}

</style>

<script type="text/javascript">
document.onmouseover=check;
function check(e){
var target = (e && e.target) || (event && event.srcElement);
var obj = document.getElementById('exploreDiv');
var obj2 = document.getElementById('sho');
checkParent(target)?obj.style.display='none':null;
target==obj2?obj.style.display='block':null;
}
function checkParent(t){
while(t.parentNode){
if(t==document.getElementById('exploreDiv')){
return false
}
t=t.parentNode
}
return true
}
</script>
</head>

<body>


<div id="container">
<div id="header">Login Tour</div>
<div id="topContainer" >
<div id="langContainer" >
<div id="langLeft" class="transparent">
<p class="wlang">Hos geldiniz &nbsp;&nbsp; Merhba &nbsp;&nbsp; Chao mang &nbsp;&nbsp; Benvingut</p>
<p class="wlang">Vitajte &nbsp;&nbsp; Tervetuloa &nbsp;&nbsp; Vitejte &nbsp;&nbsp; Miresevini &nbsp;&nbsp;</p>
<p class="wlang">Bienvenido &nbsp;&nbsp; Dobrodosli &nbsp;&nbsp; Velkomen &nbsp;&nbsp;&nbsp;&nbsp;</p>
<p class="wlang">Velkommen &nbsp;&nbsp; Bienvenue &nbsp;&nbsp; Sutikti &nbsp;&nbsp;</p>
<p class="wlang">Valkommen &nbsp;&nbsp; Laipni Rudzam</p>
</div>
<div id="langMid" class="transparent"><img src="images/globe.png" /></div>
<div id="langRight" class="transparent">
<p class="wlang" style="text-align:left">Aobod Mastos &nbsp;&nbsp; Maligayang pagdating &nbsp;&nbsp; Bem-vindo</p>
<p class="wlang" style="text-align:left">&nbsp;&nbsp; kdkdkkd &nbsp;&nbsp; Hugamba Reretulnud &nbsp;&nbsp; Witamy</p>
<p class="wlang" style="text-align:left">&nbsp;&nbsp;&nbsp;&nbsp; 欢迎光临 &nbsp;&nbsp; Selamat datang &nbsp;&nbsp; Bun venit</p>
<p class="wlang" style="text-align:left">&nbsp;&nbsp; Benvido &nbsp;&nbsp; Udvozlom &nbsp;&nbsp; Welkom</p>
<p class="wlang" style="text-align:left">Willkommen &nbsp;&nbsp; Benvenuto</p>
</div>
</div>
</div>

<div id="bodyContainer">


<div id="leftContainer">
<img src="images/wings-small.png" width="338" height="206" alt="Wing" usemap="#wingmap" />
<map name="wingmap">
<area id="langTag" shape="rect" coords="0,0,100,20" alt="Languages" href="#" />
<area id="sho" shape="rect" coords="260,100,400,130" alt="Explore" href="#" /> <!-- onmouseover="showDiv('hidden_menu2');" onmouseover="mouseOver(hidden_menu2)"-->
<area id="moreTag" shape="rect" coords="0,160,55,890" alt="More" href="index2.html"/>

</map>
</div>


<div id="rightContainer">
<div id="exploreDiv">
<img src="images/popupmenu2s.png" id="b1" width="308" height="60" alt="Popup Menu 2" usemap="#menu2map" />
<map name="menu2map">
<area shape="rect" coords="70,20,100,50" alt="GLobes" href="globes.html" />
<area shape="rect" coords="105,20,135,50" alt="Map" href="2.html"/>
<area shape="rect" coords="148,20,172,50" alt="Cinema" href="3.html" />
<area shape="rect" coords="182,20,205,50" alt="Tags" href="4.html" />
<area shape="rect" coords="215,20,238,50" alt="List" href="trade.html" />
<area shape="rect" coords="245,20,271,50" alt="Browser" href="2.html"/>
<area shape="rect" coords="275,20,304,50" alt="tyme" href="3.html" />
</map>
</div>
</div>

<div id="hidden_menu3" >
<img src="images/popupmenu.png" width="340" height="427" alt="Popup Menu 3" usemap="#menu3map" />
<map name="menu3map">
<area shape="rect" coords="20,15,60,55" alt="Business" href="business.html" />
<area shape="rect" coords="100,15,140,55" alt="Video" href="online-video.html"/>
<area shape="rect" coords="180,15,220,55" alt="Cloud/Grid" href="cloud-grid.html" />
<area shape="rect" coords="260,15,300,55" alt="World Media" href="world-media.html" />

<area shape="rect" coords="20,75,60,110" alt="Trade/Auction" href="trade-auction.html" />
<area shape="rect" coords="100,75,140,110" alt="Money" href="money.html" />
<area shape="rect" coords="180,75,220,110" alt="Software" href="software.html" />
<area shape="rect" coords="260,75,300,110" alt="Photo-Ideas" href="photos-ideas.html" />

<area shape="rect" coords="20,130,60,170" alt="Phone Talk" href="0.html" />
<area shape="rect" coords="110,130,140,170" alt="Mobile" href="2.html" />
<area shape="rect" coords="180,130,220,170" alt="Music" href="3.html" />
<area shape="rect" coords="260,130,300,170" alt="Toons" href="4.html" />

<area shape="rect" coords="20,190,60,230" alt="Social Networking" href="00.html" />
<area shape="rect" coords="100,190,140,230" alt="Publishers" href="publishers.html" />
<area shape="rect" coords="180,190,220,230" alt="Listers/Reporters" href="list-manage.html" />
<area shape="rect" coords="260,190,300,230" alt="World Advertising" href="advertising.html" />

<area shape="rect" coords="20,250,60,290" alt="Syndicate" href="s0.html" />
<area shape="rect" coords="100,250,140,290" alt="Donate" href="2.html" />
<area shape="rect" coords="180,250,220,290" alt="Shop" href="3.html" />
<area shape="rect" coords="260,250,300,290" alt="Partners" href="4.html" />

<area shape="rect" coords="20,315,50,350" alt="Blog" href="b.html" />
<area shape="rect" coords="100,315,140,350" alt="Non Frofits" href="non-profits.html" />
<area shape="rect" coords="180,315,220,350" alt="Schools/Education" href="education.html" />
<area shape="rect" coords="260,315,300,350" alt="Governmen" href="government.html" />

<area shape="rect" coords="20,375,60,410" alt="ityme" href="business.html" />
<area shape="rect" coords="100,375,140,410" alt="World Language" href="language.html" />
</map>

</div>

</div>

</div>

</body>
</html>